HTML5〃텍스트(Text) 태그 정리

이전 글에서는 HTML5의 기본구조에 해당되는 시맨틱 태그들을 알았보았는데요. 그렇다면 이제는 텍스트를 꾸미는 태그를 정리해볼까 합니다. 다음 글에서는 폰트 태그를 다뤄볼 계획이고요.

제가 디자인이나 섬세한걸 다루는데에는 소질이 없어 HTML을 대충 공부했기 때문에 지금 정리하는 이 순간에도 처음 공부하는 느낌으로 많은 시간을 할애하고 있습니다. 그만큼 눈에 쏙들어오게 정리할까 생각중인데 마음처럼 될련지 모르겠네요..

■ <br> 태그 vs <p> 태그 (줄을 바꿀때)

가장 먼저 줄을 바꿀때 사용되는 태그인 <br>과 <p>에 대해서 알아보겠습니다. 한가지를 설명하기도 벅찬데 두가지를 비교하게 되는건 용도는 비슷하지만 출력되는게 달라서 같이 알아보려고 하는데요. <br>태그는 </br>로 끝낼 필요가 없으며 단순히 줄넘기는 용도로 사용하면 됩니다.

두번째 <p>태그는 단락간 단락으로 구분할때 쓰는 줄바꿈이고, 그 끝에 </p>로 마무리 태그를 넣는게 좋습니다. 당장은 오류가 안나지만 코드가 복잡해지면 혼동이 오거든요. 또한 <p>태그는 여백이 생기는게 특징입니다.

■ <h1> ~ <h6> 태그 (중요한 텍스트를 표현할 경우 사용)

다음글에서 정리할 예정이지만 텍스트의 크기를 조절하려면 <font>태그를 이용하는데요. 이 <h>태그도 텍스트의 크기를 구분할 수 있다해서 무분별하게 사용하면 검색엔진이 웹페이지의 중요한 부분을 찾기에 혼동이 올수가 있습니다. 크기와 스타일만을 바꾸려면 꼭 <font>태그를 쓰세요.

■ <pre> 태그 (글꼴, 글자 크기, 줄바꿈등 입력한 그대로 출력)

이 <pre>는 귀차니즘을 좋아라 하시는 분들이 좋아하는 태그겠네요. <pre>~</pre> 구간에 있는 글들은 사용자가 설정한 글꼴과 글자 크기, 줄 바꿈등이 그대로 출력되는 태그입니다. 하지만 중간 중간에 스타일을 입히지 못하기 때문에 웹디자이너들이 잘 쓸지는 모르겠습니다.

■ 텍스트 서식 태그 ( 굵기, 기울기, 첨자 … 등 )

텍스트들을 굵게 하거나 작게하고 기울게 하는 등의 서식태그는 <b>텍스트</b> 지정범위를 만들어 적용 시킵니다. 서식태그는 한컴이나 워드등 문서작업을 할때 이미 경험을 한 부분이기 때문에 낯설지 않은것 같아요. 코드는 아래에 정리했어요~~

● <b>~</b> : 글씨를 굵게    ● <strong>~</strong> : 글씨를 굵게 + 강조

● <small>~</small> : 글씨를 작게    ● <i>~</i> : 기울게    ● <em>~</em> : 기울게 + 강조

● <code>~</code> : 이 안에 있는 텍스트는 코드임을 알림  ● <mark>~</mark> : 형광펜 효과  

● ^~ : 위 첨자    ● _~ : 아래 첨자    

■ 특수기호 표현 (코드에서 < , > , " , & 들이 태그로 쓰이기 때문)

다른 특수부호는 그냥 쓰면 되지만, 시맨틱 태그들에 쓰이는 특수기호들은 &를 포함한 명령어로 표현을 해야됩니다. 번거롭지만 프로그래밍 언어에서 정의를 내렸으니 어쩔수가 없죠. 저는 큰따옴표를 쓸때 제일 귀찮을 것 같아요.