<pre> 태그의 정의 및 사용법

<pre> 태그는 작성한 서식을 유지한 텍스트 블록을 나타낼때 사용합니다.
즉, 이 태그를 사용하면 들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 브라우저에 표시됩니다.

이 태그는 시, 코드 블록 등 원본 형식을 유지해야 하는 텍스트 블록에 사용됩니다.

예제

다음은 <pre> 태그의 사용 예제입니다.

시

시는 감정이나 분위기를 전달할 때 작가가 작성한 서식을 유지하는 것이 중요합니다.

HTML 
<pre>
    그대의 눈빛은
    별빛보다 밝고,
    나의 마음을
    비추네.
</pre>
실제 적용된 모습

<pre> 태그는 대부분의 브라우저에서 CSS white-space 속성의 값을 pre로 표현합니다.

코드 블록

코드 블록은 <pre> 태그의 사용이 가장 일반적이며, 서식 유지가 중요한 부분입니다.

HTML 
<pre><code>
    function greet(name) {
        console.log("Hello, " + name + "!");
    }
</code></pre>

코드 부연설명
<code> 태그는 컴퓨터 코드의 일부를 나타냅니다.

실제 적용된 모습

<pre> 태그는 대부분의 브라우저에서 기본적으로 CSS 글꼴(font-family 속성)이 고정폭(monospace) 글꼴로 텍스트를 표시합니다.

주의할 점

<pre> 태그가 작성한 서식을 유지한다고 해서,
HTML 코드로 인식하게 하여 코드로만 사용하도록 예약해 놓은 문자도 그대로 표시하지 않습니다.

  • <: HTML 태그의 시작을 나타내는 역할을 합니다.
  • >: HTML 태그의 끝을 나타내는 역할을 합니다.
  • &: HTML 엔티티를 시작하는 신호로 사용되며, 특수 문자를 나타내기 위해 함께 사용됩니다.
  • "": 쌍따옴표. HTML 속성 값의 시작과 끝을 나타내는 역할을 합니다.
  • '': 홑따옴표. HTML 속성 값의 시작과 끝을 나타내는 역할을 합니다.

이러한 예약된 문자는 특수 문자를 사용해야 합니다.

알아두세요! HTML 특수 문자는 HTML Entity, HTML Escape Sequence 또는 Character Entity라고도 불립니다. 다 동일한 개념을 가리키며, HTML 문서에서 특수 문자를 나타내는 데 사용되는 용어입니다.

HTML 특수 문자에 대한 주제는 HTML 특수 문자 사용법과 의의를 참조하세요.

예약된 문자를 특수 문자로 처리한 예제

HTML 
<pre><code>
let number = 5;

if (number &lt; 10 &amp;&amp; number &gt; 0) {
  console.log(&quot;한 자리 숫자입니다.&quot;); // 출력: 한 자리 숫자입니다.
}
</code></pre>
실제 적용된 모습

브라우저 호환성

pre 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<pre> 1 12 1 4

명세서

pre 태그의 명세서 사양
명세서 사양
<pre> HTML Standard
#he-pre-element

참고문헌

같이 보기