: 줄바꿈 요소

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

시도해보기

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

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

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

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

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

html

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

결과는 다음과 같습니다.

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

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

Specification
HTML # the-br-element

BCD tables only load in the browser