HTML의 텍스트 요소는 웹 페이지에서 정보를 구성하고 전달하는 데 필수적인 부분입니다. 이번 포스팅에서는 HTML에서 텍스트를 다루는 주요 요소인 제목(`<h1>`~`<h6>`), 단락(`<p>`), 강조(`<strong>`, `<em>`) 태그에 대해 배워보겠습니다. 각 요소의 목적과 사용 방법을 이론으로 공부한 후, 실제 예제를 통해 실습해 보겠습니다.
이론: HTML 텍스트 요소
웹 페이지에 텍스트를 올바르게 구성하면 사용자들은 내용을 쉽게 이해할 수 있습니다. 구조적인 측면에서 HTML 텍스트 요소는 웹 페이지의 읽기 편의성을 증진하고, 검색 엔진 최적화(SEO)에도 도움을 줍니다.
1. 제목 요소 (<h1>~<h6>)
HTML에서 제목은 <h1>부터 <h6>까지 총 여섯 단계로 나뉩니다. <h1>은 가장 중요한 제목을 표시하며, <h6>은 가장 낮은 단계의 부제목을 나타냅니다. 일반적으로 <h1>은 페이지 당 하나만 사용되며, 페이지의 메인 제목으로 간주됩니다.
2. 단락 요소 (<p>)
단락 요소는 텍스트를 조직화하는 데 사용되며, <p> 태그로 표시됩니다. 한 줄이 아닌 여러 줄의 텍스트 또는 글의 하나의 아이디어에 사용됩니다. 단락 사이에는 자동으로 공간이 추가되어 텍스트가 구분되어 보이게 됩니다.
3. 강조 표시 (<strong>, <em>)
텍스트 내부에서 어떤 부분을 강조하고 싶을 때 사용합니다. <strong> 태그는 텍스트가 매우 중요하다는 것을 나타내며, 보통 굵게 표시됩니다. <em>(emphasize) 태그는 텍스트를 강조하며, 주로 이탤릭체로 표시됩니다. 두 태그는 모두 브라우저와 스크린 리더가 텍스트를 다른 방식으로 해석하게 해 주어 접근성이 향상됩니다.
실습: HTML 텍스트 요소 사용해 보기
이제 이론을 배웠으니, 실제로 HTML 텍스트 요소를 사용해 간단한 웹 페이지를 만들어보겠습니다.
1. 텍스트 에디터를 열고 다음의 HTML 구조를 따라서 작성해 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 텍스트 요소</title>
</head>
<body>
<h1>웹 페이지의 제목</h1>
<h2>부제목</h2>
<p>이것은 예시 단락입니다. 웹 페이지의 일반 텍스트가 여기에 위치하게 됩니다. 여러 구문으로 구성될 수 있으며, 의미 있는 정보 전달을 위해 사용됩니다.</p>
<p><strong>중요:</strong> 이 부분은 특히 중요한 정보를 포함하고 있으므로 <strong>강조</strong>를 사용하여 나타냅니다.</p>
<p>이 문장은 <em>강조하고 싶은 텍스트</em>를 포함하고 있습니다.</p>
</body>
</html>
2. 파일을 'text-elements.html'로 저장합니다.
3. 저장한 파일을 웹 브라우저로 열어보세요.
코드 설명
- <h1>은 페이지에서 가장 중요한 제목입니다. 일반적으로 페이지의 메인 제목으로 사용됩니다.
- <h2>는 부제목. <h3>, <h4>, <h5>, <h6> 태그와 함께 사용하여 내용 구조를 더 세분화할 수 있습니다.
- <p> 단락은 본문의 텍스트를 나타냅니다. 텍스트 블록을 구성하고, 주변 다른 단락과 구별됩니다.
- <strong>은 특정 텍스트를 강조하며, 의미상 중요도를 나타냅니다. 대부분의 브라우저는 굵은 글씨로 표시합니다.
- <em>은 텍스트를 강조할 때 사용하지만, <strong>보다는 강한 강조가 아니라는 점이 다릅니다. 대부분의 브라우저는 이탤릭체로 표시합니다.
마무리
이제 HTML 문서에서 텍스트를 다루는 다양한 요소와 그 사용법을 알게 되셨습니다. 배운 내용을 바탕으로 자유롭게 실습하면서 여러분의 웹 페이지에 적용해 보세요.
이러한 기본 요소들을 이해하는 것은 웹 페이지의 내용을 효과적으로 전달하는 밑거름이 됩니다. 다음 포스팅에서는 목록, 링크, 이미지와 같은 다른 HTML 요소들에 대해서 배워보겠습니다.
즐거운 HTML 학습 시간 되세요!