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

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	7	8	9	10	11
<br>	○	○	○	○	○	○	○	○	○	○	○	○	○	○

참고(Reference)

• https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element

---