HTML 텍스트 태그 <p>, <br>, <hr> 이해와 실전 사용
HTML에서는 텍스트를 구성하고 구분하는 다양한 태그가 존재합니다. 그 중에서도 <p>, <br>, <hr> 태그는 문서를 읽기 쉽고 구조적으로 잘 정리하는 데 중요한 역할을 합니다. 이 글에서는 각 태그의 기본 개념과 사용법을 살펴보고, 실전에서 어떻게 활용할 수 있는지 알아보겠습니다.
1. <p> 태그: 단락 구분하기
<p> 태그는 HTML 문서에서 단락을 나타내는 데 사용됩니다. 단락은 문장의 집합으로, 문서의 논리적인 구조를 형성합니다. <p> 태그를 사용하면 텍스트를 쉽게 구분하고 가독성을 높일 수 있습니다.
<p>이것은 첫 번째 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>
2. <br> 태그: 줄 바꿈 삽입하기
<br> 태그는 줄 바꿈을 삽입할 때 사용됩니다. 이 태그는 종료 태그가 없으며, 문서 내에서 강제적으로 줄 바꿈을 할 때 유용합니다.
첫 번째 줄입니다.<br>두 번째 줄입니다.
3. <hr> 태그: 수평선 삽입하기
<hr> 태그는 문서 내에 수평선을 삽입할 때 사용됩니다. 수평선은 내용을 구분하거나 시각적으로 분리하는 데 도움을 줍니다. <hr> 태그 역시 종료 태그가 없습니다.
<p>위의 내용입니다.</p>
<hr>
<p>아래의 내용입니다.</p>
4. 실전 예제
이제 <p>, <br>, <hr> 태그를 사용하여 실제로 문서를 구성해보겠습니다. 다음 예제는 여러 단락과 줄 바꿈, 수평선을 포함한 HTML 문서의 일부분입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실전 예제</title>
</head>
<body>
<p>여기는 첫 번째 단락입니다.</p>
<p>여기는 두 번째 단락입니다. 여기서 줄 바꿈을 합니다.<br>두 번째 줄입니다.</p>
<hr>
<p>여기는 수평선 아래의 단락입니다.</p>
</body>
</html>
5. 결론
<p>, <br>, <hr> 태그는 HTML 문서에서 텍스트를 구성하고 구조화하는 데 매우 유용한 도구입니다. 각 태그의 기본 사용법을 이해하고 적절히 활용하면, 보다 읽기 쉽고 정리된 웹 페이지를 만들 수 있습니다. 이 글에서 소개한 내용을 바탕으로 HTML 문서를 작성해 보세요.
'마크업 언어 > HTML' 카테고리의 다른 글
| HTML <blockquote> 태그로 웹 페이지 인용문 표현하기 (0) | 2024.07.24 |
|---|---|
| HTML <pre> 태그, 코드와 서식 있는 텍스트 표시하기 (0) | 2024.07.23 |
| HTML 헤딩 태그 <h1>부터 <h6>까지, 웹 페이지 제목과 섹션 구성하기 (0) | 2024.07.21 |
| HTML <main> 태그로 주요 콘텐츠 섹션 구성하기 (0) | 2024.07.20 |
| HTML <footer> 태그로 웹 페이지 마무리하기 (0) | 2024.07.18 |
