[HTML] HTML 텍스트 요소를 정리해 보자 - 서식

HTML 텍스트 요소를 정리해보자 - 서식

 

서식 (Formatting)

 

HTML이 제공하는 여러 서식 태그를 이용하면 글씨에 다양한 효과를 더할 수 있습니다.

 

 

강조하기

 

글씨를 굵게 강조하고 싶을 땐 <b> 태그나 <strong> 태그를 이용할 수 있습니다.

또는 외래어 등을 표시할 때 기울임체 (이탤릭체)로 쓰는 경우가 있는데 <i> 태그와 <em> 태그가 이 효과를 지원합니다.

<b> 태그나 <strong> 태그나, <i> 태그나 <em> 태그나.
겉으로는 별반 차이가 없는데 같은 기능을 하는 태그가 왜 두개씩 존재할까요?
<strong> 태그와 <em> 태그는 해당 태그 내부의 내용 또한 중요하다는 의미를 내포하고 있다고 합니다.

따라서 검색엔진은 이 태그들로 강조된 텍스트를 더 중요하게 인식한다고 합니다.

---

글씨를 강조해봅시다.

굵직한 b 태그입니다.
굵직한 strong 태그입니다. 이 내용은 좀 더 중요해요.

---

삐딱한 i 태그입니다.
삐딱한 em 태그입니다. 이 내용은 좀 더 중요해요.

<h3>글씨를 강조해봅시다.</h3>
<b> 굵직한 b 태그입니다.</b><br>
<strong>굵직한 strong 태그입니다. 이 내용은 좀 더 중요해요.</strong>
<hr>
<i> 삐딱한 i 태그입니다.</i><br>
<em>삐딱한 em 태그입니다. 이 내용은 좀 더 중요해요.</em>

---

 

 

하이라이팅 효과 넣기

 

<mark> 태그는 제가 지금 태그에 색을 입히고 있는 것 처럼 태그 내부의 텍스트를 색으로 강조해주는 역할을 합니다.

---

글씨 콧대 강조하기

mark 태그입니다.

<h3>글씨 콧대 강조하기</h3>
<mark>mark 태그입니다.</mark>

---

 

 

삭제효과와 밑줄

 

<del> 태그는 텍스트 중앙에 취소선을 더해줍니다.
사실 귀찮아서 이런거 못해먹겠어요. 같은 내용을 쓸 때 유용합니다.

<ins> 태그는 텍스트 아래에 밑줄을 그어줍니다.
둘 다 어디서 많이 본 듯한 줄임말 같은데 각각 delete와 insert의 줄임말 맞습니다. 😚

---

글씨에 줄을 그어봅시다

dle del 태그입니다.

---

ins 태그입니다.

<h3>글씨에 줄을 그어봅시다</h3>
<del>dle</del> del 태그입니다.
<hr>
<ins>ins</ins> 태그입니다.

 

 

수학식과 화학식 표현하기

 

2의 제곱 또는 물을 뜻하는 화학식을 표현하고 싶으신가요?
HTML의 <sup> 태그와 <sub> 태그를 적절히 사용하면 특수문자를 찾을 필요 없이 쉽게 문서를 작성할 수 있습니다.

---

지수와 탄산수

지수입니다. '3² + 4² = 5²'

탄산수입니다. 'H₂CO₃'

<h3>지수와 탄산수</h3>
<p>지수입니다. '3<sup>2</sup> + 4<sup>2</sup> = 5<sup>2</sup>'</p>
<p>탄산수입니다. 'H<sub>2</sub>CO<sub>3</sub>'</p>

---

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

* 참고 : http://www.tcpschool.com/