A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ko/docs/Web/HTML/Reference/Elements/br below:

<br>: 줄바꿈 요소 - HTML: Hypertext Markup Language

<br>: 줄바꿈 요소

Baseline Widely available

HTML <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> 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.

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

특성

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

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 속성 등을 조합해 간격을 조절하세요.

기술 요약 명세 브라우저 호환성 같이 보기

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4