비전공자를 위한 HTML/CSS-텍스트를 꾸며 주는 요소

텍스트 표현 태그

웹 표준화가 대두하면서 웹 문서의 구조와 표현을 분리하였습니다.

그 과정에서 많은 표현용 태그들이 사라졌고, 지금은 표현용 태그가 얼마 남지 않았습니다.

그 중 <b>, <i>, <u>, <s>에 대해 살펴보도록 하겠습니다.

• <b> : bold 태그는 글자를 굵게 표현하는 태그입니다.
• <i> : italic 태그는 글자를 기울여서 표현하는 태그입니다.
• <u> : underline 태그는 글자의 밑줄을 표현하는 태그입니다.
• <s> : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.)

위 태그들은 의미가 없는 표현용 태그이기 때문에 사용하실 때는 각별히 주의를 하셔야 합니다.
다음 강의로 넘어가기 전에, "Chpater3, 2) 시멘틱 마크업" 강의 영상을 먼저 보시길 추천드립니다.
(https://www.edwith.org/boostcourse-ui/lecture/33505)

 

위에서 살펴본 태그 이외에도 텍스트 관련 태그는 많습니다.

아래 참고 링크의 페이지 중간쯤에 있는 Inline text semantics 섹션에 더 자세히 나와 있습니다.

자주 사용하는 건 몇 개 되지 않지만 그래도 한 번씩은 살펴보시기 바랍니다.

 

내용 정정합니다.

HTML5 버전에서는 <i> 태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경되었습니다.
특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용됩니다.

 

---

 

코드실습

<p>
    <b>Lorem</b> <i>ipsum</i> dolor sit amet<br>
    <u>Lorem</u> <s>ipsum</s> dolor sit amet
</p>

 

---

참고자료

 

 

HTML elements reference

https://developer.mozilla.org

This page lists all the HTML elements, which are created using tags.