HTML br 태그: 줄바꿈 방법과 p·wbr·pre의 차이

HTML의 <br>는 텍스트 안의 지정한 위치에서 줄을 바꿉니다. 시의 행이나 우편 주소처럼 줄 구분 자체에 의미가 있을 때 사용하고, 서로 다른 문단은 p 요소로 나누며 간격은 CSS로 조절합니다.

br의 문법과 소스 줄바꿈의 차이

br은 내용과 종료 태그가 없는 빈 요소입니다. HTML에서는 <br>로 작성하며 </br>를 쓰지 않습니다. <br />도 HTML에서 처리되지만, 슬래시가 있어야 줄바꿈이 되는 것은 아닙니다.

일반적인 기본 스타일에서는 소스 코드에 적은 줄바꿈과 연속 공백이 합쳐집니다. br은 소스 정렬과 별개로 콘텐츠 안에 줄바꿈을 지정합니다. 화면 너비가 좁아져 자연스럽게 접히는 줄바꿈과도 구분해야 합니다.

전체 예제: 소스 줄바꿈·br·문단 비교

아래 문서를 line-breaks.html로 저장한 뒤 브라우저에서 열어 보세요. 짧은 같은 텍스트를 서로 다른 구조로 표시해 차이를 비교합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>줄바꿈과 문단 비교</title>
  <style>
    body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
    .message { margin: 0; line-height: 1.6; }
    .message + .message { margin-top: 1rem; }
  </style>
</head>
<body>
  <h1>줄바꿈 비교</h1>
  <h2>소스 코드에서만 줄바꿈</h2>
  <p id="source-only">첫째 줄
    둘째 줄</p>
  <h2>br로 줄바꿈</h2>
  <p id="with-br">첫째 줄<br>둘째 줄</p>
  <h2>서로 다른 문단</h2>
  <p class="message">첫 번째 주제의 문단입니다.</p>
  <p class="message">두 번째 주제의 문단입니다.</p>
</body>
</html>

첫 구역은 “첫째 줄 둘째 줄”로 이어지고 둘째 구역은 br 뒤에서 줄이 바뀝니다. 마지막 두 문장은 각각 별도 문단이며 CSS로 사이에 1rem 여백을 주었습니다. 창을 아주 좁히면 첫 구역도 너비에 따라 접힐 수 있지만, 그것은 br로 지정한 줄바꿈이 아닙니다.

br·p·wbr·pre 중 무엇을 쓰나요?

긴 설명을 보기 좋은 길이로 끊기 위해 문장마다 br을 넣으면 작은 화면이나 큰 글자 설정에서 어색하게 접힐 수 있습니다. 일반 본문은 자연스럽게 접히게 두고, 작성한 공백과 행 구분을 보존해야 한다면 HTML pre 태그의 공백·줄바꿈 처리를 확인하세요.

빈 줄과 문단 간격은 CSS로 조절하기

br을 여러 번 반복해 빈 공간을 만들면 의미가 다른 문단들이 하나로 이어지고, 화면 낭독기로 문단을 탐색하기도 어려워집니다. 새 문단은 p로 구분하고 margin으로 간격을 줍니다. 같은 문단 안의 줄 높이는 line-height로 조절합니다.

br의 오래된 clear 속성이나 br 자체의 여백을 레이아웃 도구로 사용하지 않습니다. 콘텐츠의 줄 구분과 화면 배치를 나누어 관리해야 화면 너비·글자 크기가 달라져도 읽기 쉽습니다. 자세한 구문과 접근성 설명은 MDN br 문서를 참고할 수 있습니다.