HTML 텍스트 서식(Text Formatting)이란 HTML 문서 안에서 콘텐츠의 모양과 의미를 꾸미기 위해 특별히 설계된 요소들을 말합니다. 이러한 태그들을 활용하면 텍스트를 굵게 만들거나, 기울이거나, 강조하거나, 첨자로 표시하는 등 다양한 방식으로 내용을 표현할 수 있습니다.
기본 문법
HTML 텍스트 서식 태그는 다음과 같은 형태로 사용합니다.
<tagname>내용</tagname>
주요 텍스트 서식 태그
HTML에서 자주 사용되는 대표적인 텍스트 서식 태그는 다음과 같습니다.
| 번호 | 태그 및 설명 |
|---|---|
| 1 | <b> 텍스트를 굵게(bold) 표시합니다. |
| 2 | <em> 텍스트를 강조(emphasized)하여 기울임꼴로 표시합니다. |
| 3 | <i> 텍스트를 기울임꼴(italic)로 표시합니다. |
| 4 | <small> 주변 텍스트보다 작은 크기로 표시합니다. |
| 5 | <strong> 중요한 텍스트임을 나타내며 굵게 표시합니다. |
| 6 | <sub> 아래 첨자(subscript) 형태로 표시합니다. |
| 7 | <sup> 위 첨자(superscript) 형태로 표시합니다. |
| 8 | <ins> 문서에 새로 삽입된(inserted) 텍스트에 밑줄을 표시합니다. |
| 9 | <del> 삭제된(deleted) 텍스트에 취소선을 표시합니다. |
| 10 | <mark> 텍스트에 형광펜으로 칠한 듯한 하이라이트 효과를 줍니다. |
<b>와 <strong>, 그리고 <i>와 <em>은 화면상 결과가 비슷해 보일 수 있지만, <strong>과 <em>은 단순한 시각적 효과가 아니라 '중요함'이라는 의미를 브라우저와 검색 엔진에 전달한다는 점에서 차이가 있습니다. 따라서 의미를 담아야 하는 경우에는 <strong>과 <em>을 사용하는 것이 좋습니다.
이제 실제 예제를 통해 각 태그가 어떻게 동작하는지 확인해 보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML 텍스트 서식 데모</h1>
<b>b 태그: 굵은 텍스트</b>
<br>
<em>em 태그: 강조된 텍스트</em>
<br>
<i>i 태그: 기울임꼴 텍스트</i>
<br>
<small>small 태그: 작은 텍스트</small>
<br>
<strong>strong 태그: 중요한 텍스트</strong>
<br>
<sub>sub 태그: 아래 첨자</sub>
<br>
<sup>sup 태그: 위 첨자</sup>
<br>
<ins>ins 태그: 삽입된 텍스트</ins>
<br>
<del>del 태그: 삭제된 텍스트</del>
<br>
<mark>mark 태그: 하이라이트 텍스트</mark>
<br>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 각 태그별로 서식이 적용된 텍스트가 화면에 출력됩니다.
