[HTML] 서식(Formatting)

서식(Formatting)

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

강조 효과

HTML 문서에서 텍스트를 굵게 표현하고 싶을 때에는 <b>태그(bold text)나 <strong>태그를 사용하면 된다.

<p><b>"이 부분"</b>은 단순히 글씨가 굵은 부분</p>
<p><strong>"이 부분"</strong>은 중요한 부분이라서 굵게 표현</p>

<b>태그는 단순히 화면의 텍스트를 굵게 표현해 준다.

하지만 <strong>태그는 텍스트를 굵게 표현해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 준다.

 

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

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

<i>태그는 단순히 화면의 텍스트를 이탤릭체로 표현해 준다.

하지만 <em>태그는 텍스트를 이탤릭체로 변환해줄 뿐만 아니라 그 내용이 중요하다는 의미도 함께 포함해 준다.

 

검색엔진은 <strong>태그나 <em>태그를 사용하여 강조된 텍스트를 더 중요하게 인식한다.

하이라이팅 효과

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

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

삭제 효과

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

<p><del>"이 부분"</del>을 지운 것처럼 보여준다.</p>

삽입 효과

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

<p><ins>"밑줄 친 부분"</ins>에 들어갈 알맞은 말을 고르시오.</p>

위첨자와 아래첨자 효과

위첨자는 <sup>태그(superscript)를 사용하여, 아래첨자는 <sub>태그(subscript)를 사용하여 각각 표현할 수 있다.

<p>X<sup>3</sup> + Y<sup>5</sup> = Z</p>
<p>물을 나타내는 화학식은 H<sub>2</sub>O 이다.</p>

출력 결과