<br>: 줄바꿈 요소

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <br> 요소는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.

시도해보기

위 예제에서 확인할 수 있듯, <br> 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. <br> 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.

참고: 문단 사이에 여백을 두기 위한 용도로 <br>을 사용하지 마세요. 대신 <p> 요소로 감싼 후 CSSmargin 속성으로 여백의 크기를 조절하세요.

특성

이 요소는 전역 특성만 포함합니다.

CSS 스타일링

<br> 요소는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다. 따라서 크기도, 외형도 없으므로 스타일을 적용할 것도 거의 없습니다.

<br> 요소에 margin을 적용하면 줄 간격을 늘릴 수 있겠지만 좋은 방법은 아닙니다. 이런 목적을 위해 만들어진 CSS line-height 속성을 사용하세요.

예제

html
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA

결과는 다음과 같습니다.

접근성 고려사항

문단 구분을 <br>로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, <br>에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.

<p> 요소와 함께 CSS margin 속성 등을 조합해 간격을 조절하세요.

기술 요약

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠.
가능한 콘텐츠 없음. 빈 요소입니다.
태그 생략 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
암시적 ARIA 역할 대응하는 역할 없음
가능한 ARIA 역할 모두
DOM 인터페이스 HTMLBRElement

명세

Specification
HTML Standard
# the-br-element

브라우저 호환성

BCD tables only load in the browser

같이 보기