HTML에서 줄바꿈이 필요할 때 쓰는 태그, <br> 완전정복!
텍스트를 예쁘게 정리해 보여주고 싶었는데, 화면에서는 줄이 이어져 나와 당황해본 적 있으신가요?
HTML에서는 우리가 엔터키를 눌러 줄을 바꿨다고 해서 그대로 표현되지 않아요. 이때 등장하는 게 바로 오늘의 주인공 <br> 태그입니다. 단순하지만, 알아두면 HTML 글쓰기가 훨씬 자연스러워져요!
Step 1. <br> 태그는 어떤 역할을 할까?
<br>은 break line의 줄임말로, 텍스트 줄을 강제로 바꿔주는 태그입니다.
문법은 매우 간단해서 닫는 태그도 필요 없고, 쓰고 싶은 자리에 바로 삽입하면 끝이에요.
<p>이것은 한 줄입니다.<br>
이것은 다음 줄입니다.</p>이것은 한 줄입니다.
이것은 다음 줄입니다.
💡 Tip: HTML5에선
<br>만 써도 되고, XHTML 스타일로<br />도 쓸 수 있어요. 둘 다 작동합니다.
Step 2. 줄바꿈은 어디서 필요할까?
단순한 소개 문구나 주소, 시처럼 줄마다 의미를 다르게 표현하고 싶을 때 <br>은 유용합니다.
예를 들어 고객센터 정보, 이메일 서명, 가사처럼 각 줄이 구분되어야 할 때 사용해요.
<p>
서울특별시 강남구 123번지<br>
웹디자인부서<br>
홍길동 드림
</p>
서울특별시 강남구 123번지
웹디자인부서
홍길동 드림
💡 현실 예시: 전자 청첩장, 시나 가사, 이메일 서명 구성할 때 <br>이 없으면 줄 구분이 없어져 읽기 불편해질 수 있어요.
Step 3. <br>로 간격을 띄우는 건 금물!
처음 HTML을 접할 때 자주 하는 실수가 바로 이거예요. 줄 간격을 주고 싶어서 <br>을 여러 번 사용하는 것!
하지만 줄 간격은 margin이나 padding 같은 CSS로 조절하는 게 정석입니다.
<p>환영합니다!<br><br><br>
다음 내용으로 넘어가겠습니다.</p>아래처럼 CSS를 활용하면 더 깔끔하고 구조적인 코드를 만들 수 있어요.
<p style="margin-bottom: 2em;">환영합니다!</p>
<p>다음 내용으로 넘어가겠습니다.</p>환영합니다!
다음 내용으로 넘어가겠습니다.
💡 주의: <br>은 오직 줄만 바꿔줄 뿐, 시각적인 ‘여백’ 역할은 하지 않아요. 레이아웃 조절은 CSS로!
Step 4. <br> vs <p> vs <div> — 헷갈리지 말자!
줄을 바꾼다고 무조건 <br>을 쓰는 건 아니에요.
내용 자체가 다른 문단이라면 <p>, 레이아웃을 나누고 싶다면 <div>, 텍스트 흐름만 줄 바꾸고 싶다면 <br>을 써야 해요.
- <br>: 텍스트 한 줄만 바꿀 때
- <p>: 문단을 구성할 때
- <div>: 콘텐츠 구조나 영역 나눌 때
<p>고객 안내사항</p>
<p>운영시간: 평일 10:00 ~ 18:00</p>고객 안내사항
운영시간: 평일 10:00 ~ 18:00
💡 정리: <br>은 줄바꿈, <p>는 문단 구분, <div>는 블록 구조를 나누는 역할을 해요. 쓰임새가 다릅니다!
정리하며: <br> 태그는 작지만 정확히 알아야 할 도구예요
<br> 태그는 HTML에서 가장 단순한 태그 중 하나지만, 텍스트를 자연스럽고 읽기 좋게 만드는 데 핵심 역할을 해요.
줄바꿈 하나로도 사용자의 시선이 편안해질 수 있죠.
단, 여백 조절 같은 역할로 남용하면 오히려 코드가 복잡해질 수 있으니 조심해야 해요.
이제는 <br> 태그를 단순한 도구가 아니라, 깔끔한 웹 문서를 만드는 ‘스마트한 도구’로 잘 활용해보세요!