HTML5 P 태그 사용법

1. P 태그란?

P 태그는 HTML 문서에서 단락(paragraph)을 정의하는 태그입니다. 텍스트 콘텐츠를 논리적인 단위로 구분하고, 브라우저는 각 단락 사이에 자동으로 여백을 추가합니다.

2. 기본 구조

<p>이것은 첫 번째 단락입니다.</p>

<p>이것은 두 번째 단락입니다.</p>

<p>
    이것은 여러 줄로 구성된
    단락입니다. HTML에서는
    줄바꿈이 자동으로 처리됩니다.
</p>

3. 자주 사용되는 속성

4. 실제 사용 예제

<article>
    <h1>웹 개발의 기초</h1>
    
    <p class="intro">
        웹 개발은 현대 디지털 시대에서 가장 중요한 기술 중 하나입니다.
        HTML, CSS, JavaScript를 기반으로 하는 웹 개발은 다양한 분야에서
        활용되고 있습니다.
    </p>
    
    <p>
        HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
        CSS는 웹 페이지의 스타일을 지정하고, JavaScript는 동적인
        기능을 구현합니다.
    </p>
    
    <p class="note">
        <strong>참고:</strong>
        웹 개발을 시작하기 전에 기본적인 HTML 구조를 이해하는 것이
        중요합니다.
    </p>
    
    <p>
        웹 개발을 배우는 가장 좋은 방법은 실제 프로젝트를 통해
        경험을 쌓는 것입니다. 작은 프로젝트부터 시작하여 점진적으로
        복잡한 프로젝트로 발전시켜 나가세요.
    </p>
</article>

5. 스타일링 예제

<style>
    p {
        margin-bottom: 1em;
        line-height: 1.6;
    }
    
    .intro {
        font-size: 1.2em;
        color: #333;
        font-weight: 500;
    }
    
    .note {
        background-color: #fff3cd;
        padding: 15px;
        border-radius: 4px;
        border-left: 4px solid #ffc107;
    }
    
    article p:first-of-type {
        margin-top: 2em;
    }
    
    article p:last-of-type {
        margin-bottom: 2em;
    }
    
    /* 반응형 디자인 */
    @media (max-width: 768px) {
        p {
            font-size: 0.95em;
        }
        
        .intro {
            font-size: 1.1em;
        }
    }
</style>

6. 성능 최적화 팁

• 불필요한 p 태그 중첩을 피합니다.
• 적절한 단락 구분을 사용합니다.
• CSS 선택자를 효율적으로 사용합니다.
• 텍스트 콘텐츠는 의미있게 구조화합니다.
• 접근성을 고려한 마크업을 사용합니다.

7. 검증 및 테스트

P 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 단락 구조 검토
• 다양한 브라우저에서 테스트
• 반응형 디자인 테스트
• 접근성 검사 도구 사용