대신 은 언제 써야 하나요?

주소나 시처럼 줄바꿈 자체가 내용의 일부일 때 을 쓰세요. 문단이 나뉠 때는 요소를 따로 쓰고, 간격은 을 쌓는 대신 CSS margin으로 주세요.

실행 가능한 HTML 문서: HTML 줄바꿈

Q: HTML에서 줄바꿈은 어떻게 하나요?

새 줄이 시작될 곳에 을 넣으세요. Line one Line two처럼요. HTML 파일에서 Enter를 눌러도 소용없어요. 브라우저는 소스의 개행을 일반 공백으로 취급하기 때문이에요.

Q: , , 중 무엇을 써야 하나요?

HTML에서는 셋 다 동작하고 같은 요소를 만들어요. 이 기본 HTML 형태이고, 슬래시가 붙은 형태는 XHTML과 JSX 호환을 위해 허용돼요. 만 단독으로 쓰는 건 올바르지 않지만, 브라우저는 그것도 줄바꿈으로 읽어요.

Q: 태그를 넣지 않고 텍스트의 줄바꿈을 유지하려면 어떻게 하나요?

CSS에서 요소에 white-space: pre-line을 주세요. 그러면 브라우저가 텍스트의 모든 개행을 줄바꿈으로 보여 주면서, 여분의 공백은 여전히 하나로 합쳐요. 사용자 댓글이나 JavaScript로 불러온 텍스트에 편리해요.

Q: HTML에서 줄바꿈이 안 되게 하려면 어떻게 하나요?

텍스트를 white-space: nowrap이 적용된 요소로 감싸거나, 두 단어를 줄바꿈 없는 공백 로 이어서 항상 같은 줄에 있게 하세요.

HTML 줄바꿈: br 태그, 개행 유지, 줄바꿈 막기

텍스트 블록 안에서 새 줄을 시작하려면 을 써요. 이 맞는 경우와 문단이 나은 경우, 텍스트의 개행을 그대로 살리는 법, 로 긴 단어를 끊는 법, 줄바꿈을 막는 법을 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

줄바꿈 하는 법

새 줄이 시작될 곳에  을 넣으세요. 빈 요소라서 닫는 태그가 없어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

주소는  이 있는 곳마다 정확히 줄이 바뀌어요. 두 번째 문단은 소스에 개행이 있는데도 한 줄로 나와요. HTML은 개행, 탭, 연속된 공백을 공백 하나로 취급하거든요. 그래서  이 있는 거예요.

 ,  ,  은 모두 같은 요소를 만들어요. 프로젝트에서 쓰는 형태를 따르세요(JSX와 XHTML은 슬래시가 필요해요).

br과 p 차이: 줄바꿈은 간격이 아니에요

 은 같은 문단 안에서 줄을 끝내요. 새 는 새 문단을 시작하고, 기본 margin 덕분에 위아래에 간격이 생겨요. 간격을 만들려고  을 쌓아도 동작은 하지만, 깨지기 쉽고 잘못된 의미를 전달해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

두 상자는 비슷해 보이지만, 스크린 리더에게 첫 번째는 문단 하나이고, 간격을 바꾸려면 모든 페이지를 고쳐야 해요. 두 번째는 CSS 한 줄로 간격을 정해요.

 을 쓰기 좋은 곳은 주소, 시와 노래 가사, 서명의 각 줄처럼 줄바꿈이 텍스트에 속하는 경우예요. 그 밖에는 문단, 목록, 제목을 쓰세요.

텍스트의 개행 유지하기

텍스트가 다른 곳(댓글 입력란, 데이터베이스, 스크립트)에서 오면   태그 대신 실제 개행 문자가 들어 있어요. CSS white-space: pre-line을 쓰면 브라우저가 그 개행을 줄바꿈으로 보여 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

같은 문자열이 회색 상자에서는 한 줄로, 파란 상자에서는 세 줄로 나와요. 이 방법은 innerHTML로 사용자 텍스트에   태그를 끼워 넣는 것보다 안전해요. 그렇게 하면 사용자가 HTML을 삽입할 수 있게 되거든요. 공백과 들여쓰기까지 유지하려면 white-space: pre를 쓰세요. HTML 공백 페이지에서 다뤄요.

긴 단어 끊기: wbr

공백 없이 긴 단어나 URL은 좁은 상자를 넘칠 수 있어요. 은 필요하면 브라우저가 줄을 바꿔도 되는 위치를 표시하고, 필요 없으면 아무 일도 하지 않아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

첫 번째 경로는 상자 밖으로 삐져나오고, 두 번째는  위치에서 줄이 바뀌어요. 직접 관리하지 않는 텍스트라면 CSS 속성 overflow-wrap: anywhere로 긴 단어를 아무 데서나 끊을 수 있어요.

줄바꿈 막기

반대로 "10 km"나 전화번호를 한 줄에 붙여 두고 싶을 때도 있어요. 방법은 두 가지예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

 는 브라우저가 줄을 바꾸지 않는 공백이라서 "10"과 "km"가 붙어 있어요. white-space: nowrap은 span 전체를 한 줄에 유지해요.  를 일반 공백으로 바꾸거나 클래스를 지우면, 이 너비에서는 둘 다 두 줄로 나뉘어요.

자주 하는 실수

소스에서 Enter를 누르고 새 줄을 기대함. HTML에서 개행은 공백이에요.  , 별도의 요소, white-space: pre-line 중 하나를 쓰세요.
간격을 주려고  을 쌓음. 문단과 margin을 쓰세요.
 로 목록을 만듦. <li>와 함께 <ul>이나 <ol>을 쓰세요. 스크린 리더가 목록으로 알려 줘요.
을 씀. 올바르지 않아요.  을 쓰세요.
innerHTML로 사용자 텍스트에  을 넣음. 대신 textContent를 설정하고 white-space: pre-line을 쓰세요.

자주 묻는 질문

HTML에서 줄바꿈은 어떻게 하나요?

새 줄이 시작될 곳에  을 넣으세요. Line one Line two처럼요. HTML 파일에서 Enter를 눌러도 소용없어요. 브라우저는 소스의 개행을 일반 공백으로 취급하기 때문이에요.

, , 중 무엇을 써야 하나요?

HTML에서는 셋 다 동작하고 같은 요소를 만들어요.  이 기본 HTML 형태이고, 슬래시가 붙은 형태는 XHTML과 JSX 호환을 위해 허용돼요. 만 단독으로 쓰는 건 올바르지 않지만, 브라우저는 그것도 줄바꿈으로 읽어요.

대신 은 언제 써야 하나요?

주소나 시처럼 줄바꿈 자체가 내용의 일부일 때  을 쓰세요. 문단이 나뉠 때는  요소를 따로 쓰고, 간격은  을 쌓는 대신 CSS margin으로 주세요.

태그를 넣지 않고 텍스트의 줄바꿈을 유지하려면 어떻게 하나요?

CSS에서 요소에 white-space: pre-line을 주세요. 그러면 브라우저가 텍스트의 모든 개행을 줄바꿈으로 보여 주면서, 여분의 공백은 여전히 하나로 합쳐요. 사용자 댓글이나 JavaScript로 불러온 텍스트에 편리해요.

HTML에서 줄바꿈이 안 되게 하려면 어떻게 하나요?

텍스트를 white-space: nowrap이 적용된 요소로 감싸거나, 두 단어를 줄바꿈 없는 공백  로 이어서 항상 같은 줄에 있게 하세요.