[HTML] HTML - 7.서식

서식(Formatting)\

HTML에서 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)들을 제공합니다.

---

1.강조 효과

HTML 문서에 텍스트를 굵게 표시하고 싶다면 <b> 태그를 사용하거나 <strong> 태그를 사용합니다.

<p><b>"볼드체 글씨 부분"</b>은 글씨가 굵은 부분을 나타낸다</p>
<p><strong>"strong 부분"</strong>은 중요한 부분을 굵게 표시

<b> 태그는 단순히 화면의 텍스트를 굵게 표시하는데 사용하고 

<strong> 태그는 텍스트 자체를 굵게 표현해줄 뿐만 아닌 그 내용이 중요하다는 의미와 함께 포함됩니다.

 

HTML 문서에서 italic체를 표현하고 싶을 때에 <i>태그(italic text)나 <em>태그(emphasized text)를 사용합니다.

 <p><i>"이탤릭체 글씨부분"</i>은 단순히 글씨가 이탤릭체인 부분</p>
 <p><em>"em 태그 부분"</em>은 단순히 중요한 부분이라 이탤릭체로 표현</p>

<i>태그는 단순히 화면의 텍스트를 이탤릭체로 표현하고 

<em>태그는 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미와 함꼐 포함됩니다.

 

검색엔진에서는 <strong>태그나 <em>태그를 사용해 강조된 텍스트를 더욱 중요하게 인식하게 합니다.

---

2.하이라이팅 효과

<mark> 태그는 텍스트에 하이라이팅(highlighting) 효과를 적용시켜 줍니다.

<p><mark>"하이라이팅 부분"</mark>만 하이라이팅</p>

---

3.삭제 효과

<del> 태그(delete)는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것 같은 효과를 내줍니다.

<p><del>"del 부분"</del>을 지운 것 같은 효과</p>

---

4.삽입 효과

<ins>태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 내줍니다.

 <p><ins>"ins 부분"</ins>에 알맞은 말을 고르시오</p>

---

5.위첨자와 아래첨자 효과

위첨자 <sup>태그(superscript)를 사용해, 아래첨자는 <sub>태그(subscript)를 사용하여 각각 표현 가능합니다.

<!-- 위첨자와 아래첨자 sup or sub 태그  -->
<p>X <sup>2</sup> + Y<sup>3</sup> = Z</p>
<p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>
<p>지구와 달의 거리는 약 38만 4400<sup>km</sup> 입니다.</p>

---

참고 자료

코딩교육 티씨피스쿨