HTML pre 태그: 공백·줄바꿈 보존과 자동 줄바꿈 방법

HTML Reference

작성일 2024-09-09 최근 수정일 2026-10-30

HTML의 <pre>는 공백과 줄바꿈을 보존하는 서식 있는 텍스트 구역입니다. 코드에는 <code>를 함께 사용하고, 긴 줄을 화면 너비에 맞게 접으려면 CSS의 white-space: pre-wrap을 적용합니다.

pre와 일반 문단의 차이

일반 문단은 기본 CSS에서 연속 공백과 소스의 줄바꿈을 합쳐 표시합니다. pre는 기본적으로 그 간격을 유지하므로 들여쓰기가 있는 코드, 로그, 일정한 간격이 중요한 텍스트에 적합합니다. 기본 글꼴은 보통 고정폭이지만 글꼴과 공백 처리는 CSS로 바꿀 수 있습니다.

표 모양을 공백으로 정렬해 보여줄 수는 있어도 실제 표의 행·열 관계를 제공하지는 않습니다. 비교 데이터에는 table을 사용하고, ASCII 그림처럼 공간 배치로 의미를 전달할 때는 화면 낭독기로도 이해할 수 있는 설명을 함께 제공합니다.

전체 예제: 공백 보존과 긴 줄 처리

다음 문서를 pre-demo.html로 저장해 브라우저에서 엽니다. 파일은 UTF-8로 저장하며 외부 라이브러리는 필요하지 않습니다. 같은 긴 문자열에 가로 스크롤과 자동 줄바꿈을 각각 적용했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>pre 공백과 줄바꿈 비교</title>
  <style>
    body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
    pre { padding: 1rem; background: #eef2f4; }
    .scroll { overflow-x: auto; }
    .wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>공백과 줄바꿈</h1>
  <p>one    two
    three</p>
  <pre>one    two
    three</pre>
  <h2>가로 스크롤</h2>
  <pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>자동 줄바꿈</h2>
  <pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>HTML 소스 표시</h2>
  <pre class="scroll"><code>&lt;p&gt;Hello &amp; welcome&lt;/p&gt;</code></pre>
</body>
</html>

첫 문단은 기본 공백 처리에 따라 한 줄로 합쳐지고, 이어지는 pre는 one과 two 사이의 네 공백 및 three 앞의 네 공백을 보존합니다. 화면을 좁히면 scroll 예제에는 가로 스크롤이 생기고 wrap 예제는 긴 단어까지 다음 줄로 나뉩니다. HTML 소스 표시 구역에는 <p>Hello & welcome</p>가 태그 모양의 글자로 보입니다.

pre 안의 HTML도 해석됩니다

pre는 HTML 해석을 막는 요소가 아닙니다. 안에 실제 <strong> 태그를 쓰면 태그의 의미가 적용됩니다. HTML 소스를 글자로 표시하려면 <를 <로, &를 &로 이스케이프합니다. 위 전체 문서의 마지막 예제는 이 원칙을 사용합니다.

pre 시작 태그 바로 뒤의 첫 줄바꿈 하나는 HTML 파서가 제거합니다. 그 이후 줄바꿈과 코드에 적은 들여쓰기는 보존하므로, 문서 정렬을 위한 공백까지 화면에 생기지 않도록 실제 텍스트가 시작하는 위치를 확인하세요. 동적으로 코드를 표시할 때는 문자열을 innerHTML로 넣기보다 textContent로 넣어 태그로 해석되지 않게 처리할 수 있습니다.

자동 줄바꿈이 되지 않을 때 확인할 것

overflow-wrap만 지정하고 기본 white-space: pre를 유지하면 원하는 줄바꿈이 되지 않을 수 있습니다. 공백·줄바꿈은 보존하면서 화면 끝에서 접으려면 pre-wrap을 적용하고, 공백 없는 긴 문자열도 나누려면 overflow-wrap을 함께 지정합니다. 반대로 코드의 한 줄 구조를 유지해야 하면 pre를 유지한 채 overflow-x: auto로 내부 스크롤을 제공합니다.

pre는 텍스트의 배치를 보존하고 code는 그 내용이 코드임을 나타냅니다. 둘을 함께 사용해도 문법 색상이 자동으로 생기는 것은 아니며 하이라이터나 별도의 CSS가 필요합니다. 예전 width·wrap 속성에 의존하기보다 CSS로 표시를 조절하세요. 자세한 조건은 HTML 표준의 pre 정의와 MDN pre 문서를 참고합니다.

HTML Reference