HTML을 처음 배우는 사람이라면 한 번쯤 이런 경험을 하게 됩니다.
코드에서 여러 번 스페이스를 입력했는데도 웹페이지에서는 공백이 하나만 표시되는 경우입니다.
예를 들어 HTML 코드에서 스페이스를 여러 번 입력하거나 줄을 여러 줄 띄워도 실제 화면에서는 그대로 반영되지 않는 경우가 많습니다.
이 현상은 HTML의 기본 동작 방식 때문에 발생합니다.
HTML은 문서를 표현하는 마크업 언어이기 때문에 텍스트의 공백을 그대로 표현하기보다는 구조를 중심으로 해석합니다.
따라서 여러 개의 공백이나 줄바꿈을 하나의 공백으로 처리하는 특징이 있습니다.
이번 글에서는 HTML에서 공백이 적용되지 않는 이유와 함께 공백을 표현하는 방법, 그리고 실무에서 사용하는 해결 방법까지 정리해보겠습니다.
HTML에서 공백이 무시되는 이유
HTML에서는 기본적으로 여러 개의 공백을 하나의 공백으로 처리합니다.
이를 Whitespace Collapsing이라고 합니다. 브라우저는 HTML 코드를 읽을 때 연속된 스페이스, 탭, 줄바꿈 등을 하나의 공백으로 합쳐서 표시합니다.
예를 들어 다음과 같은 코드가 있다고 가정해 보겠습니다.
<p>Hello World</p>
위 코드에서는 Hello와 World 사이에 여러 개의 공백이 있지만 실제 화면에서는 다음과 같이 표시됩니다.
Hello World
브라우저는 연속된 공백을 하나의 공백으로 처리하기 때문입니다.
줄바꿈이 적용되지 않는 이유
HTML 코드에서는 줄을 여러 번 띄워도 실제 화면에서는 줄바꿈이 적용되지 않는 경우가 많습니다.
<p>
Hello
World
</p>
위 코드 역시 화면에서는 다음과 같이 표시됩니다.
Hello World
HTML에서는 줄바꿈도 공백으로 처리되기 때문에 여러 줄을 입력해도 하나의 공백으로 합쳐집니다.
HTML에서 공백을 표현하는 방법
공백이 자동으로 줄어드는 특성 때문에 HTML에서는 공백을 표현하기 위한 다양한 방법이 존재합니다.
nbsp; 사용하기
HTML에서 공백을 표현하는 가장 대표적인 방법은 nbsp;를 사용하는 것입니다.
이것은 "Non-breaking space"의 약자로 줄바꿈되지 않는 공백을 의미합니다.
<p>Hello nbsp;nbsp;nbsp; World</p>
이 코드를 사용하면 Hello와 World 사이에 원하는 만큼 공백을 만들 수 있습니다.
br태그 사용하기
줄바꿈을 하고 싶을 때는 br태그를 사용할 수 있습니다.
<p>
Hello <br>
World
</p>
이렇게 작성하면 다음과 같이 표시됩니다.
Hello
World
CSS white-space 속성 사용하기
CSS를 사용하면 공백 처리 방식을 변경할 수도 있습니다.
대표적으로 사용하는 속성이 바로 white-space입니다.
p { white-space: pre; }
white-space 속성을 사용하면 HTML에서 작성한 공백과 줄바꿈을 그대로 표현할 수 있습니다.
HTML에서 공백 대신 CSS를 사용하는 이유
웹페이지를 제작할 때 공백을 표현하기 위해 여러 개의 스페이스나 nbsp;를 사용하는 것은 좋은 방법이 아닐 수 있습니다.
레이아웃을 조정할 때는 CSS를 사용하는 것이 훨씬 효율적입니다.
예를 들어 텍스트 간격을 조정할 때는 다음과 같은 CSS 속성을 사용할 수 있습니다.
- margin
- padding
- letter-spacing
- word-spacing
이러한 방법을 사용하면 HTML 구조를 깔끔하게 유지하면서도 원하는 디자인을 만들 수 있습니다.
HTML 공백 처리의 핵심 정리
지금까지 설명한 내용을 정리하면 다음과 같습니다.
- HTML에서는 여러 개의 공백을 하나의 공백으로 처리한다.
- 줄바꿈 역시 하나의 공백으로 인식된다.
- 공백을 표현하려면 nbsp;를 사용할 수 있다.
- 줄바꿈은 br 태그를 사용한다.
- 공백을 그대로 유지하려면 CSS를 활용하는 것이 효율적이다.
마무리
HTML에서 공백이 적용되지 않는 이유는 브라우저가 연속된 공백과 줄바꿈을 하나의 공백으로 처리하기 때문입니다.
이는 웹 문서 구조를 단순하게 유지하기 위한 HTML의 기본 동작 방식입니다.
공백을 정확하게 표현해야 하는 경우에는 ‘nbsp;’, br태그 또는 CSS white-space 속성을 활용할 수 있습니다. 또한 레이아웃 조정이 목적이라면 HTML 공백 대신 CSS를 사용하는 것이 더 좋은 방법입니다.
HTML의 공백 처리 방식을 이해하면 코드 작성 과정에서 발생하는 많은 혼란을 줄일 수 있습니다. 앞으로 웹페이지를 작성할 때 공백이 왜 적용되지 않는지 이해하고 상황에 맞는 방법을 활용해 보시기 바랍니다.