pre element - by. UXKM
- Publishing
- HTML
- 콘텐츠 그룹화(Grouping content)
- pre element
요약 설명
<pre>
요소는 사전 서식(preformatted text)을 유지하여 텍스트를 표시하는 시맨틱 태그로, 공백, 줄바꿈, 들여쓰기 등 작성된 그대로의 형식을 반영하여 출력됩니다.
코드 블록, ASCII 아트, 시 구조 등 형식을 유지해야 하는 콘텐츠에 적합하며, 내부 텍스트는 기본적으로 고정폭 글꼴로 렌더링됩니다. HTML에서 자동 줄바꿈이 적용되지 않고, 작성된 그대로의 레이아웃을 보여주고자 할 때 사용됩니다.
주요 역할 및 특징
-
공백과 줄바꿈 유지
-
<pre>
는 입력된 텍스트의 공백과 줄바꿈을 그대로 렌더링합니다. -
일반 HTML에서는 공백이 하나로 처리되지만,
<pre>
는 공백과 줄바꿈을 중요한 요소로 간주합니다.
-
-
고정폭 글꼴 사용
-
<pre>
는 브라우저에서 기본적으로 고정폭 글꼴(예: Courier, Monospace)로 렌더링됩니다. - 코드나 데이터 출력처럼 공백이 중요한 콘텐츠에 적합합니다.
-
-
내부 콘텐츠 포함 가능
<pre>
내부에는 텍스트와 함께<code>
,<kbd>
,<span>
같은 인라인 요소를 포함할 수 있지만, 블록 요소는 포함할 수 없습니다. -
주요 사용 사례
코드 블록, 텍스트 파일 출력, ASCII 아트 등 공백과 줄바꿈이 중요한 콘텐츠.
CSS 기본 값
<pre>
요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.
기본 문법
속성
<pre>
요소는 고유 속성을 가지지 않으며,
글로벌 속성(class
, id
, style
, aria-*
, data-*
등)만 사용할 수 있습니다.
예제
코드 블록
HTML 코드 표시
ASCII 아트 예시
접근성을 고려한 코드 블록
주의사항
-
<pre>
는 기본적으로white-space: pre
스타일을 사용하므로 텍스트가 길 경우 줄바꿈이 자동으로 되지 않습니다.overflow-x: auto
와 같은 CSS를 사용해 긴 텍스트를 스크롤 가능하도록 설정하세요. -
<
,>
와 같은 특수 문자를 표현하려면 반드시 HTML 엔티티(<
,>
)를 사용해야 합니다. 그렇지 않으면 브라우저에서 태그로 인식할 수 있습니다.