HTML 새 줄 추가하는 법: br 태그와 pre 태그 사용법 총정리

HTML 페이지에 새 줄을 추가하는 방법은 크게 두 가지입니다. 바로 태그와 <pre> 태그입니다. 태그는 해당 위치에서 줄바꿈을 만들어 주고, <pre> 태그는 코드 에디터에 작성된 텍스트를 화면에 그대로 표시해 줍니다. 따라서 <pre> 태그 안에 줄바꿈이 있다면 최종 페이지에도 그대로 반영됩니다.

웹 페이지에 새 줄을 추가하고 싶은 적이 있으신가요? 엔터 키만 누른다고 해서 줄바꿈이 되지는 않습니다. 대신 줄바꿈을 위해 만들어진 HTML 태그를 사용해야 합니다.

이 글에서는 HTML의 태그와 <pre> 태그를 다룹니다. 두 태그 모두 HTML 텍스트에 새 줄을 추가할 수 있게 해주며, 각 태그의 특징과 사용 사례를 예제와 함께 자세히 살펴보겠습니다.

HTML 새 줄: 과 <pre>

HTML을 작성하다 보면 UI에 줄바꿈이나 여백을 추가해야 하는 경우가 종종 있습니다. 이러한 공간은 웹 페이지의 가독성을 높여 줍니다. HTML에서 새 줄을 추가하는 방법은 다음 두 가지입니다.

태그: 줄바꿈(line break)을 생성합니다.
<pre> 태그: 에디터에 작성된 그대로 텍스트를 형식화합니다.

HTML 태그

태그를 사용하면 텍스트에 새 줄을 추가할 수 있습니다. 이 태그는 '줄바꿈 요소(break return element)'라고도 불리며, 이전 요소 뒤에 새 줄을 삽입합니다.

이 태그의 기본 문법은 다음과 같습니다.

<p>
Test<br>
</p>

태그는 "Test"라는 단어 뒤에 새 줄을 추가합니다. 이 태그는 닫는 태그가 없으며, 새 줄을 원하는 위치에 만 넣어 주면 됩니다. 좀 더 구체적인 예제를 살펴보겠습니다.

다음은 주소의 각 줄 뒤에 태그를 사용한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Line Breaks</title>
</head>
<body>
   <div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, veritatis. Soluta pariatur nesciunt voluptatum id incidunt minus ratione obcaecati laborum unde? Voluptatibus officia quia ducimus odio labore atque aperiam sint.</p>
 
       <address>
           <span>123 Main St</span><br>
           <span>Hometown, USA</span><br>
           <span>23455-2345</span>
       </address>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos tempora modi eius omnis provident sit itaque vel ad porro nulla vero sequi ullam aperiam placeat consectetur, assumenda in autem dolorum!</p>
   </div>
</body>
</html>

위 코드에서는 <address> 태그 안의 각 태그 뒤에 태그를 배치했습니다. 이렇게 하면 주소의 각 부분(거리, 도시, 우편번호)이 각각 새 줄로 표시됩니다.

HTML <pre> 태그

HTML <pre> 태그는 미리 형식화된(preformatted) 텍스트를 코드에 삽입합니다. 이 태그 안에 넣은 텍스트는 마크업에 입력된 그대로 표시되므로, 텍스트 내부의 줄바꿈도 최종 결과물에 그대로 나타납니다.

태그와 달리 <pre> 요소는 여는 태그와 닫는 태그가 모두 필요합니다. HTML 코드에서 <pre> 태그의 기본 문법은 다음과 같습니다.

<pre>
This is a sentence.
</pre>

이 코드는 "This is a sentence"라는 텍스트를 <pre> 태그 사이에 있는 그대로 화면에 표시합니다.

<pre> 태그의 특이한 점은 모든 내용이 에디터에 작성된 그대로, 정확하게 입력된다는 것입니다.

복사/붙여넣기한 텍스트에는 줄바꿈 문자가 포함되어 있지 않은 경우가 많습니다. 이런 경우 텍스트가 의도와 다르게 표시될 수 있는데, 브라우저가 이를 하나의 긴 연속된 텍스트 줄로 인식하기 때문입니다. 엔터 키(return key)를 눌러 실제 줄바꿈을 추가해 주면 기대한 대로 동작합니다.

<pre> 태그의 더 자세한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Line Breaks</title>
</head>
<body style="max-width: 800px; width: 100%;">
   <pre style="width: 100%;">
       <p style="width: 800px;">
       Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Ut temporibus dolores iure molestias porro, esse, ducimus
       provident ipsam voluptas rerum veniam vero inventore tempora.
       </p>
 
       <address>
           2345 Main St.
           Hometown, Anywhere, USA
           12345-3456
       </address>
 
       <p style="width: 800px; height: 500px; background: pink;">
       Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Itaque assumenda, explicabo aspernatur odit saepe a dicta
       eveniet accusamus laudantium, molestiae quae sunt cumque iusto?
       </p>
   </pre>
</body>
</html>

위 코드에서는 <body> 태그 바로 뒤에 <pre> 태그를 추가했습니다. 이 태그 안의 모든 텍스트, 즉 HTML 단락() 태그와 <address> 태그의 내용은 텍스트 에디터에 보이는 그대로 형식화되어 출력됩니다.

주목할 점은 주소 부분에 태그를 사용하지 않았다는 것입니다. 텍스트 에디터에서 엔터 키로 이미 줄바꿈을 넣어 두었기 때문입니다.

일반적으로 엔터 키만으로는 문서에 새 줄을 추가할 수 없습니다. 하지만 <pre> 태그를 사용했기 때문에 엔터 키로 만든 줄바꿈이 최종 문서에 그대로 반영됩니다.

마무리

HTML에 줄바꿈을 삽입하는 방법은 과 <pre>, 두 가지입니다. 특정 위치에 한 줄만 추가하고 싶다면 태그가 적합하고, 텍스트 블록 전체를 에디터에서 보이는 그대로 표현하고 싶다면 <pre> 태그가 더 좋은 선택입니다.

HTML 코딩을 더 깊이 배우고 싶다면, 공식 문서(MDN Web Docs)와 검증된 온라인 강좌를 활용해 기본기를 탄탄히 다져 보세요. 두 태그의 차이를 직접 코드로 작성하며 비교해 보면 훨씬 빠르게 익힐 수 있습니다.

HTML 새 줄 추가하는 법: br 태그와 pre 태그 사용법 총정리

HTML 새 줄: <br>과 <pre>

HTML <br> 태그

HTML <pre> 태그

마무리