개발 도구 (Development Tools)/HTML & CSS

#4. HTML 텍스트 서식

BiCute 2023. 3. 10. 08:00
반응형

 

HTML의 텍스트 서식은 태그를 사용하여 문서의 텍스트를 서식적으로 표현하는 것을 말합니다.

예를 들어, 제목을 표시하기 위해서는 <h1> 태그를, 굵은 글씨를 표시하기 위해서는 <strong> 태그를, 기울어진 글씨를 표시하기 위해서는 <em> 태그를 사용할 수 있습니다.

 

이 외에도 다양한 태그가 있습니다. 예를 들어:

  • <p>: 단락을 표시하는 태그
  • <br>: 줄바꿈을 표시하는 태그
  • <ul>: 점으로 구성된 목록을 표시하는 태그
  • <ol>: 숫자로 구성된 목록을 표시하는 태그
  • <li>: 목록의 각 항목을 표시하는 태그
  • <blockquote>: 인용구를 표시하는 태그

 

HTML 태그를 사용하여 텍스트의 서식을 꾸며주면 웹 페이지를 더욱 깔끔하게 만들 수 있습니다.

 

 

 

# 굵은 텍스트(Bold text)

 

HTML에서 굵은 텍스트는 <strong> 태그를 사용하여 표시할 수 있습니다.

굵은 텍스트는 글씨 굵기가 두껍게 보여지는 것으로, 중요한 내용을 강조하거나 글의 구조를 분명하게 표현하는 데 사용됩니다.


예:

<p>이것은 <strong>굵은</strong> 글자입니다.</p>

 

<b>태그와의 차이점

<b> 태그와 <strong> 태그의 차이점은 굵기 이외에도 의미입니다.

<b> 태그는 글씨 굵기를 두껍게 보여주는 것만을 나타냅니다.

반면, <strong> 태그는 글씨 굵기뿐만 아니라, 글씨의 의미적 중요도를 나타냅니다.

즉, 웹 접근성을 위해서는 <strong> 태그를 사용하는 것이 바람직합니다.

 

 

 

# 기울임꼴 텍스트(Italic text)

 

HTML에서 기울임꼴 텍스트는 <em> 태그를 사용하여 표시할 수 있습니다.

기울임꼴 텍스트는 글씨의 기울기가 보여지는 것으로, 중요한 내용을 강조하거나 글의 구조를 분명하게 표현하는 데 사용됩니다.

 

예:

<p>이것은 <em>기울임꼴</em> 글자입니다.</p>

 

 

<i> 태그와 차이점

<i> 태그와 <em> 태그의 차이점은 의미입니다.

<i> 태그는 글씨의 기울기만을 나타냅니다.

반면, <em> 태그는 글씨의 강조 역할을 나타냅니다.

그래서 웹 접근성을 위해서는 <em> 태그를 사용하는 것이 바람직합니다.

 

 

 

 

# 밑줄 텍스트(Underline text)

 

HTML에서 밑줄 텍스트는 <u> 태그를 사용하여 표시할 수 있습니다.

밑줄 텍스트는 문장의 구조를 분명하게 표현하거나, 링크가 클릭되지 않은 상태에서 링크의 강조 효과를 나타낼 때 사용됩니다.

 

예:

<p>이것은 <u>밑줄</u> 글자입니다.</p>

 

 

 

# 아래첨자와 위첨자 (Subscript, Superscript)

 

HTML에서 아래첨자와 위첨자 텍스트는 <sub> 태그와 <sup> 태그를 사용하여 표시할 수 있습니다.

아래첨자 텍스트는 문장의 하단에 작은 글씨로 표시됩니다.

반면, 위첨자 텍스트는 문장의 상단에 작은 글씨로 표시됩니다.

수학 기호, 유니코드 기호 등을 표현할 때 사용됩니다.

 

예:

<p><sub>아래첨자</sub> 그리고 <sup>위첨자</sup>가 있는 텍스트입니다.</p>

 

 

 

# 줄임말 태그(Abbreviation tag)

 

HTML에서 <abbr> 태그는 약어를 표시할 때 사용합니다.

<abbr> 태그는 약어의 전체 표현을 감싸며, title 속성을 사용하여 약어의 전체 표현을 제공할 수 있습니다.

이를 통해, 사용자가 텍스트에 마우스를 올려 놓으면, 약어의 전체 표현이 보여집니다.

 

예:

<p><abbr title="세계보건기구(World Health Organization)">WHO</abbr>는 1948년에 설립되었습니다.</p>
반응형