A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/pre below:

<pre>: 미리 서식 ì •ì˜ëœ 텍스트 요소 - HTML: Hypertext Markup Language

<pre>: 미리 서식 정의된 텍스트 요소

Baseline Widely available

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

시도해 보기 
<pre>
  L          TE
    A       A
      C    V
       R A
       DOU
       LOU
      REUSE
      QUE TU
      PORTES
    ET QUI T'
    ORNE O CI
     VILISÉ
    OTE-  TU VEUX
     LA    BIEN
    SI      RESPI
            RER       - Apollinaire
</pre>

pre {
  font-size: 0.7rem;
  margin: 0;
}

<pre> 태그 안에서 <, >, &, " 와 같은 예약 문자를 표시하려면, 각각의 HTML 개체를 사용해 이스케이프해야 합니다.

특성

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

cols 비표준 지원이 중단되었습니다

행에 포함되어야 하는 기본 문자 갯수입니다. width의 비표준 동의어였습니다. 이러한 효과를 얻으려면 대신 CSS width를 사용하십시오.

width 지원이 중단되었습니다 비표준

행에 포함되어야 하는 기본 문자 갯수입니다. 기술적으로는 여전히 구현되어 있으나, 이 특성은 시각적 효과가 없습니다. 이러한 효과를 얻으려면 대신 CSS width를 사용하십시오.

wrap 비표준 지원이 중단되었습니다

오버플로가 어떤 식으로 발생해야 하는지 나타내는 힌트입니다. 최신 브라우저에서 이 힌트는 무시되어 시각적 효과가 나타나지 않습니다. 이러한 효과를 얻으려면 대신 CSS white-space를 사용하십시오.

접근성 고려사항

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

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

<figure>과 <figcaption>에 더해, ARIA role과 aria-label 특성을 조합하면 <pre>와 사용하면, 미리 서식 지정된 ASCII 아트를 마치 이미지처럼 표현하면서 <figcaption>을 대체 설명으로 사용할 수 있습니다.

예제 
<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt;     나는 이 분야의 전문가다.     &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을
    적용한 텍스트로 그려져있습니다.
  </figcaption>
</figure>
예제 기초 예제 HTML 
<p>CSS로 글자 색을 바꾸는건 쉽습니다.</p>
<pre>
body {
  color:red;
}
</pre>
결과 예약 문자 이스케이프 HTML 
<pre>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;한 자리 숫자&quot;
</pre>
결과 기술 요약 명세 브라우저 호환성 같이 보기

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4