HTML <pre>: 사전 형식 지정 텍스트 요소

ALATTA

HTML <pre>: 사전 형식 지정 텍스트 요소

HTML <pre> 요소는 HTML 파일에 작성한 형태 그대로 나타내야 하는 사전 형식 지정 텍스트를 나타냅니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하는데, 요소 내의 공백 문자도 그대로 유지합니다.

figure {
  margin: 0;
}

<figure>
  <pre>
앵무 ※ 두 마리
       두 마리
     ※ 앵무는 포유류에 속하느니라.

내가 이필을 아아는 것은 내가 이필을 아알지 못하는 것이니라. 물론 나는 희망할 것이니라.
앵무	   두 마리
  </pre>
  <figcaption>《오감도 시제6호》에서 발췌, 이상</figcaption>
</figure>

불러오는 중...

특성

전역 특성만 포함합니다.

접근성

사전 형식 지정 텍스트를 사용한 이미지 또는 도표에 대해서는, 그 내용에 대해 간결하고 분명하게 대체 설명을 지정해야 합니다.

저시력 사용자가 스크린 리더와 같은 보조 기술을 사용해 탐색 중이라면, 사전 형식 지정 텍스트를 한 글자씩 읽어서는 이게 무엇을 의미하는 것인지 이해하지 못할 수도 있습니다.

<figure>와 <figcaption> 요소를 조합하고, id 특성과 ARIA role, aria-labelledby 특성으로 보충하면 스크린 리더가 <pre>를 이미지처럼 표현하도록 지정할 수 있습니다.

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  _______________________
< 나는 이 분야의 전문가다 >
  -----------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 사전 형식 지정 텍스트로 그려져있습니다.
  </figcaption>
</figure>

불러오는 중...

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
pre
width
wrap