텍스트

지금까지 HTML 문서의 기본 구조와 뼈대를 이루는 핵심 태그들에 대해 알아보았습니다.

이번 포스팅에서는 HTML 태그 중 텍스트를 나타내는데 사용하는 태그들에 대해 살펴보겠습니다.

문단(<p>)

문단(paragraph)을 나타내는 태그는 <p>로 나타낼 수 있습니다.

HTML은 엔터, 공백, 탭을 무시합니다. 따라서 문단을 작성하기 위해서는 <p>를 이용하여 하나의 문단이 어디까지인지 분명히 밝혀야합니다.

하나의 완성된 문장으로서 전후 문단과의 구분을 위해 약간의 여백을 삽입하여 줍니다.

문단과는 달리 빈 줄만 삽입하고 싶을 때는 <br>을 사용합니다. <br>은 홀태그이므로 닫는 태그는 존재하지 않습니다. 그저 단순한 줄바꿈을 할때 사용하는 태그입니다.

제목(<h1>~<h6>)

제목을 나타내는 태그로는 <h1>부터 <h6>까지의 태그를 이용할 수 있습니다. 제목은 문단과 비슷하여 한 줄을 차지하고 개행한다.

단, <h4> 이하의 제목 태그는 보통 문단보다 크기가 작기 때문에 일반적으로 <h1>부터 <h3>까지를 제목으로 사용합니다.

이스케이프 (escape)

escape는 HTML 문서에서 일부 특수 문자에 대해서는 텍스트로 여기지 않습니다.

예를 들어 '<'는 HTML에서 태그의 시작으로 받아들이기 때문에 텍스트로 그냥 '<'을 사용한다면 오류가 날 수 있습니다.

이럴떄 HTML에서 특수문자로 인식하는 문자를 사용하기 위해서 escape를 사용합니다.

대표적으로 &nbsp; 는 공백을 나타내고 &lt; (less than) 는 '<' 문자를 &bt; (better than) 은 '>' 를 나타내주는 이스케이프 입니다.

다음 아래의 사진은 이스케이프 예시입니다.

기타(<wbr>, <pre>, <xmp>, <ruby>)

<wbr>은 긴 단어가 오른쪽 끝에 닿았을 경우 자동 개행할 위치를 지정하는 태그입니다.

오른쪽 끝에 걸릴 경우 <wbr>태그로 표시한 곳에서 개행해도 좋다는 암시적인 허가일 뿐 강제적인 의미는 없습니다.

<pre>와 <xmp>는 있는 그대로 출력하는 태그입니다. 따라서 개행, 소스코드, 연산자, 특수기호 등을 그대로 출력할 때 사용하는 태그입니다.

하지만 너무나 고지식한 태그이므로 가독성을 위해 준 개행까지 그대로 출력하기 때문에 주의하여 사용해야 합니다.

<pre>와 <xmp>의 차이점은 태그 인식 여부입니다. <pre>는 그래도 태그를 인식하는 반면 <xmp>는 태그를 인식하지 않습니다.

위 사진은 지금까지 공부했던 텍스트 관련 태그를 사용한 예시들입니다. 왼쪽은 소스코드, 오른쪽은 결과물입니다.

마지막으로 <ruby>태그는 윗 첨자를 넣어줄 때 사용하는 태그입니다. 

<ruby>의 자식 태그로 <rp>와 <rt>를 가지는데 <rp>는 브라우저가 읽지 못하는 경우 윗점자 대신 나타나는 내용이며 <rt>는 윗첨자를 표현할 때 사용하는 태그입니다.

위 처럼 <ruby>를 쓰면 새옹지마처럼 윗첨자를 달 수 있습니다.