<br>: 줄바꿈 요소

시도해 보기

<p>
  O’er all the hilltops<br />
  Is quiet now,<br />
  In all the treetops<br />
  Hearest thou<br />
  Hardly a breath;<br />
  The birds are asleep in the trees:<br />
  Wait, soon like these<br />
  Thou too shalt rest.
</p>

p {
  font-size: 1rem;
  font-family: sans-serif;
  margin: 20px;
}

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

특성

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

CSS 스타일링

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

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

예제

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

결과는 다음과 같습니다.

접근성 고려사항

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

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

기술 요약

명세

브라우저 호환성

같이 보기

• <address> 요소
• <p> 요소