<br> 태그와 대안, HTML에서 줄바꿈을 구현하는 다양한 방법

<br> 태그와 대안, HTML에서 줄바꿈을 구현하는 다양한 방법

HTML 문서에서 줄을 바꾸는 방법은 단순히 <br> 태그를 사용하는 것만으로는 충분하지 않을 수 있습니다. 시맨틱한 마크업, 접근성, 유지보수성 등을 고려했을 때 더 적절한 대안들이 존재합니다. 이 글에서는 <br> 태그의 정확한 역할부터 다양한 줄바꿈 구현 방식과 그에 맞는 사용 시점까지 깊이 있게 정리합니다.

 

 

목차

1. <br> 태그의 역할과 기본 동작
2. <br> 태그를 피해야 하는 상황
3. <p> 태그로 줄바꿈 구현하기
4. <div> + CSS로 줄바꿈 구현하기
5. CSS를 활용한 줄바꿈 처리
6. <pre> 태그를 활용한 줄 유지
7. 줄바꿈 방식 비교 및 선택 가이드

 

1. <br> 태그의 역할과 기본 동작

<br> 태그는 라인 브레이크(line break)를 삽입합니다. 주로 시 한 줄씩 구분할 때, 주소와 같이 의미 있는 줄바꿈이 필요할 때 사용됩니다.

예시:

서울특별시 강남구 테헤란로 123

OOO빌딩 5층

홍길동 드림
  

 

 

 

2. <br> 태그를 피해야 하는 상황

• 문단을 나눌 때는 <p> 또는 <div>를 사용하는 것이 더 적절합니다.
• 시맨틱 구조를 해치거나 유지보수가 어려워질 수 있습니다.
• 반응형 웹에서 디자인 흐름이 깨질 수 있습니다.

TIP: 반복적인 <br> 사용은 나쁜 습관입니다. 구조적인 마크업을 먼저 고려하세요.

 

 

 

3. <p> 태그로 줄바꿈 구현하기

<p> 태그는 문단(paragraph)을 구분하기 위한 태그입니다. 자동으로 상하 여백이 적용되어 시각적으로 명확한 줄바꿈이 이루어집니다.

예시:

<p>첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.</p>
  

 

 

 

4. <div> + CSS로 줄바꿈 구현하기

<div>는 블록 레벨 요소로, 기본적으로 줄바꿈을 발생시킵니다. 하지만 원하는 간격을 조절하기 위해 CSS와 함께 사용하면 훨씬 유연합니다.

<div style="margin-bottom: 10px;">첫 번째 줄</div>
<div>두 번째 줄</div>
  

 

 

 

 

5. CSS를 활용한 줄바꿈 처리

CSS 속성 중 white-space는 줄바꿈 처리에 유용하게 쓰입니다.

• white-space: pre; → 공백과 줄바꿈 모두 유지
• white-space: pre-line; → 줄바꿈만 유지

예시:

<div style="white-space: pre-line;">
줄이 바뀝니다.
자동으로.
</div>
  

 

 

 

6. <pre> 태그를 활용한 줄 유지

<pre> 태그는 작성된 그대로의 줄바꿈과 공백을 유지합니다.

코드 블록, ASCII 아트, 시 등 공백이 중요한 콘텐츠에 적합합니다.

<pre>
이 문장은
줄바꿈을
그대로 유지합니다.
</pre>
  

 

 

 

7. 줄바꿈 방식 비교 및 선택 가이드

방법	장점	단점	추천 용도
<br>	간편함	비시맨틱, 유지보수 어려움	주소, 시 등
<p>	시맨틱, 여백 자동	공백 제어 어려움	일반 문단
<pre>	줄바꿈/공백 완벽 유지	스타일 제한	코드, 시