HTML을 처음 배우는 분들이 자주 헷갈리는 부분 중 하나가 바로 줄바꿈 처리입니다.
텍스트를 여러 줄로 나누고 싶어서 Enter를 눌러도 실제 웹페이지에서는 줄바꿈이 적용되지 않는 경우가 많습니다.
이것은 HTML이 문서의 구조를 기준으로 동작하기 때문입니다.
단순한 줄바꿈(엔터 입력)은 브라우저에서 공백으로 처리되며, 실제 줄바꿈으로 인식되지 않습니다.
이번 글에서는 HTML에서 줄바꿈을 만드는 방법, br 태그 사용법, 그리고 CSS를 활용한 줄바꿈 처리 방법까지 쉽게 정리해보겠습니다.
HTML에서 줄바꿈이 적용되지 않는 이유
HTML에서는 여러 개의 공백이나 줄바꿈을 하나의 공백으로 처리하는 특징이 있습니다.
이를 Whitespace Collapsing이라고 합니다.
<p>
Hello
World
</p>
위 코드처럼 줄을 나눠 작성해도 실제 화면에서는 다음과 같이 표시됩니다.
Hello World
따라서 줄바꿈을 적용하려면 별도의 방법을 사용해야 합니다.
br 태그로 줄바꿈 만들기
HTML에서 줄바꿈을 만드는 가장 기본적인 방법은 br 태그를 사용하는 것입니다.
Hello <br>
World
이 코드는 다음과 같이 표시됩니다.
Hello
World
br 태그는 줄을 강제로 바꿀 때 사용하는 태그입니다.
br 태그 특징
- 닫는 태그가 없음 (단일 태그)
- 텍스트 중간에서 줄바꿈 가능
- 문단 구분이 아닌 단순 줄바꿈 용도
p 태그를 활용한 줄바꿈
문단 단위로 줄바꿈을 하고 싶다면 p 태그를 사용하는 것이 더 적절합니다.
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
이 방식은 줄바꿈뿐만 아니라 문단 간 여백까지 자동으로 적용됩니다.
따라서 단순 줄바꿈이 아닌 내용 구분이 필요할 때는 p 태그를 사용하는 것이 좋습니다.
block 요소 활용
div, p 같은 블록 요소는 기본적으로 줄바꿈이 적용됩니다.
<div>첫 번째 줄</div>
<div>두 번째 줄</div>
이 구조에서는 자동으로 줄이 나뉘게 됩니다.
줄바꿈 방법 비교
각 방법의 특징을 정리하면 다음과 같습니다.
br 태그
- 간단한 줄바꿈
- 텍스트 중간 사용
p 태그
- 문단 구분
- 의미 있는 구조
줄바꿈 사용 시 주의할 점
br 태그 남용하지 않기
br 태그를 과도하게 사용하면 HTML 구조가 복잡해질 수 있습니다.
문단 구분은 p 태그를 사용하는 것이 좋습니다.
디자인은 CSS로 처리하기
줄 간격이나 여백 조정은 HTML이 아니라 CSS를 사용하는 것이 좋습니다.
의미 있는 구조 유지하기
단순 줄바꿈이 아닌 콘텐츠 구조를 고려하여 태그를 선택해야 합니다.
실무에서 추천하는 방법
실무에서는 다음과 같은 기준으로 사용하는 것이 좋습니다.
- 문단 구분 > p 태그
- 간단한 줄바꿈 > br 태그
- 스타일 제어 > CSS
마무리
HTML에서 줄바꿈을 만드는 방법은 여러 가지가 있지만, 상황에 맞게 사용하는 것이 중요합니다.
정리하면 다음과 같습니다.
- HTML에서는 기본적으로 줄바꿈이 적용되지 않는다
- br 태그로 줄바꿈을 만들 수 있다
- 문단 구분은 p 태그를 사용하는 것이 좋다
- CSS로 간격을 제어할 수 있다
웹페이지를 제작할 때 단순한 줄바꿈이 아닌 콘텐츠 구조를 고려하여 태그를 사용하는 것이 좋은 HTML 작성의 핵심입니다.