[HTML] br 태그 (줄바꿈)

목 차

• HTML <br> 태그란?
• 주요 특징
• <br> 태그 사용 예제
  • 기본 사용
  • 주소 입력시 줄바꿈 적용
  • 노래 가사 표시하기
• <br> 태그와 <p> 태그의 차이점
• <br> 태그 사용시 하지 말아야 할 것

 

HTML <br> 태그란?

<br> (Break Line) 태그는 줄바꿈(line break)을 삽입하는 태그입니다. 즉, 문장을 강제로 다음 줄로 이동시키고 싶을 때 사용합니다.

 

---

 

주요 특징

• 단독 태그(Self-closing tag) → <br>은 종료 태그(</br>)가 필요 없음.
• 인라인 요소(Inline Element) → 문장 내에서 줄바꿈을 적용할 때 사용됨.
• CSS 없이도 줄바꿈 효과 제공 → <p> 태그처럼 블록을 나누지 않고도 줄바꿈 가능.

 

---

 

<br> 태그 사용 예제

💡 기본 사용

<br> 태그가 삽입된 위치에서 줄바꿈이 적용됩니다.

<p>첫 번째 줄입니다.<br>이제 두 번째 줄입니다.</p>

출력 결과:

첫 번째 줄입니다.
이제 두 번째 줄입니다.

 

💡 주소 입력시 줄바꿈 적용

<br>을 사용하여 주소를 보기 좋게 줄바꿈할 수 있습니다.

<p>서울특별시 강남구 테헤란로 123<br>ABC 빌딩 5층</p>

출력 결과:

서울특별시 강남구 테헤란로 123
ABC 빌딩 5층

 

💡 노래 가사 표시하기

<br>을 사용하면 한 문장씩 줄바꿈하여 가사를 표현할 수 있음.

<p>
  어느 날 내게<br>
  작은 날개가 생긴다면<br>
  그대에게 날아가 안길 수 있다면
</p>

출력 결과:

어느 날 내게
작은 날개가 생긴다면
그대에게 날아가 안길 수 있다면

 

---

 

<br> 태그와 <p> 태그의 차이점

태그	역할	줄바꿈 여부	블록 요소 여부
<br>	한 줄만 줄바꿈	O (줄바꿈 적용)	X (인라인 요소)
<p>	문단을 구분	O (단락 간 여백 포함)	O (블록 요소)

<p>이것은 첫 번째 문장입니다.<br>이것은 같은 문단 내에서 줄바꿈된 문장입니다.</p>

<p>이것은 별도의 문단입니다.</p>

<br>은 한 줄만 줄바꿈하지만, <p>는 단락 전체를 나누고 여백이 추가됨.

 

---

 

<br> 태그 사용시 하지 말아야 할 것

💡 여러줄 띄우기에 부적절

<br>을 여러 개 연속으로 사용하면 유지보수가 어렵고, CSS로 대체하는 것이 좋습니다.

❌ 잘못된 사용 예시:

<p>여러 줄을 띄우고 싶을 때<br><br><br>이렇게 하면 비효율적!</p>

✅ 올바른 방법 (CSS 사용):

<p style="margin-bottom: 30px;">CSS를 활용하면 더 깔끔합니다.</p>

 

💡 디자인과 레이아웃을 위한 용도로 부적절

<br>은 단순한 줄바꿈 태그이므로, 레이아웃 조정에는 CSS를 사용해야 합니다. 그러므로 <br>을 남발하는 대신, margin, padding을 활용하는 것이 좋습니다.

 

---

 

관련글

• [HTML] body 태그
• [HTML] blockquote 태그 (긴 인용문)
• [HTML] bdo 태그 (강제 문자 정렬)