<br> 태그의 정의 및 사용법

<br> 태그는
텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타냅니다.

이 태그는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다.

HTML 
<p>
    CSS(Cascading Style Sheets)는
    <br> <!-- 텍스트를 끊어 줄바꿈하고 싶은 지점에 삽입합니다. -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>
실제 적용된 모습

위 예시에서 확인할 수 있는 것처럼 <br> 태그는 텍스트를 끊어 줄바꿈하고 싶은 지점에 삽입니다.
<br> 태그 뒤의 텍스트는 새 줄로 시작합니다.

<br> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</br>)가 없다는 의미입니다.

주의할 점

<br> 태그는 실제로 텍스트 블록 내용의 일부인 텍스트의 줄바꿈을 만드는 목적으로 사용되어야 합니다.
스타일은 CSS로 제어하는 것이 좋습니다.

문단 사이의 여백으로 활용

문단 사이에 <br> 태그를 사용하면 빈 줄과 같은 여백이 생깁니다. 이것은 반복적인 줄바꿈으로 생기는 시각적 효과이지만 이러한 여백을 만들기 위해 <br> 태그를 사용하는 것은 삼가야합니다.

대신 CSS로 제어하는 것이 좋습니다.

HTML - 잘못된 사례 
<p>
   문단 사이에 br 태그를 사용하면 빈 줄과 같은 여백이 생깁니다.
</p>
<br>
<p>
    이것은 반복적인 줄바꿈으로 생기는 시각적 효과이지만
    이러한 여백을 만들기 위해 br 태그를 사용하는 것은
    삼가야 합니다.
</p>

코드 부연설명
<p> 태그는 문단을 나타냅니다.

실제 적용된 모습
HTML - 올바른 사례 
<p style="margin-bottom: 3em;">  <!-- CSS의 margin-bottom 속성으로 여백 조정 -->
   문단 사이에 br 태그를 사용하면 빈 줄과 같은 여백이 생깁니다.
</p>
<p>
    이것은 반복적인 줄바꿈으로 생기는 시각적 효과이자만
    이러한 여백을 만들기 위해 br 태그를 사용하는 것은
    삼가야 합니다.
</p>
실제 적용된 모습

문단의 구분을 <br> 태그로 활용

문단의 구분을 <br> 태그로 활용하는 것은 웹 접근성에 문제가 발생할 수 있습니다. 시각장애인을 위한 스크린 리더가 <br> 태그를 문단으로 인식하지 않기 때문에 이 스크린 리더를 사용하는 사람에게는 문맥의 흐름 파악에 혼돈이 발생할 수 있습니다.

HTML - 올바른 사례 
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
HTML - 잘못된 사례 
<p>
    첫 번째 문단
    <br>
    두 번째 문단
</p>

여백 효과를 위한 연속적인 <br> 태그 활용

<br> 태그를 연속적으로 사용해서 여백 효과를 주는 것은 <br> 태그의 "텍스트에서 줄을 바꾼다는 목적"과는 다르게 단순히 스타일링만을 위한 것입니다.

HTML 
<p>
    CSS(Cascading Style Sheets)는
    <br>
    <br> <!-- 연속적인 <br> 태그 활용 -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>
실제 적용된 모습

이렇게 스타일링만을 위한 목적일 경우에도 CSS를 활용하는 것이 좋습니다.

HTML 
<p>
    <span style="margin-bottom: 2em; display:inline-block">
        CSS(Cascading Style Sheets)는
    </span>
    <br> <!-- 스타일을 직접 적용하지 않습니다. -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>

코드 부연설명
<span> 태그는 자체적으로 특별한 의미가 전혀 없는 인라인 컨테이너로,
단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그입니다.

실제 적용된 모습

CSS의 적용

<br> 태그는 자체는 레이아웃을 가지지 않으며, 줄바꿈만 수행합니다.
display 속성을 제외한 대부분의 CSS 속성이 <br> 태그에 적용되지 않습니다.

CSS 
br {
    display: none; /* 적용가능.
                      적용 시 줄바꿈시키는 기능은 상실됨 */
}
CSS 
br {
  width: 100px;       /* ❌ 적용되지 않음 */
  height: 20px;       /* ❌ 적용되지 않음 */
  margin: 10px;       /* ❌ 적용되지 않음 */
  padding: 5px;       /* ❌ 적용되지 않음 */
  background: red;    /* ❌ 적용되지 않음 */
  border: 2px solid black; /* ❌ 적용되지 않음 */
}

브라우저 호환성

br 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<br> 1 12 1 4

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

br 태그의 명세서 사양
명세서 사양
<br> HTML Standard
#the-br-element

참고문헌

같이 보기