HTML에서 <br> 태그는 인라인(inline) 요소로, 텍스트 사이에 강제로 새 줄(줄바꿈)을 삽입하는 역할을 합니다. 문장 중간에 배치하면 해당 지점에서 텍스트가 다음 줄로 넘어갑니다.
사용 예시
<p>
<br> 태그는 <br>텍스트<br>중간에<br>줄바꿈을 만듭니다
</p>실행 결과
<br> 태그는
텍스트
중간에
줄바꿈을 만듭니다
<br> 태그 사용 시 알아두면 좋은 점
- 요소 간 여백에는 사용하지 마세요. 개발자들이 종종
<br>태그를 남발해 HTML 요소 사이에 공간을 만드는 경우를 볼 수 있지만, 이는 잘못된 사용법입니다. 요소 사이의 간격은 반드시 CSS의 margin 속성으로 지정해야 합니다. - 빈 요소(empty element)입니다.
<br>요소는 대부분의 HTML 요소와 달리 닫는 태그가 없습니다.<br>단일 태그만으로 정의됩니다. - JSX에서는 셀프 클로징이 필요합니다. ReactJS의 JSX에서 줄바꿈을 사용할 때도 br 요소는 단일 태그로 정의되지만, 유효한 코드를 위해 슬래시(/)를 붙여야 합니다:
<br/> - 반응형 디자인에서는 주의하세요.
<br>요소는 화면 크기에 따라 유동적으로 조정되는 반응형 타이포그래피 환경에서 의도치 않은 레이아웃 깨짐을 유발할 수 있습니다. 따라서 꼭 필요한 경우에만 신중하게 사용하고, 텍스트 서식 목적이라면 커스텀 CSS 클래스를 활용하는 것이 더 안전하고 유연한 대안입니다.
정리하면, <br> 태그는 시적인 줄바꿈, 주소 표기처럼 줄바꿈 자체가 의미를 갖는 경우에 적합합니다. 단순한 간격 조절이나 레이아웃 배치 용도라면 CSS를 활용하는 것이 올바른 접근 방식입니다.