특수한 텍스트 표현하기

웹에서 텍스트는 p태그만으로도 충분하다. 제목은 H관련 태그, 일부 변화를 요구하는 텍스트는 span 태그를 사용하여 스타일을 주는 방식만으로도 훌륭하게 구현할 수 있다. 여기에서는 자주 사용하지는 않지만 기본적으로 HTML이 지니고 있는 특수한 텍스트를 표현하는 태그를 살펴본다.

 

HTML 고급 텍스트 태그 

CONTENTS

 

인용구 표현하는 blockquote, q

HTML에서 인용구를 표현할 때에는 블럭요소로 Blockquote 태그와 인라인 요소로 q 태그가 존재한다. Blockquote 태그는 단락 들여쓰기 표현으로 텍스트를 담고, q태그는 쌍따옴표로 텍스트를 감싼다.

 

인용구를 표현하는 blockquote & q 태그 차이

blockquote 태그는 단락을 들여쓰어 인용구임을 표현하는 블럭요소이다.

---

q태그는 쌍따옴표로 텍스트를 감싸 인용구를 표현하는 인라인요소이다.

 

여기 blockquote 태그 앞에 선이 나오는 건, 티스토리 내부에 스타일을 설정하고 있기 때문이다. 일반적인 웹에서는 선은 없고 단락만 들여쓰기로 표현한다.

 

약어 표현하는 abbr

두음이나 약어를 표현할 때 abbr 태그를 사용한다. abbr 태그는 a태그처럼 title이라는 속성을 지니고 있다. 이 title 속성값은 a태그와 동일하게 튤팁 효과를 보여준다.

 

약어를 표현하는 abbr 태그와 title 속성

웹에서 HTML은 전체 구조를 짜는데 필요한 태그업이다.

 

<p>웹에서 <abbr title="Hypertext Markup Language">HTML</abbr>은 전체 구조를 짜는데 필요한 태그업이다.</p>

위에 HTML에 마우스를 올리면 튤팁이 나오는데, 이것은 abbr 태그에 title 속성을 사용했기에 가능하다.

 

연락처 표현하는 address

웹에서 연락처를 표현할 때는 address 태그를 사용하는데, 이는 웹에서 텍스트가 이텔릭체로 보여지는 것을 넘어서 컴퓨터(시스템)에 연락처를 담은 정보라는 사실을 알려주는 기능도 지니고 있다. 

 

연락처를 표현하는 address 태그

제주특별자치도 제주시 첨단로 242 (우)63309

 

<address> <p>제주특별자치도 제주시 첨단로 242 (우)63309</p> </address>

위는 카카오 본사 주소를 담았는데, 보다시피 이탤릭체로 웹 상에 표현한다.

 

위첨자와 아래 첨자 표현하는 sup & sub 태그

위첨자와 아래 첨자는 수학식이나 화학공식 등에서 자주 사용한다. 위첨자와 아래첨자를 span 태그로 감싼 후에 스타일로도 표현이 가능하지만 매우 성가신 작업이다. 따라서 html 기본 태그로 간단히 구현하는 방법이 적절하다.

 

위첨자 아래첨자 표현하는 sup, sub 태그

My birthday is on the 25^th of May 2001.

Caffeine's chemical formula is C₈H₁₀N₄O₂.

If x² is 9, x must equal 3 or -3.

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

 

위의 예시는 MDN 사이트에서 가져온 것이다. 보다시피 위첨자와 아래첨자를 제대로 표현하고 있다. 위첨자와 아래첨자는 간혹 사용해야 할 상황이 있으므로 알아둘 필요가 있다. 그렇다고 굳이 외울 필요까지는 없고, 필요 시에 검색해서 사용할 정도만 숙지하면 된다.

 

MDN 고급 텍스트 표현하기

Advanced text formatting - Web 개발 학습하기 | MDN

 

이외에 추가적인 텍스트 표현 태그를 알고 싶다면 위 사이트를 참조하면 된다.

 

고급 텍스트 표현 태그

 

더불어 부가적인 인라인요소로 텍스트에 효과를 주는 부분이 필요하다면 W3 schools 문서도 훌륭하다.

 

W3 Schools 텍스트 효과 주기

HTML Text Formatting

 

텍스트 진행 방향 바꾸는 bdo

마지막으로 사용할 일이 극히 드물지만 흥미로운 태그인 bdo를 소개한다. bdo 태그는 dir 속성을 사용해서 텍스트 방향을 바꿀 수 있다. 기본적으로 텍스트는 쓰여진 대로, 그러니까 왼쪽부터 순서대로 출력한다. 하지만 이 텍스트를 역순으로, 그러니까 오른쪽부터 순서대로 출력하고 싶다면 bdo 태그에 dir 속성값으로 rtl을 사용한다.

 

텍스트를 역순으로 보여주는 bdo 태그 dir="rtl" 속성

텍스트를 역순으로 보여주는 bdo 태그 dir="rtl" 속성

 

<bdo dir="rtl">텍스트를 역순으로 보여주는 bdo 태그 dir="rtl" 속성</bdo>

위처럼 bdo 태그를 사용해서 텍스트 진행 방향을 바꿀 수 있지만, 사용할 일은 거의 없다.