본문 바로가기
Reference/HTML

br 태그는 텍스트 줄바꿈이 필요할 때 설정합니다.

by @webstoryboy 2022. 10. 31.
Reference/HTML

<br> 태그는 텍스트 줄바꿈이 필요할 때 설정합니다.

by @webs 2022. 7. 4.

<br>

<br> 태그는 텍스트 줄바꿈이 필요할 때 설정합니다. 단순 줄바꿈을 위한 용도이기 때문에 스타일적인 요소가 필요하다면 CSS 속성을 사용합니다. 여백을 주기 위함이라면 CSS 속성 margin, padding 또는 line-height 사용을 권장합니다. 의미없는 글자에 줄바꿈을 원하다면 <wbr> 태그를 사용합니다. 문단간에 주제 분리를 위한 줄바꿈이 필요하다면 <hr> 태그를 사용합니다.


특징 설명
요소 인라인 구조(Inline Element)
닫는 태그 없음
버전 HTML4
시각적 표현 줄바꿈
사용성 ★★★★☆

정의(Definition)

  • <br> 태그는 텍스트 줄바꿈이 필요할 때 사용합니다.
  • <br> 태그는 줄을 바꾸는 의미 밖에 없기 때문에 스타일을 적용하기 위한 용도는 적절하지 않습니다.
  • 여백이 필요할 때 <br> 태그의 사용은 적절치 않으며, CSS 속성 중에 margin, padding 또는 line-height를 사용합니다.
  • HTML4에서는 <br /> 태그 작성시 슬러시('/')가 필요하지만, HTML5에서는 의무적인 사항은 아니기 때문에 생략도 가능합니다.

비교(Compare)

  • 텍스트 줄바꿈을 원하다면 <br> 태그를 사용합니다.
  • 의미가 없는 텍스트 줄바꿈을 원하다면 <wbr> 태그를 사용합니다.
  • 텍스트의 줄바꿈을 원하다면 CSS 속성 word-break 속성을 사용합니다.
  • 문단간에 주제별 구분이 필요하다면 <hr> 태그를 사용합니다.

접근성(Accessibility)

  • 문단 구분을 위해 <br> 태그를 사용하는 것은 좋지 않습니다. 스크린리더가 태그의 인식을 알려주나 아무 내용도 없기 때문에 사용자는 혼란을 야기 할 수 있습니다.

예제1(Sample)

br 태그 적용 여부 확인 예제입니다.

텍스트의 줄바꿈이 필요할 때 사용합니다. 줄바꿈 용도 이외에 스타일을 주기 위함이라면 적합하지 않습니다. 또한 문단 구분을 위한 사용도 권하지 않습니다.

텍스트의 줄바꿈이 필요할 때 사용합니다.
줄바꿈 용도 이외에 스타일을 주기 위함이라면 적합하지 않습니다.
또한 문단 구분을 위한 사용도 권하지 않습니다.

HTML
CSS
SCRIPT
<div class="wbr-box">
    <div>
        <p>텍스트의 줄바꿈이 필요할 때 사용합니다. 줄바꿈 용도 이외에 스타일을 주기 위함이라면 적합하지 않습니다. 또한 문단 구분을 위한 사용도 권하지 않습니다.</p>
        <p>텍스트의 줄바꿈이 필요할 때 사용합니다.<br>줄바꿈 용도 이외에 스타일을 주기 위함이라면 적합하지 않습니다.<br>또한 문단 구분을 위한 사용도 권하지 않습니다.<wbr></p>
    </div>
</div>
.wbr-box {
    background-color: white;
    overflow: hidden;
    resize: horizontal;
    border: 2px dashed #999;
    width: 20%;
    padding: 1%;
}
//Javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<br>

참고(Reference)


댓글