<pre>

HTML <pre> 요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.

콘텐츠 카테고리 플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLPreElement

특성

이 요소는 전역 특성만 포함합니다.

예제

HTML

<p>CSS로 글자 색을 바꾸는건 쉽습니다.</p>
<pre>
body {
  color:red;
}
</pre> 

결과

접근성 고려사항

<pre> 요소로 만든 이미지나 도표에 대한 대체 설명을 지정하는 것이 중요합니다. 대체 설명은 분명하고 간결하게 이미지 또는 도표 콘텐츠를 설명해야 합니다.

시력이 낮은 사용자가 스크린 리더와 같은 보조 기술을 사용 중이라면, 미리 서식 적용한 텍스트의 문자를 차례대로 읽어서는 이게 무엇을 의미하는지 이해하지 못할 수 있습니다.

<figure><figcaption>에 더해 idARIA rolearia-labelledby 특성을 조합하면 <pre>를 마치 이미지처럼 표현하면서 <figcaption>을 대체 설명으로 사용할 수 있습니다.

예제

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

명세

명세 상태 주석
HTML Living Standard
The definition of '<pre>' in that specification.
Living Standard No significant change from HTML Living Standard
HTML5
The definition of '<pre>' in that specification.
Recommendation No significant change from HTML 4.01 Specification
HTML 4.01 Specification
The definition of '<dl>' in that specification.
Recommendation Deprecated the cols attribute

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
preChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
cols
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support 1 — 29IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support 4 — 29Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
width
DeprecatedNon-standard
Chrome Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
Edge Full support 12
Notes
Full support 12
Notes
Notes Specifying the width attribute has no layout effect.
Firefox Full support 1
Notes
Full support 1
Notes
Notes Since Firefox 29, specifying the width attribute has no layout effect.
IE Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
Opera Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
Safari Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
WebView Android Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
Chrome Android Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
Firefox Android Full support 4
Notes
Full support 4
Notes
Notes Since Firefox 29, specifying the width attribute has no layout effect.
Opera Android Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
Samsung Internet Android Full support Yes
Notes
Full support Yes
Notes
Notes Specifying the width attribute has no layout effect.
wrap
DeprecatedNon-standard
Chrome ? Edge No support NoFirefox Full support 1IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

같이 보기