From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/html/element/pre/index.html | 150 +++++++++++++++++++++++++++++++ 1 file changed, 150 insertions(+) create mode 100644 files/ko/web/html/element/pre/index.html (limited to 'files/ko/web/html/element/pre') diff --git a/files/ko/web/html/element/pre/index.html b/files/ko/web/html/element/pre/index.html new file mode 100644 index 0000000000..9cc0ef51ca --- /dev/null +++ b/files/ko/web/html/element/pre/index.html @@ -0,0 +1,150 @@ +--- +title: 
+slug: Web/HTML/Element/pre
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - 'HTML:Flow content'
+  - Reference
+  - Web
+translation_of: Web/HTML/Element/pre
+---
+
{{HTMLRef}}

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

+
+
{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}

+
+
+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
콘텐츠 카테고리플로우 콘텐츠, 뚜렷한 콘텐츠.
가능한 콘텐츠구문 콘텐츠.
태그 생략{{no_tag_omission}}
가능한 부모 요소플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할모두
DOM 인터페이스{{domxref("HTMLPreElement")}}

+
+
특성

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

+
+
+
+
예제

+
+
HTML

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

+
+
결과

+
+
{{EmbedLiveSample("예제")}}

+
+
접근성 고려사항

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

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

+
+
{{htmlelement("figure")}}과 {{htmlelement("figcaption")}}에 더해 {{htmlattrxref("id")}}와 ARIA role과 aria-labelledby 특성을 조합하면 <pre>를 마치 이미지처럼 표현하면서 <figcaption>을 대체 설명으로 사용할 수 있습니다.

+
+
예제

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

+
+
+
+
명세

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
명세상태주석
{{SpecName('HTML WHATWG', 'grouping-content.html#the-pre-element', '<pre>')}}{{Spec2('HTML WHATWG')}}No significant change from {{SpecName("HTML WHATWG")}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}{{Spec2('HTML5 W3C')}}No significant change from {{SpecName("HTML4.01")}}
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<dl>')}}{{Spec2('HTML4.01')}}Deprecated the cols attribute

+
+
브라우저 호환성

+
+
{{Compat("html.elements.pre")}}

+
+
같이 보기

+
+
-- 
cgit v1.2.3-54-g00ecf