블로거가 꼭 알아야 할 HTML 태그 7가지

블로거가 꼭 알아야 할 HTML 태그 7가지

블로그팁이나 운영과 관련된 글에서 태그가 빠질 수가 없습니다. 블로그 운영에 꼭 필요한 HTML 태그 7가지를 뽑아 사용법을 알아보기로 하겠습니다. 

웹공부를 하신 분들이야 태그는 영어 알파벳처럼 쉬운 내용입니다. 웹(www)에서 사용되는 언어가 HTML이고 그 HTML 언어를 구성하는 요소가 바로 태그(Tag)입니다. 웹(www)에 표현되는 글자, 글자색, 글자크기, 그림, 영상등의 모든 내용들은 태그^[각주:1]를 이용하여 표시가 됩니다. (html에 대해서 조금더 자세히 보기)

실제로 예전에는 태그를 하나 하나 하드코딩을 하여 홈페이지를 만들었고 간단한 내용을 웹에 표시하기 위해서도 태그를 알아야 했습니다. 하지만 요즘은 웹 HTML 에디터(티스토리의 글쓰기화면, 카페에서 게시글쓰는 화면)에서 쉽게 글자크기나 색을 지정하여 글을 쓸 수가 있기 때문에 HTML태그를 몰라도 게시글작성, 이메일 작성등의 인터넷을 쉽게 활용할 수가 있습니다.

 

블로그 운영자가 꼭 알아야 할 태그 7선

하지만 블로그를 운영하고 블로그에 광고를 삽입해야 하는 블로거의 경우에는 이 태그를 알아야 할 필요가 있습니다. 태그를 모르면 운영중에 여러가지 어려움을 겪을 수가 있습니다. 수많은 태그중에서 블로거가 반드시 알아야 할 태그 7가지를 내맘대로 선별해봤습니다.

알림. 1. 기본적 사용법 위주로 설명을 했으므로 더 깊은 내용을 원하시면 말씀해주세요.
        2. 아래 내용은 html 태그입력창에서 사용하는 명령입니다. 
        3. 블로그메뉴중 태그 연습장을 클릭해서 바로 연습이 가능합니다.
        4. 태그는 대소문자 구분을 하지 않습니다. 

1. 글자의 크기 및 색상 바꾸는 태그 <font>

<font> 태그는 글자에 대한 속성을 지정할 때 사용하는 태그입니다. <사용법> <font color="색상" size="크기"> 표현할 글자 </font> ▣ 예제와 결과 예1) <font color=blue> 비앤아이 블로그 </font>        결과 ==> 비앤아이 블로그            ; 파랑색 글자로 표시됨 예2) <font color=tomato size=4>비앤아이 블로그 </font>        결과 ==> 비앤아이 블로그             RGB 색상표 보기

 

2. 줄바꿈을 해주는 태그 <BR>

html에에서는 특별히 줄바꾸는 태그를 적지 않으면 글이 한줄로 이어져서 표시가 됩니다. 이렇게 줄을 바꿀때 사용되는 태그가 <br>태그입니다. 줄을 바꾸려는 위치에 <br>태그를 적어주면 됩니다. 티스토리의 경우 글쓰기창에서 shift+enter를 입력하면 줄바꾸기 태그가 자동으로 들어갑니다.  ▣ 예제와 결과  예1) 내 블로그에 대해서  생각해보았습니다. 과연 어떤 주제를 가지고 있는지... 예2) 내 블로그에 대해서  생각해보았습니다.<br> 과연 어떤 주제를 가지고 있는지... 예1)은  한줄로 표시가 되고, 예2는 <br> 태그를 기준으로 해서 2줄로 표시가 됩니다.

     

3. 사진을 표시해주는 <IMG>

<img> 태그는 웹에 이미지를 표시할때 사용하는 태그입니다.  사용법: <img src="이미지경로" border=0 width="넓이" height="높이">              - src는 웹에 표시할 이미지의 경로와 이름을 적어줍니다.            - width는 이미지폭을 지정하고 height는 이미지 높이를 지정하는데 생략가능            - border 는 이미지의 테두리를 표시할것인지를 적어주는 옵션입니다.              0을 적으면 테두리가 표시되지 않고, 1을 입력하면 테두리가 표시됩니다. ▣ 예제  예제1) <img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf"> 예제2) <img src="http://cfs9.tistory.com/image/29/tistory/2008/05/23/00/00/48358aa7a2baf"  border=0 width=100 height=120>

 

4. 링크(연결)를 시켜주는 <A> 

