HTML 공백 처리 방법

문제 상황

다음 두개의 코드가 있었다.

<body>
  <body>
    <div class="box">Content</div>
  </body>
</body>

.box::before {
  content: "앞!";
}

<body>
  <div class="box">
    Content
  </div>
</body>

.box::before {
  content: "앞!";
}

HTML 형식만 다른데 공백의 유무가 차이가 있었다.

왜 그런지 이유가 궁금해서 이 글을 쓰게 됐다.

왜 이러한 공백 차이가 나타나게 된 것일까?

그 이유는 HTML 공백 처리규칙을 적용했을 때 공백이 남게되는 유무의 차이였다.

한번 개행, 탭 , 스페이스가 처리되는 과정을 살펴보자.

왜 공백이 생기는지 궁금한 코드는 다음과 같다.

<div class="box">
  Content
</div>

여기서 탭, 개행, 스페이스는 다음 특수문자로 표시한다.

⇥ 은 탭 , ◦ 은 스페이스, ⏎ 는 엔터를 의미합니다.

또한 여기에 가상요소까지 붙는다면 다음과 같은 HTML 구조를 갖게 될 것이다.

<div class="box">⏎
<가상요소>앞!</가상요소>
⇥⇥Content⏎
</div>

위 코드에 블록 공백 처리 규칙이 적용되면 다음과 같다.

<block>⏎
<가상요소>앞!</가상요소>
⇥⇥Content⏎
</block>

이제 적용된 블록 공백 처리 규칙 내부는 인라인 공백 처리 규칙으로 처리된다.

1. 줄바꿈 바로 앞과 뒤의 모든 공백과 탭은 무시된다.

<block>⏎
<가상요소>앞!</가상요소>
⇥⇥Content⏎
</block>

2. 남은 모든 탭은 공백 문자로 처리된다.

<block>⏎
<가상요소>앞!</가상요소>
◦◦Content⏎
</block>

3. 줄바꿈이 공백으로 변환된다.

<block>◦<가상요소>앞!</가상요소>◦◦Content◦</block>

4. 다른 공백 바로뒤에 오는 모든 공백은 무시된다.

<block>◦<가상요소>앞!</가상요소>◦Content◦</block>

5. 요소의 시작과 끝에 있는 공백은 제거된다.

<block><가상요소>앞!</가상요소>◦Content</block>

위와 같은 흐름으로 결국 공백이 생기게 되는 것이다.

그럼 공백이 안생기는 코드는 어떤 흐름을 가질까? (궁금하시면 클릭)

궁금한 코드

<div class="box">Content</div>

가상요소가 붙는다면?

<div class="box"><가상요소>앞!</가상요소>Content</div>

위 코드에 블록 공백 처리 규칙이 적용되면 다음과 같다.

<block><가상요소>앞!</가상요소>Content</block>

인라인 규칙을 적용해도 결국 다음 코드와 같을 것 이다.

<block><가상요소>앞!</가상요소>Content</block>

결국 이러한 이유로 해당 코드에는 공백이 발생하지 않게된다.

최근 이전에 같이 공부하시던 형님(나이는 동갑이지만)과 카톡으로 근황에 대해 주고 받았는데, 그 분께서 '공부할 것은 무한대'다 라고 우스개 소리로 이야기 해주신 부분이 참 와닿는 오늘이다.

공부할게 너무 많다. 깔깔..

메타태그와 오픈 그래프, 트위터 카드 (1)	2023.05.08
Stacking Order(쌓임 순서), Stacking Context(쌓임 맥락) (0)	2023.05.05
유니코드란 무엇일까? (UTF-8과 EUC-KR 비교) (1)	2023.04.14