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>
불러오는 중...
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
pre | |||||||
width |