HTML 코드, 왜 줄바꿈이 안 돼? 내가 적은 그대로 보이게 하려면 pre 코드

콘텐츠 목차

HTML에서 줄바꿈과 공백 유지하기 – pre 태그 완전 이해하기

HTML로 글을 쓰다 보면 이런 상황을 자주 만나게 됩니다.
“띄어쓰기를 여러 번 했는데 한 칸만 보여요!”
“엔터를 쳤는데 왜 줄바꿈이 안 되죠?”

이런 문제를 해결해주는 태그가 바로 pre 태그입니다.
이번 포스팅에서는 pre 태그의 원리부터 다양한 예제까지 초보자도 쉽게 이해할 수 있도록 설명해드립니다.

HTML에서는 기본적으로 여러 칸 띄어쓰기를 하면 브라우저가 한 칸으로 줄입니다.
그리고 엔터를 눌러도 줄바꿈이 안 됩니다.

예를 들어 아래처럼 입력했다고 해도:

HTML 코드


안녕하세요     저는 비버입니다.
HTML 공부 중입니다.

렌더링 결과

안녕하세요 저는 비버입니다. HTML 공부 중입니다.

띄어쓰기는 한 칸만 남고, 줄바꿈은 무시됩니다.
이게 HTML의 기본 동작이기 때문입니다.

이럴 때 사용하는 게 pre 태그입니다.
<pre>는 “이 안에 있는 내용은 있는 그대로 출력해 주세요” 라는 뜻입니다.

HTML 코드

<pre>
안녕하세요     저는 비버입니다.
HTML 공부 중입니다.
</pre>

렌더링 결과

안녕하세요     저는 비버입니다.
HTML 공부 중입니다.

띄어쓰기, 줄바꿈까지 모두 유지됩니다!

1. 코드 예제 보여주기
HTML 코드
```
<pre>
<h1>제목입니다</h1>
<p>문단입니다</p>
</pre>
```
렌더링 결과
```
제목입니다
문단입니다
      
```
코드 예제를 보여줄 때 pre 태그를 쓰면 줄바꿈까지 유지되어 보기 좋습니다.
2. ASCII 아트
HTML 코드
```
<pre>
(\__/)
(•ㅅ•)
 / 　 づ
</pre>
```
렌더링 결과
```
(\__/)
(•ㅅ•)
 / 　 づ
      
```
이렇게 그림 문자(ASCII Art)를 출력할 때도 유용합니다.

3. 로그 파일 출력

HTML 코드

<pre>
[INFO] 서버가 시작되었습니다.
[ERROR] 파일을 찾을 수 없습니다.
</pre>

렌더링 결과

[INFO] 서버가 시작되었습니다.
[ERROR] 파일을 찾을 수 없습니다.

로그 데이터를 그대로 보여줄 때도 pre 태그가 적합합니다.

pre + code를 같이 쓰면 더욱 좋습니다.
<pre>는 형태 유지, <code>는 이 부분은 코드입니다 라는 의미까지 부여합니다.

HTML 코드

<pre><code>
console.log('Hello World!')
</code></pre>

렌더링 결과

console.log('Hello World!')

검색엔진에도 코드임을 알려줄 수 있어서 블로그나 기술문서에 자주 사용됩니다.

✔️ 핵심 요약

🔧 추가 설명

pre 태그는 입력한 그대로 출력해 주는 HTML 태그입니다.
공백, 줄바꿈, 탭까지 모두 보존하기 때문에 코드 예제, 로그 출력, ASCII 아트 등에 유용합니다.
검색엔진에도 코드임을 잘 전달하고 싶다면 pre + code 조합을 추천합니다.

추가로 pre는 꼭 코드에만 쓰는 게 아닙니다.
양식 그대로 보여주고 싶을 때도 pre를 쓰면 됩니다.

다음 포스팅에서는 blockquote 태그를 다뤄보겠습니다.