p element - by. UXKM

요약 설명

<p> 요소는 단락(paragraph)을 나타내는 시맨틱 태그로, 하나의 주제나 생각을 표현하는 문장의 집합을 의미합니다.
주로 본문 텍스트를 구성할 때 사용되며, 브라우저는 <p> 요소를 기준으로 자동 줄바꿈과 여백을 적용합니다. 또한, 텍스트를 논리적으로 그룹화하여 문서의 가독성을 높이고, 자연스러운 텍스트 흐름을 형성하는 데 중요한 역할을 합니다.

주요 역할 및 특징

  1. 단락 표현
    • <p> 요소는 텍스트를 단락으로 구분하여 문서를 체계적으로 구성합니다.
    • 일반적으로 문장이나 문장 그룹을 포함합니다.
  2. 텍스트 콘텐츠의 기본 구성 요소
    • 문서에서 가장 기본적인 텍스트 블록으로 사용됩니다.
    • 여러 단락으로 구성된 글에서 각 단락을 구분하는 데 적합합니다.
  3. 의미론적 태그
    • 텍스트를 의미론적으로 그룹화하여 브라우저와 검색 엔진이 콘텐츠 구조를 이해하도록 돕습니다.
    • 스타일링 목적으로만 사용하지 말고, 문맥적으로 단락에 적합한 곳에만 사용해야 합니다.
  4. 기타 요소와의 관계

    보통 헤딩 요소(<h1~h6>), 목록 요소(<ul>, <ol>, <li>), 링크 요소(<a>) 등과 함께 사용됩니다.

  5. 내부 요소 사용 제한

    중요합니다!

    • <p> 요소는 블록 레벨 요소이지만, 그 안에 다른 블록 레벨 요소(예: <div>, <header>, <footer>, <section> 등)를 포함할 수 없습니다.
    • <p> 요소 내에는 인라인 요소(예: <a>, <span>, <b>, <strong> 등)만 포함하는 것이 규칙입니다.

CSS 기본 값

<p> 요소는 기본적으로 블록 레벨 요소로, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

<p> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

기본 단락 사용

강조와 링크가 포함된 단락

접근성을 고려한 단락

aria-live 속성을 추가하여 이 단락의 콘텐츠가 변경될 때 스크린 리더가 알림을 제공합니다. 동적으로 업데이트되는 텍스트에 적합합니다.

주의사항

<p> 요소는 블록 레벨 요소이지만, 가장 기본적인 텍스트 블록으로 문단을 구분하는 데 사용되어야 하며, 페이지의 구조적 레이아웃을 위한 용도로 사용해서는 안 됩니다.
따라서 전체 레이아웃을 구성하는 용도로는 적합하지 않으며, 구조적 의미를 가지는 다른 요소들(예: <div>, <section>, <article> 등)을 사용해야 합니다.