HTML에서 공백 추가하기: , pre, br 태그 활용법 총정리

HTML을 작성하다 보면 스페이스바를 여러 번 눌러 입력한 공백이 브라우저에 렌더링될 때 표시되지 않는 현상을 발견하게 됩니다.

예를 들어 다음과 같습니다:

<p>April is the cruelest month,</p>
<p>April   is   the   cruelest   month,</p>

첫 번째 태그에는 단어 사이에 공백이 하나씩만 있고, 두 번째 태그에는 공백이 세 개씩 들어가 있습니다. 하지만 실제 웹 페이지에서는 두 줄 모두 아래와 같이 동일하게 렌더링됩니다:

April is the cruelest month,
April is the cruelest month,

이처럼 HTML은 기본적으로 연속된 공백을 하나로 합쳐서 처리합니다. 이번 글에서는 HTML 코드에 여분의 공백을 추가할 수 있는 세 가지 방법을 소개하겠습니다.

공백을 추가하는 HTML 태그

1. Non-Breaking Space( ) 문자

텍스트 앞, 중간, 뒤에 공백을 만들고 싶다면 줄바꿈 없는 공백을 의미하는   문자를 사용하면 됩니다. 이 특수 문자는 일반 공백과 달리 여러 번 입력한 만큼 그대로 화면에 표시됩니다. 사용 예시는 다음과 같습니다:

<p>i carry your heart with me(i carry it in my heart)</p>
<p>i carry your &nbsp; heart &nbsp; with me(i carry it in my heart)</p>

위 코드는 아래와 같이 렌더링됩니다:

i carry your heart with me(i carry it in my heart)

두 번째 문장에서 'heart' 단어 주변에 로 인한 여분의 공백이 그대로 유지되는 것을 확인할 수 있습니다.

참고로, 부트캠프 참가자의 81%는 수료 후 IT 분야 취업 전망에 대해 더 큰 자신감을 느꼈다고 답했습니다. 커리어 전환을 고려하고 있다면 부트캠프 매칭 서비스를 이용해 보세요.

부트캠프 수료생은 평균적으로 부트캠프 시작부터 첫 직장을 구할 때까지 6개월 미만의 기간 안에 커리어 전환을 완료했습니다.

2. Preformatted Text(<pre>) 요소

<pre> 태그는 미리 정의된(preformatted) 텍스트를 지정하는 HTML 요소입니다. 이 태그는 작성된 그대로의 공백과 줄바꿈을 유지하며, 고정폭(monospace) 폰트로 텍스트를 표시합니다. 예시를 살펴보겠습니다:

    <p>I was a child and she was a child,
   In this kingdom by the sea,
But we loved with a love that was more than love—
   I and my Annabel Lee—</p>

    <pre>I was a child and she was a child,
   In this kingdom by the sea,
But we loved with a love that was more than love—
   I and my Annabel Lee—</pre>

렌더링 결과는 다음과 같습니다:

I was a child and she was a child, In this kingdom by the sea, But we loved with a love that was more than love— I and my Annabel Lee—

태그로 감싼 첫 번째 버전은 들여쓰기와 줄바꿈이 모두 무시되어 한 문장으로 합쳐져 출력됩니다. 반면 <pre> 태그를 사용한 두 번째 버전은 원본 그대로의 들여쓰기와 줄바꿈이 유지됩니다:

I was a child and she was a child,

In this kingdom by the sea,

But we loved with a love that was more than love—

I and my Annabel Lee—

3. Line Break( ) 태그

텍스트 줄 사이에 간격을 만들고 싶다면 줄바꿈 태그인 태그가 가장 적합합니다. 태그는 강제로 줄을 바꿔주며, 연속으로 사용하면 빈 줄을 만들어 시각적인 간격도 확보할 수 있습니다. 사용 예시는 다음과 같습니다:

<p>so much depends
     upon

     a red wheel
     barrow

     glazed with rain
     water

     beside the white
     chickens</p>

<p>so much depends<br>
     upon<br>
     <br>
     a red wheel<br>
     barrow<br>
     <br>
     glazed with rain<br>
     water<br>
     <br>
     beside the white<br>
     chickens</p>

렌더링 결과:

첫 번째 태그 안의 줄바꿈은 무시되어 한 문장으로 출력되지만, 태그를 사용한 두 번째 버전은 시인 William Carlos Williams의 시 「The Red Wheelbarrow」처럼 의도된 형태 그대로 표현됩니다.

마무리

지금까지 HTML 태그를 활용해 공백을 추가하는 세 가지 방법을 알아보았습니다. 정리하면 다음과 같습니다:

 : 단어 사이 등 특정 위치에 여분의 공백이 필요할 때
<pre>: 들여쓰기와 줄바꿈을 포함해 텍스트 형식을 그대로 유지해야 할 때
 : 줄 사이에 간격을 만들거나 강제로 줄을 바꾸고 싶을 때

HTML을 처음 배우는 분이라면 「Learn HTML: 하이퍼텍스트 마크업 언어 학습 가이드」를 참고하거나, 「HTML을 배우는 데 걸리는 시간은 얼마나 될까?」 관련 글도 함께 읽어보시길 추천합니다.

HTML에서 공백 추가하기: , pre, br 태그 활용법 총정리

공백을 추가하는 HTML 태그

1. Non-Breaking Space( ) 문자

2. Preformatted Text(<pre>) 요소

3. Line Break(<br>) 태그

마무리