[웹 디자인] 2일차: HTML 텍스트 관련 요소

 

HTML 텍스트 관련 요소

HTML에는 다양한 텍스트 관련 요소가 있습니다. 이 요소들은 문서의 제목, 단락, 강조, 인용문 등을 정의하는 데 사용됩니다.

제목 요소

HTML에는 여섯 가지 수준의 제목 요소가 있습니다. 제목 요소는 문서의 구조를 정의하고, 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다.

• <h1>: 최상위 제목 요소. 일반적으로 문서나 섹션의 주요 제목으로 사용됩니다.
• <h2>: 두 번째 수준의 제목 요소.
• <h3>: 세 번째 수준의 제목 요소.
• <h4>: 네 번째 수준의 제목 요소.
• <h5>: 다섯 번째 수준의 제목 요소.
• <h6>: 여섯 번째 수준의 제목 요소. 일반적으로 가장 낮은 중요도를 가집니다.

예제:

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

단락 요소

단락 요소는 일반적인 텍스트 블록을 정의합니다.

• <p>: 단락을 정의하는 요소입니다.

예제:

<p>이것은 단락입니다. 여러 줄의 텍스트가 하나의 단락으로 묶입니다.</p>

강조 요소

강조 요소는 텍스트를 강조하는 데 사용됩니다.

• <strong>: 강한 중요성을 나타내는 요소로, 일반적으로 텍스트를 굵게 표시합니다.
• <em>: 중요성을 나타내는 요소로, 일반적으로 텍스트를 기울임꼴로 표시합니다.
• <b>: 굵게 표시하는 요소지만, 의미론적인 중요성은 없습니다.
• <i>: 기울임꼴로 표시하는 요소지만, 의미론적인 중요성은 없습니다.

예제:

<p><strong>중요한 텍스트</strong>는 굵게 표시됩니다.</p>
<p><em>강조된 텍스트</em>는 기울임꼴로 표시됩니다.</p>
<p><b>굵게 표시된 텍스트</b>는 굵게 표시되지만, 의미론적인 중요성은 없습니다.</p>
<p><i>기울임꼴 텍스트</i>는 기울임꼴로 표시되지만, 의미론적인 중요성은 없습니다.</p>

인용문 요소

인용문 요소는 텍스트를 인용할 때 사용됩니다.

• <blockquote>: 긴 인용문을 블록 형태로 표시합니다.
• <q>: 짧은 인용문을 인라인 형태로 표시합니다.
• <cite>: 저작물의 출처를 나타냅니다.
• <abbr>: 약어를 정의합니다.

예제:

<blockquote>
  <p>이것은 긴 인용문입니다. 블록 형태로 표시됩니다.</p>
</blockquote>
<p>이것은 <q>짧은 인용문</q>입니다.</p>
<p><cite>출처</cite>를 나타냅니다.</p>
<p>약어는 <abbr title="Hypertext Markup Language">HTML</abbr>입니다.</p>

기타 텍스트 관련 요소

• <mark>: 하이라이트된 텍스트를 표시합니다.
• <del>: 삭제된 텍스트를 표시합니다.
• <ins>: 삽입된 텍스트를 표시합니다.
• <sup>: 위첨자 텍스트를 표시합니다.
• <sub>: 아래첨자 텍스트를 표시합니다.

예제:

<p><mark>하이라이트된 텍스트</mark>를 표시합니다.</p>
<p><del>삭제된 텍스트</del>를 표시합니다.</p>
<p><ins>삽입된 텍스트</ins>를 표시합니다.</p>
<p>위첨자 텍스트는 H<sup>2</sup>O와 같습니다.</p>
<p>아래첨자 텍스트는 CO<sub>2</sub>와 같습니다.</p>

결론

HTML에는 다양한 텍스트 관련 요소가 있으며, 이 요소들은 문서의 구조와 의미를 정의하는 데 중요한 역할을 합니다. 제목, 단락, 강조, 인용문 등의 요소를 적절히 사용하여 가독성 높은 문서를 작성할 수 있습니다.

다음 글에서는 리스트와 테이블에 대해 알아보겠습니다.

다음 글에서 만나요!