---
title: '<br>: 줄바꿈 요소'
slug: Web/HTML/Element/br
tags:
  - Element
  - HTML
  - HTML text-level semantics
  - Reference
  - Web
translation_of: Web/HTML/Element/br
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;br&gt;</code> 요소</strong>는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>위 예제에서 확인할 수 있듯, <code>&lt;br&gt;</code> 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. <code>&lt;br&gt;</code> 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.</p>

<div class="blockIndicator note">
<p><strong>참고</strong>: 문단 사이에 여백을 두기 위한 용도로 <code>&lt;br&gt;</code>을 사용하지 마세요. 대신 {{htmlelement("p")}} 요소로 감싼 후 <a href="/ko/docs/Web/CSS">CSS</a>의 {{cssxref("margin")}} 속성으로 여백의 크기를 조절하세요.</p>
</div>

<h2 id="특성">특성</h2>

<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>만 포함합니다.</p>

<h2 id="CSS_스타일링">CSS 스타일링</h2>

<p><code>&lt;br&gt;</code> 요소는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다. 따라서 크기도,  외형도 없으므로 스타일을 적용할 것도 거의 없습니다.</p>

<p><code>&lt;br&gt;</code> 요소에 {{cssxref("margin")}}을 적용하면 줄 간격을 늘릴 수 있겠지만 좋은 방법은 아닙니다. 이런 목적을 위해 만들어진 CSS {{cssxref("line-height")}} 속성을 사용하세요.</p>

<h2 id="예제">예제</h2>

<pre class="brush: html">Mozilla Foundation&lt;br&gt;
1981 Landings Drive&lt;br&gt;
Building K&lt;br&gt;
Mountain View, CA 94043-0801&lt;br&gt;
USA
</pre>

<p>결과는 다음과 같습니다.</p>

<p>{{EmbedLiveSample("예제", "100%", "90")}}</p>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p>문단 구분을 <code>&lt;br&gt;</code>로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, <code>&lt;br&gt;</code>에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.</p>

<p>{{htmlelement("p")}} 요소와 함께 CSS {{cssxref("margin")}} 속성 등을 조합해 간격을 조절하세요.</p>

<h2 id="기술_요약">기술 요약</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다.</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
  </tr>
  <tr>
   <th scope="row">암시적 ARIA 역할</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>모두</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLBRElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.br")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>{{HTMLElement("address")}} 요소</li>
 <li>{{HTMLElement("p")}} 요소</li>
</ul>