설치형 블로그를 사용하게 되면서 HTML 을 모르고서는 블로그를 보다 효과적으로 사용할 수가 없음을 느끼게 되었다.
그리고, 책을 통해서 HTML Tag 에 대해서 공부를 해보니, 처음에는 낯설고 생소하여 어렵게만 느껴지던 것이
무엇인가 나타내주기 위한 하나의 약속 언어이구나 라는 생각으로 전환되면서 어려운 것이 아니라 블로그에 글을 올리는 데도움이 되는 정보임을 알게 되었다.
블로그에 글을 올리고 하다보면 그림과 표와 글자가 깨지거나 엉뚱하게 나타날 경우가 발생한다.
예전 같았으면 어쩔 줄 몰라 하다가 메모장 같은 곳에 글을 옮겨 붙인 다음에 글 편집을 처음부터 새롭게 한다든지 해서 다시 쓰게 되었는데, 이제는 그럴 필요 없이 HTML 글쓰기를 선택하여 그 속에 꼬여있는 태그를 삭제하거나 수정해주면 되는 것이다.
그래서, 반드시 책이나 주위에 잘 아는 사람을 통해서 꼭 HTML 에 대해서 배워보기를 추천하는 바이다.
이 글에서는 간단하게 활용 가능한 HTML 태그에 대해서 소개하도록 한다.
- <BR> 과 <P></P> 에 대해서 알게 되었다.
; <BR> 은 동일한 단락에서 다음 줄로 이동할 때 쓰는 것으로 편집기에서 <shift> + <Enter> 를 누르면 다음으로 내려올 때 생기는 태그다.
반면에 <P></P> 태그는 <Enter> 를 눌렀을 때 단락이 바뀌게 되는 데 이렇게 단락이 바뀔 때 나타나는 태그이다.
=> 반대로 생각해서 HTML 로 글쓰기 할 때에 <BR> 이란 태그를 써 넣으면 그 사이로 해서 줄이 바뀌고, <P> 태그를 사용하면 <P> 에서 </P> 까지 동일한 단락이 되게 된다. - <marquee></marquee> 의 재미있는 기능을 알게 되었다.
; 위의 태그는 글자가 우에서 좌로 흘러가 듯이 나타나는 효과를 보인다. 재밌는 기능이고 예전 PC 통신 시절의 게시판 제목에서 많이 봤던 기능이나, 요즘에는 잘 사용이 안되는 것 같다. - 배경화면을 움직이지 않게 고정할 때는 스타일 시트를 사용하면 좋다.
- 스타일 시트의 표현
Body {background-image:url(https://t1.daumcdn.net/cfile/tistory/116F573D4F2B493B18); background-repeat:no-repeat; background-position:center;background-attachment:fixed;}
=> 위와 같은 약속이 있는데, 모든 글의 성격을 일일히 HTML 에서 해주지 않고 스타일 시트를 사용하면 한번에 전체에 대해서 정의를 내려주기 때문에 편리하다. Tistory 에서는 Style CSS 를 제공하고 있다.
- Html 의 표현
<body bgcolor="#ffffff"></body> - Image 를 올릴 때
<img src="~~~~~">
; " " 사이에는 image 가 있는 URL 주소를 넣어주면 된다. - 링크를 만들 때
<A href="~~~~~"> 텍스트</A>
; 링크는 기본적으로 편집기에서 제공하는 기능을 사용하는데, 별도로 HTML 편집으로 들어가서는 잘 하지 않는다.
그런데, 이 태그들을 알고 있으면 HTML 코드를 읽을 수 있는 눈이 생기기 때문에 필요하다.
" " 사이에는 마찬가지로 텍스트를 클릭하였을 때 연결될 URL 주소를 적어주면 된다. - 링크 텍스트의 밑줄 없애기와 마우스 커서를 올려 놓았을 때 스타일 바꾸기
<Style>
<!--
A {text-decoration: none}
A:hover {color:blue ; text-decoration:underline ; font-size:10pt}
-->
</Style>
; 링크를 편집기에서 만들면 색깔이 변하고 밑줄이 그어질 경우가 있는데 그게 싫을 경우, 위와같이 text-decoration 을 none 으로 바꾸어 주면 된다.
- Name 과 href 는 짝꿍
<A name="앵커이름"> 텍스트 나 이미지 </A>
<A href="#앵커이름"> 텍스트 또는 이미지 </A> - 음악 / 동영상 삽입
<EMBED src=" ">
; 많이 사용할 태그이다. 블로그를 좀더 블링블링 하게 만들 수 있는 음악 태그이다. - 테이블을 이용하여 Layout 구성을 잘 할 수 있겠다.
<table width="…." border="…." bgcolor="…." align="center">
<tr>
<td>
행과 열을 나타낼 수 있다.<BR>
</td>
</tr>
</table> - 레이어를 만들 때 사용하는 태그가 <DIV> 이다.
- 검색엔진에게 키워드를 노출시킴 meta 태그
<meta name="keywords" content="독서, 학습, 독서법, 자기주도학습, 독서학습, 창의적, 체험학습, 수리논술, DISC">
; 자신의 blog 를 검색엔진에게 노출 시키기 위하여 위와 같은 meta 태그를 작성한다고 하는데,
요즘의 naver 검색방식이 달라져서인지 위와 같은 태그 없이도 내용상에 들어있는 단어들을 가지고 검색이 되는 것 같다. 크게 필요성을 못 느끼지만, 한줄 적으면 뭔가 달라질 것도 같아서 입력해 놓았다.
; 참고로 이 태그는 매번 글을 올릴 때 쓰이는 태그라기 보다는 블로그 자체의 mail HTML 에 올려놓고 사용하는 것이 일반적이다.
김성민의 북리지 - 함께 성장하는 책 리더십 지혜
'▶독서경영 > 실용 독서' 카테고리의 다른 글
| [김성민의 실용독서] 머니야? 머니야!는 어떻게 1억을 벌었을까? - 조헌탁 (2) | 2012.05.11 |
|---|---|
| [김성민의 실용독서] 누구나 블로그로 돈을 벌 수 있다. - 조원선 (1) | 2012.05.11 |
| 윈도 18년 사용자의 맥 전환기 - 시스템 환경 Setup (4) | 2012.04.25 |
| 내 블로그는 내가 꾸미자 - HTML & CSS 공부 (0) | 2012.03.06 |
| 블로그 무작정 따라하기 - 고영민 (0) | 2012.02.03 |
