HTML 단락 태그 <p>, 기본 사용법부터 고급 활용법까지

HTML 단락 태그 <p>, 기본 사용법부터 고급 활용법까지

HTML에서 <p> 태그는 가장 기본적인 요소 중 하나로, 웹 문서에서 텍스트를 구조화하는 데 사용됩니다. 단순히 문장을 나열하는 것 이상으로, 가독성을 높이고 스타일을 적용하는 다양한 방법이 존재합니다. 이 가이드에서는 <p> 태그의 기본 사용법부터 고급 활용법까지 체계적으로 살펴보겠습니다.

 

 

목차

1. HTML <p> 태그란?
2. 기본 사용법과 예제
3. 단락 구분: <p> vs. <br>
4. CSS를 활용한 단락 스타일링
5. 웹 접근성과 시맨틱한 의미
6. 고급 활용법: 줄 간격 조정 및 정렬
7. 자주 하는 실수와 해결 방법

 

1. HTML <p> 태그란?

<p> 태그는 "Paragraph(단락)"의 약자로, 텍스트를 의미론적으로 그룹화하는 데 사용됩니다. 하나의 <p> 태그 안에 여러 문장이 포함될 수 있으며, 브라우저는 기본적으로 단락 간 여백을 자동으로 적용합니다.

<p>이것은 하나의 단락입니다.</p>
<p>이것은 또 다른 단락입니다.</p>

 

 

 

2. 기본 사용법과 예제

<p> 태그를 사용할 때 기본적인 규칙은 다음과 같습니다.

• 각 단락은 별도의 <p> 태그로 감싼다.
• 단락 내부에는 텍스트와 인라인 요소(예: <strong>, <em>)를 포함할 수 있다.
• 블록 요소(예: <div>, <table>)는 포함할 수 없다.

예제: 텍스트 강조와 함께 사용하기

<p>이 문장은 <strong>강조</strong>되었습니다.</p>
<p>이 문장은 <em>기울여</em> 표시됩니다.</p>

 

 

 

3. 단락 구분: <p> vs. <br>

<p> 태그와 <br> 태그의 차이를 알아봅시다.

특징	<p> 태그	<br> 태그
역할	단락을 생성	한 줄 띄우기
사용 방법	한 문단을 만들 때	짧은 줄 바꿈이 필요할 때

 

 

 

4. CSS를 활용한 단락 스타일링

<p> 태그는 기본적으로 여백을 포함하지만, CSS를 이용해 스타일을 변경할 수 있습니다.

1) 폰트 스타일 변경

<p style="font-size: 18px; color: blue;">이 문장은 파란색이며 글자 크기가 큽니다.</p>

2) 줄 간격 조정

<p style="line-height: 1.8;">이 문장은 줄 간격이 넓어 가독성이 향상되었습니다.</p>

 

 

 

 

5. 웹 접근성과 시맨틱한 의미

HTML 문서에서 올바른 시맨틱 태그를 사용하는 것은 접근성과 SEO에 중요한 영향을 줍니다.

• 스크린 리더: <p> 태그는 스크린 리더가 텍스트를 자연스럽게 읽도록 돕습니다.
• SEO: 검색 엔진은 <p> 태그를 사용한 콘텐츠를 더 가치 있는 텍스트로 간주합니다.

 

 

 

6. 고급 활용법: 줄 간격 조정 및 정렬

단락을 더 세밀하게 조정하려면 CSS를 활용할 수 있습니다.

1) 텍스트 정렬

<p style="text-align: center;">이 문장은 가운데 정렬됩니다.</p>

2) 배경색 적용

<p style="background-color: yellow; padding: 10px;">이 문장은 배경색이 노란색입니다.</p>

 

 

 

7. 자주 하는 실수와 해결 방법

<p> 태그를 사용할 때 흔히 발생하는 실수는 다음과 같습니다.

• <p> 태그 중첩: 단락 태그는 중첩될 수 없습니다.
• 블록 요소 포함: <p> 내부에 <div> 같은 블록 요소를 넣으면 예상치 못한 동작이 발생할 수 있습니다.

<p>
    올바른 사용법입니다.
</p>

<p>
    <div>이것은 잘못된 사용법입니다.</div>
</p>