HTML pre 태그 — 입력한 그대로 보여주기 완전 정리

 

 

Web Development · HTML Text

HTML <pre> 태그 —
입력한 그대로 보여주기 완전 정리

공백·줄바꿈을 그대로 살리는 유일한 태그 · 코드 블록 표시의 표준

시작 오늘 분석할 코드

JavaScript 함수 코드를 페이지에 그대로 보여주려는 코드다. 핵심은 <pre> — 일반 태그였다면 한 줄로 합쳐졌을 코드가 들여쓰기와 줄바꿈을 그대로 유지한다.

<h3>로컬 스토리지(Local Storage)를 저장하는 함수 :</h3> <pre> function savetheLocal(){ var second = document.getElementById("second"); var thevalue = second.value; localStorage.setItem(1, thevalue); gettheLocal(); } </pre>

실제 출력 결과

로컬 스토리지(Local Storage)를 저장하는 함수 :

     function savetheLocal(){
          var second = document.getElementById("second");
          var thevalue = second.value;
          localStorage.setItem(1, thevalue);
          gettheLocal();
     }

용어 용어 정리

prePreformatted — 입력 그대로 표시

공백 보존스페이스·탭·개행을 모두 살림

고정폭 글꼴기본적으로 monospace 폰트

code인라인 코드 — pre와 자주 함께

---

1 일반 태그는 공백을 어떻게 처리하는가?

HTML의 기본 동작은 "여러 개 공백·줄바꿈을 모두 1개 공백으로 합친다"이다. 글을 쓰는 사람이 어떻게 띄어쓰든 화면에서는 깔끔하게 정리해주려는 의도다.

<p>에 코드 넣으면

function savetheLocal(){ var second = document.getElementById("second"); var thevalue = second.value; ... }

<pre>에 코드 넣으면

function savetheLocal(){ var second = document.getElementById("second"); var thevalue = second.value; ... }

코드를 보여줄 때 줄바꿈과 들여쓰기가 사라지면 가독성이 망가진다. 이때 등장하는 게 <pre>다.

---

2 <pre>의 두 가지 특징

특징	설명
공백/개행 보존	입력한 그대로 화면에 표시 (white-space: pre)
고정폭 폰트	모든 글자 너비가 같아서 정렬이 어긋나지 않음 (monospace)

※ pre는 단순히 줄을 살리는 것뿐 아니라 글꼴까지 자동으로 monospace로 바꿔준다. 그래서 코드를 보여주는 데 적합하다.

---

3 <pre> vs <code> — 헷갈리는 두 태그

둘 다 코드와 관련 있어 보이지만 역할이 다르다. 실무에서는 함께 쓰는 게 표준이다.

<pre> — 블록

여러 줄 코드 블록
공백·개행 보존
화면 한 줄 차지
고정폭 폰트 자동

<code> — 인라인

한 줄 안 코드 표시
공백 보존 안 함
문장 안에 삽입
고정폭 폰트 자동

<!-- 권장 패턴: 둘을 결합 --> <pre><code> function hello() { console.log("Hello"); } </code></pre> <!-- 인라인 코드 --> <p>변수는 <code>let</code> 키워드로 선언합니다.</p>

---

4 <pre>의 흔한 함정 — < 와 >

<pre> 안에서도 HTML 태그 문법은 여전히 해석된다. 코드에 <나 >가 들어가면 진짜 태그로 인식되어 사라지거나 깨진다.

예: <pre>if (x < 5) { ... }</pre>
→ 브라우저는 < 5)를 태그로 해석하려다 망가뜨림

해결: HTML 엔티티 사용

실제 문자	HTML 엔티티	의미
<	&lt;	less than
>	&gt;	greater than
&	&amp;	ampersand
"	&quot;	quote
(공백 유지)	&nbsp;	non-breaking space

※ 코드 블록을 자주 다루는 사이트는 Prism.js·highlight.js 같은 라이브러리로 자동 처리. 직접 적을 때만 엔티티 신경 쓰면 된다.

---

반응형

5 CSS로 white-space 흉내 내기

사실 <pre>의 동작은 CSS 속성 white-space: pre;가 자동으로 적용된 것이다. 그래서 일반 <div>에도 같은 스타일을 주면 비슷하게 동작한다.

white-space 값	공백	개행	자동 줄바꿈
normal (기본)	합침	합침	O
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	합침	보존	O
nowrap	합침	합침	X

※ <pre>는 기본 white-space: pre라서 가로로 길어지면 잘려 보인다. 모바일·좁은 화면에서 코드 블록이 줄바꿈되게 하려면 pre-wrap으로 바꾸는 게 좋다.

---

6 자주 하는 실수

실수	증상	해결
코드 안에 <, > 그대로	태그로 해석돼 깨짐	&lt; &gt; 엔티티
들여쓰기를 너무 많이	왼쪽 여백이 어색	들여쓰기는 코드 자체에만
모바일에서 가로 스크롤	코드 잘려 보임	white-space: pre-wrap
일반 글에 pre 사용	고정폭 폰트로 보여 어색	본문은 p로
code만 사용 (블록 코드)	줄바꿈 사라짐	pre + code 조합

---

핵심 한 줄 요약

<pre>입력한 공백·줄바꿈 그대로 보존

기본 폰트monospace (고정폭) 자동 적용

<code>인라인 코드 — pre와 함께 권장

&lt; &gt;코드 안 부등호는 엔티티로

white-spaceCSS 속성으로 동일 효과 가능

pre-wrap모바일 대응 — 자동 줄바꿈

Tags

#pre #HTML #공백보존 #코드블록 #monospace #웹개발 #텍스트태그 #코드표시 #whitespace #h3 #HTML엔티티 #티스토리

▼ 티스토리 태그 입력란 복사용

pre, HTML, 공백보존, 코드블록, monospace, 웹개발, 텍스트태그, 코드표시, whitespace, h3, HTML엔티티, 티스토리