HTML Formatting
1. HTML Formatting이란?
HTML Formatting은 웹 페이지에서 텍스트를 더 읽기 쉽고 의미 있게 표현하기 위해 사용하는 요소들입니다. 텍스트의 굵기를 조정하거나, 기울임을 주거나, 하이라이트하는 등 텍스트의 스타일을 변경하는 데 사용됩니다. HTML에는 기본적으로 텍스트를 꾸미기 위한 다양한 포맷팅 태그가 제공됩니다.
2. HTML Formatting 요소
2.1 굵은 텍스트 (Bold Text)
<b>: 굵은 텍스트를 나타냅니다.
<b>이 텍스트는 굵게 표시됩니다.</b><strong>: 의미적으로 중요한 텍스트를 나타내며, 굵게 표시됩니다.
<strong>이 텍스트는 의미적으로 중요하며 굵게 표시됩니다.</strong>2.2 기울임 텍스트 (Italic Text)
<i>: 기울임체로 텍스트를 표시합니다.
<i>이 텍스트는 기울임체로 표시됩니다.</i><em>: 의미적으로 강조된 텍스트를 나타내며, 기울임체로 표시됩니다.
<em>이 텍스트는 의미적으로 강조되며 기울임체로 표시됩니다.</em>2.3 밑줄 텍스트 (Underlined Text)
<u>: 텍스트에 밑줄을 그을 때 사용됩니다.
<u>이 텍스트는 밑줄이 그어집니다.</u>2.4 취소선 텍스트 (Strikethrough Text)
<s>: 텍스트에 취소선을 그어 더 이상 유효하지 않음을 나타냅니다.
<s>이 텍스트는 더 이상 유효하지 않습니다.</s>2.5 첨자 텍스트 (Subscript & Superscript)
<sub>: 아래 첨자 텍스트를 나타냅니다.
H<sub>2</sub>O<sup>: 위 첨자 텍스트를 나타냅니다.
X<sup>2</sup>2.6 인용구 (Quotation)
<blockquote>: 긴 인용문을 블록 단위로 표시합니다.
<blockquote>이것은 긴 인용문입니다.</blockquote><q>: 짧은 인용구를 표시합니다.
<q>이것은 짧은 인용문입니다.</q>2.7 코드 및 키보드 입력
<code>: 코드 스니펫을 표시합니다.
<code>let x = 10;</code><kbd>: 키보드 입력을 표시합니다.
<kbd>Ctrl</kbd> + <kbd>C</kbd>3. 의미적인 포맷팅과 시각적인 포맷팅의 차이
시각적인 포맷팅은 <b>, <i>, <u> 등의 태그처럼 텍스트의 외형을 변화시키지만, 의미적으로 중요한 정보를 제공하지는 않습니다.
의미적인 포맷팅은 <strong>, <em>, <mark>와 같이 텍스트의 의미를 강조합니다.
4. HTML Formatting과 CSS
HTML 포맷팅 태그는 기본적인 텍스트 스타일을 제공합니다. 하지만 현대 웹 디자인에서는 주로 CSS를 사용하여 텍스트의 시각적 스타일을 관리합니다. HTML 태그는 텍스트의 의미와 구조에 집중하고, CSS는 스타일을 담당하는 것이 좋습니다.