HTML 띄어쓰기 안될 때? 공백 여러 개 넣는 방법

HTML 코드를 작성할 때, 스페이스바를 아무리 많이 눌러도 웹 페이지에는 공백이 하나만 표시되는 경험, 다들 있으시죠? 의도적으로 여러 칸의 띄어쓰기를 넣고 싶을 때는 어떻게 해야 할까요?

이 글에서는 HTML 문서에서 원하는 만큼의 공백을 삽입하는 방법을 알아보겠습니다.

1. HTML 공백 처리의 기본 원칙

웹 브라우저는 HTML 코드를 해석하여 화면에 그릴 때, 코드 내에 있는 연속된 여러 개의 공백(스페이스, 탭, 줄바꿈 등)을 기본적으로 하나의 공백으로 취급합니다. 이를 '공백 병합' 또는 '공백 축소(Whitespace Collapsing)'라고 부릅니다.

이러한 원칙 덕분에 우리는 HTML 코드를 작성할 때 가독성을 위해 자유롭게 들여쓰기나 줄바꿈을 사용해도 실제 웹 페이지의 레이아웃에는 큰 영향을 주지 않습니다.

<p>
  HTML        코드를
  작성할 때, 이렇게      공백을 많이 넣어도...
</p>

위 코드는 브라우저에서 아래와 같이 하나의 공백으로 처리되어 보입니다.

HTML 코드를 작성할 때, 이렇게 공백을 많이 넣어도...

2. 공백 여러 개 넣는법: &nbsp; 활용하기

그렇다면 의도적으로 여러 개의 공백을 표현하고 싶을 때는 어떻게 해야 할까요? 바로 HTML 엔티티(Entity) 코드를 사용하는 것입니다. 여러 공백을 표현하는 가장 대표적인 방법은 &nbsp; 엔티티를 사용하는 것입니다.

&nbsp;는 'Non-breaking Space'의 약자로, 줄바꿈되지 않는 공백을 의미합니다. 브라우저는 이 코드를 만나면 공백 축소 규칙을 적용하지 않고, 화면에 보이는 하나의 공백 문자로 그대로 표시합니다.

사용법은 간단합니다. 화면에 표시하고 싶은 공백의 개수만큼 &nbsp; 코드를 해당 위치에 넣어주면 됩니다.

예시:

<!-- 일반적인 공백 사용 (하나의 공백으로 표시됨) -->
<p>하나 둘 셋</p>
결과:
하나 둘 셋

<!-- &nbsp; 를 사용하여 여러 공백 표현 -->
<p>하나&nbsp;&nbsp;&nbsp;둘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;셋</p> 
결과:
하나   둘      셋

위 예시에서 두 번째 문단은 '하나'와 '둘' 사이에 3개의 공백, '둘'과 '셋' 사이에 6개의 공백이 실제로 화면에 표시됩니다.

다른 방법들도 있을까?

&nbsp;는 특정 위치에 정확한 개수의 공백을 넣을 때 유용하지만, 다음과 같은 방법들도 고려해볼 수 있습니다.

  1. <pre> 태그 사용: <pre> 태그로 감싸진 내용은 HTML 소스 코드에 입력된 공백과 줄바꿈을 그대로 유지하여 보여줍니다. 주로 코드 예제 등을 표시할 때 유용합니다.

    <pre> 태그 예시:

    <pre>
여기에 입력한   공백과
줄바꿈은        그대로
  표시됩니다.
</pre>

    위 코드는 브라우저에서 다음과 같이 표시됩니다.

    여기에 입력한   공백과
줄바꿈은        그대로
  표시됩니다.

  2. CSS white-space 속성: CSS의 white-space 속성을 사용하면 특정 HTML 요소 내부의 공백 처리 방식을 더 유연하게 제어할 수 있습니다. 예를 들어 white-space: pre-wrap; 스타일을 적용하면, 소스 코드의 공백과 줄바꿈을 유지하면서 요소의 너비를 넘어갈 경우 자동으로 줄바꿈을 해줍니다.

    CSS white-space 속성 예시:

    <style>
  .preserve-space {
    white-space: pre-wrap; /* 공백/줄바꿈 유지, 자동 줄바꿈 허용 */
    border: 1px solid #ccc; /* 영역 확인을 위한 테두리 */
    width: 200px; /* 너비 제한 */
  }
</style>

<p class="preserve-space">
  이 요소 안의   공백과
줄바꿈은       CSS에 의해 유지됩니다. 하지만 요소의 너비가 부족하면 자동으로 줄바꿈이 됩니다.
</p>

    위 코드는 <p> 태그임에도 불구하고 .preserve-space 클래스에 적용된 CSS white-space: pre-wrap; 속성 때문에 내부의 공백과 줄바꿈이 유지되며, 너비(200px)를 넘어가면 자동으로 줄바꿈됩니다.

마무리

HTML에서 여러 개의 공백을 표현하기 위해 단순히 스페이스바를 연타하는 것은 효과가 없습니다. 웹 브라우저의 공백 축소 원칙 때문이죠. 의도적으로 여러 공백을 넣고 싶다면 &nbsp; 엔티티를 활용하는 것이 가장 일반적이고 직접적인 방법입니다. 이제 &nbsp;를 사용하여 원하는 위치에 원하는 만큼의 공백을 자유롭게 표현해보세요!