정의 및 사용 방법

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

타이포그래피적 규칙이나 관례상 줄바꿈은 의도적으로 다음 텍스트를 새로운 줄로 물리적으로 이동시켰다는 표현의 방식으로 사용됩니다.
<br> 태그는 텍스트 블록 내에서 시나 연설문, 설명문처럼 실제로 운율이나 가독성처럼 텍스트 내용에 포함된 의도를 가진 줄바꿈에 사용합니다.

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

기본 예제

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

위 예시에서 확인할 수 있는 것처럼 <br> 태그는 의도적으로 텍스트를 끊어 가독성을 위해 줄바꿈하고 싶은 지점에 삽입합니다.
<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> 태그로 활용

문단의 구분 또는, 문단 내에서 주제별 그룹( thematic groups)을 구분을 <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: none을 제외한 대부분의 CSS 속성이 <br> 태그에 아무런 효과가 없습니다.

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

다음의 예제처럼 데스크톱에서는 가독성을 위해 텍스트를 줄바꿈하고, 폭이 좁은 모바일에서는 텍스트에 대해 줄바꿈하지 않도록 반응형 웹 디자인을 구현할 수 있습니다.

HTML 
<p>
    CSS(Cascading Style Sheets)는
    <br>
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>
CSS 
@media (max-width: 750px) {
    br {
        display: none; /* 모바일 디자인에 적용 */
    }
}
실제 적용된 모습 브라우저 화면 폭을 늘리거나 줄여보세요.
데스크톱에서는 가독성을 위해 텍스트를 줄바꿈하고, 폭이 좁은 모바일에서는 텍스트에 대해 줄바꿈하지 않도록 반응형 웹 디자인을 구현할 수 있습니다.

기술적인 문법 요약

br 태그의 기술적인 문법 요약
허용되는 부모 요소 구문 콘텐츠를 허용하는 모든 요소
허용되는 콘텐츠 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다.
암시적인 role 속성 값 없음
허용되는 role 속성 값 presentation, none

브라우저 호환성

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

명세서

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

참고문헌

같이 보기