pre element - by. UXKM

  • Publishing
  • HTML
  • 콘텐츠 그룹화(Grouping content)
  • pre element
요약 설명

<pre> 요소는 사전 서식(preformatted text)을 유지하여 텍스트를 표시하는 시맨틱 태그로, 공백, 줄바꿈, 들여쓰기 등 작성된 그대로의 형식을 반영하여 출력됩니다.
코드 블록, ASCII 아트, 시 구조 등 형식을 유지해야 하는 콘텐츠에 적합하며, 내부 텍스트는 기본적으로 고정폭 글꼴로 렌더링됩니다. HTML에서 자동 줄바꿈이 적용되지 않고, 작성된 그대로의 레이아웃을 보여주고자 할 때 사용됩니다.

주요 역할 및 특징

  1. 공백과 줄바꿈 유지
    • <pre>는 입력된 텍스트의 공백과 줄바꿈을 그대로 렌더링합니다.
    • 일반 HTML에서는 공백이 하나로 처리되지만, <pre>는 공백과 줄바꿈을 중요한 요소로 간주합니다.
  2. 고정폭 글꼴 사용
    • <pre>는 브라우저에서 기본적으로 고정폭 글꼴(예: Courier, Monospace)로 렌더링됩니다.
    • 코드나 데이터 출력처럼 공백이 중요한 콘텐츠에 적합합니다.
  3. 내부 콘텐츠 포함 가능

    <pre> 내부에는 텍스트와 함께 <code>, <kbd>, <span> 같은 인라인 요소를 포함할 수 있지만, 블록 요소는 포함할 수 없습니다.

  4. 주요 사용 사례

    코드 블록, 텍스트 파일 출력, ASCII 아트 등 공백과 줄바꿈이 중요한 콘텐츠.

CSS 기본 값

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

기본 문법

속성

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

예제

기본 서식 지정 텍스트

코드 블록

HTML 코드 표시

ASCII 아트 예시

접근성을 고려한 코드 블록

주의사항

  • <pre>는 기본적으로 white-space: pre 스타일을 사용하므로 텍스트가 길 경우 줄바꿈이 자동으로 되지 않습니다. overflow-x: auto와 같은 CSS를 사용해 긴 텍스트를 스크롤 가능하도록 설정하세요.
  • <, >와 같은 특수 문자를 표현하려면 반드시 HTML 엔티티(&lt;, &gt;)를 사용해야 합니다. 그렇지 않으면 브라우저에서 태그로 인식할 수 있습니다.