텍스트 요소(Text Elements)
단락 요소와 제목 요소(Paragraph and Heading Elements): <p>, <h1> ~ <h6>
단락 요소(<p>)는 문서를 구성하는 기본 텍스트 블록입니다. 단락 요소는 문단을 나누는 데 사용됩니다. 제목 요소(<h1> ~ <h6>)는 문서의 구조와 계층을 정의합니다. <h1>은 가장 중요한 제목을 나타내며, <h6>은 가장 덜 중요한 제목을 나타냅니다.
예제: 단락 요소와 제목 요소 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>단락 요소와 제목 요소</title>
</head>
<body>
<h1>이것은 제목 1입니다 (This is Heading 1)</h1>
<h2>이것은 제목 2입니다 (This is Heading 2)</h2>
<h3>이것은 제목 3입니다 (This is Heading 3)</h3>
<p>이것은 단락입니다. 단락 요소는 문단을 나타내며, 여러 문장을 포함할 수 있습니다. (This is a paragraph. The paragraph element represents a paragraph and can contain multiple sentences.)</p>
</body>
</html>
텍스트 강조 요소(Text Emphasis Elements): <strong>, <em>, <mark>
텍스트 강조 요소는 텍스트의 의미를 강조하거나 시각적으로 강조하는 데 사용됩니다. <strong>은 강한 중요성을 나타내고, <em>은 강조를 나타내며, <mark>는 하이라이트를 나타냅니다.
예제: 텍스트 강조 요소 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 강조 요소</title>
</head>
<body>
<p><strong>강조된 텍스트</strong>는 중요한 내용을 나타냅니다. (The <strong>strong</strong> element represents strong importance.)</p>
<p><em>이탤릭체 텍스트</em>는 강조를 나타냅니다. (The <em>em</em> element represents emphasis.)</p>
<p><mark>하이라이트된 텍스트</mark>는 주목할 만한 내용을 나타냅니다. (The <mark>mark</mark> element represents highlighted text.)</p>
</body>
</html>
인라인 텍스트 요소(Inline Text Elements): <span>, <br>, <wbr>
인라인 텍스트 요소는 텍스트의 특정 부분을 스타일링하거나 구조를 제공하는 데 사용됩니다. <span>은 별도의 의미가 없는 인라인 컨테이너이며, <br>은 줄 바꿈을, <wbr>은 단어 줄 바꿈 가능 지점을 나타냅니다.
예제: 인라인 텍스트 요소 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 텍스트 요소</title>
</head>
<body>
<p><span style="color: blue;">이 텍스트는 파란색으로 스타일링되었습니다.</span> (This text is styled in blue using <span>.)</p>
<p>이 문장은 줄 바꿈 <br> 요소를 포함합니다. (This sentence includes a line break using <br> element.)</p>
<p>긴단어<wbr>줄바꿈가능. (A longword<wbr>with possible break points.)</p>
</body>
</html>
목록 요소(List Elements): 순서 있는 목록(<ol>), 순서 없는 목록(<ul>), 정의 목록(<dl>)
목록 요소는 항목의 그룹을 나타내는 데 사용됩니다. 순서 있는 목록(<ol>)은 번호가 매겨진 목록을, 순서 없는 목록(<ul>)은 점으로 표시된 목록을, 정의 목록(<dl>)은 용어와 정의 쌍을 나타냅니다.
예제: 목록 요소 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록 요소</title>
</head>
<body>
<h2>순서 있는 목록 (Ordered List)</h2>
<ol>
<li>첫 번째 항목 (First item)</li>
<li>두 번째 항목 (Second item)</li>
<li>세 번째 항목 (Third item)</li>
</ol>
<h2>순서 없는 목록 (Unordered List)</h2>
<ul>
<li>첫 번째 항목 (First item)</li>
<li>두 번째 항목 (Second item)</li>
<li>세 번째 항목 (Third item)</li>
</ul>
<h2>정의 목록 (Definition List)</h2>
<dl>
<dt>HTML</dt>
<dd>하이퍼텍스트 마크업 언어 (HyperText Markup Language)</dd>
<dt>CSS</dt>
<dd>캐스케이딩 스타일 시트 (Cascading Style Sheets)</dd>
</dl>
</body>
</html>
HTML5의 텍스트 요소를 적절히 활용하면 웹 문서의 구조와 가독성을 높일 수 있습니다. 각 요소는 특정한 목적을 가지고 있으며, 문서의 의미와 사용자 경험을 향상시키는 데 중요한 역할을 합니다.