웹에서 문서나 파일, 블로그, 홈페이지등을 연결할때 사용하는 태그로 검색엔진최적화나  문서의 흐름에 많은 영향을 주는 태그입니다. 앵커태그, 링크태그 다 같은 말입니다. 이 <a> 태그는 사용법이 조금 복잡해 보입니다. 그렇다고 배우기 어려울만큼 복잡한것도 아니니 잠시만 들여다보면 쉽사리 이해하고 알 수가 있습니다. 링크라는 말 많이 들어보셨을것입니다. 보통 밑줄이 그어진 글자를 클릭하면 어딘가로 이동이 되는것을 많이 볼 수 있는데 이렇게 다른곳으로 연결(link)할때 사용하는 태그입니다. 엄청나게 중요하고 많이 사용하는 태그이므로 꼭 알아두세요! 사용법 : <a href="연결경로" target="연결방식">웹에 보여질 내용</a>             target 은 연결되는 방식인데 보통 _blank를 많이 사용합니다.             _blank는 새창에 링크를 열어주는 옵션으로 생략하면 현재창에 링크가 열리게 됩니다. 팁1) 블로그에서 다른 블로그나 다른 사이트 링크걸때는 target에 _blank를 적어주는 것이 좋습니다. 그렇지 않으면 현재 본인의 블로그에 연결된 사이트가 오픈이 되고 본인의 블로그는 더 이상 방문자가 볼 수가 없기 때문입니다.             예1) 비앤아이 블로그 링크걸기      <a href="http://ccoma.tistory.com" target="_blank">비앤아이 블로그 바로가기</a>   결과 ==> 비앤아이 블로그 바로가기

 

 5. 문단을 지정하는 <P> 

문단을 구분할때 사용하는 태그입니다. <P>태그를 사용하면 한줄의 빈줄이 생깁니다. 티스토리나 html 웹에디터에서 엔터를 치면 <P>태그가 자동으로 입력되기도 합니다. 사용법: <p> 또는 <p> 문단내용 (글) </p> <p> 문단을 구분하는 태그로서 줄바꿈을 할 때는 BR태그를 사용하고 한줄을 띄울때는 p 태그를 사용 한다. 소스상에서 상당히 많이 볼 수 있는 태그인데 웹2.0으로 넘어오면서는 별로 사용되지 않고 있다. </p>

 6. 글자를 두껍게 해주는 <B>, <strong> 

<b>나 <strong> 태그는 글자를 진하게(두껍게) 해주는 태그입니다. 밑줄을 그어주는 태그는 <u>이고 이탤릭체로 바꿔주는 태그는 <I>입니다. 대부분의 모든 태그가 시작태그와 끝태그가 있는데 <b>태그 역시 끝태그가 있습니다.   사용법 및 예제 예1) <B>태그</B>를 배우면 재미 있습니다.  결과 ==>  태그를 배우면 재미 있습니다. <b>와 </b> 태그 사이에 있는 글자를 진하게 표시를 해줍니다. 예2) 태그는 <b><font color="blue">스타일시트</font></b>와 같이 사용할 수가 있습니다. 결과 ==> 태그는 스타일시트와 같이 사용할 수가 있습니다. 위와 같이 여러개의 태그를 중첩해서 사용할 수도 있습니다. 중첩하여 사용할때는 나중에 사용한 태그부터 닫는 태그를 적어줘야 합니다.

 

 7. 표를 작성해주는 <TABLE> 

<table>태그는 표를 작성해주는 태그로서 html태그를 처음 배우는 사람에게는 처음으로 부딛치게 되는 어려운 태그일 것입니다. 하지만 복잡하기도 하지만 깔끔한 웹문서를 작성하기 위해서는 필수적이며 통계치등을 보여줄때 많이 사용하기 때문에 꼭 알아둘 필요가 있습니다. 구조화된 프로그램에서는 <table>태그 대신에 <div>와 <span>을 이용하기도 합니다. <table>태그는 사용상 다른태그와는 달리 조금 복잡한 구조로 되어 있습니다. 한개의 태그만이 아닌 여러개의 태그로 구성되어 있고 늘 같이 사용해야 합니다. 같이 사용해야 하는 태그는 기본적으로 <tr>과 <td>가 있습니다. <tr> : 표에서 한줄을 만들어줌. <td>: 표에서 한칸을 만들어줌 예1) <table border=1 bordercolor="orange"> <tr><td> 표를 만들어주는 태그는 기본만 알아두세요 </td></tr> </table> 결과. 표를 만들어주는 태그는 기본만 알아두세요 설명. 위와 같이 하면 한줄의 표(박스)가 만들어지고 border=1에 의하여 테두리 선이 만들어지며 bordercolor는 박스의 색입니다.

참고

주석달기 : <!-- 내용 -->
               <!-- 과 -->사이에 있는 내용을 주석처리하여 화면에 보이지 않도록 합니다. 소스에 메모할때는
                임시로 보이지 않도록 할때 사용할 수 있습니다.

공백한칸 : &nbsp; 
               웹에서 공백은 한칸만 인식을 합니다. 여러칸의 공백 입력을 해야 할때는 "&nbsp;"을 이용하여
               빈칸을 표현합니다. 이 이상한 기호를 한번 적을때마다 한개의 공백이 생깁니다.

가운데 정렬 : <center> 내용 </center>
               <center>와 </center>사이의 내용이 가운데 정렬이 됩니다. ( = <p align=center>)

오른쪽 정렬 : <p align=right> 내용 </p>
왼쪽 정렬    : <p align=left> 내용 </p>
양쪽정렬     : <p align=justify> 내용 </p>

2009/02/15 - [CSS for 티스토리] - [html] table 태그 확실하게 이해하기

 

 

1. 태그(tag). 여기서 말하는 태그는 포스트에 달아주는 그런 태그가 아니라 html 에 사용되는 일종의 명령임. [본문으로]