실용 가이드 · 웹과 코드
HTML 공백과 들여쓰기: 정렬 후 확인할 점
공백이 페이지에 영향을 주는 경우와 HTML 조각을 정렬한 뒤 점검할 항목을 예제로 알아봅니다.
작성 Puffinmint · 업데이트
태그 사이 공백이 중요한 이유
들여쓰기는 읽기 편하게 하지만 텍스트 노드도 문서의 일부입니다. 인라인 요소 사이 공백은 단어나 이미지를 구분할 수 있습니다.
복사본을 정리하고 텍스트 유지하기
HTML 복사본으로 작업하세요. 속성과 pre, script, style, textarea, title을 보존하고 블록 사이 공백을 조절합니다. JSX를 변환하거나 문서를 검증하지 않습니다.
-
입력값
<div><p>A <strong>B</strong> C</p></div> -
계산 과정
방법 선택과 적용
-
결과
<div> <p>A <strong>B</strong> C</p> </div>
이 단계 직접 해보기
HTML 정렬 및 포매터
이 가이드에서 예제를 불러와 도구를 실행하고 입력을 바꾸며 결과를 비교하세요. 두 번째 실험은 다른 조건을 확인합니다.
재현 가능한 예제
strong 요소를 포함한 문장에서 전후 공백은 단어를 구분하므로 유지하세요. pre 내부의 줄바꿈과 앞 공백도 외부 요소를 들여써도 그대로 보존해야 합니다.
줄 바꿈 없는 공백 유지하기
두 번째 예제는 두 div 사이에 U+00A0 공백이 있습니다. 정리한 결과를 복사해도 해당 공백이 남아야 합니다. HTML 미리보기나 스크립트 실행은 제공하지 않습니다.
결과
값을 입력하면 결과를 확인할 수 있습니다.
인라인 공백과 pre 내용
strong 요소를 포함한 문장에서 전후 공백은 단어를 구분하므로 유지하세요. pre 내부의 줄바꿈과 앞 공백도 외부 요소를 들여써도 그대로 보존해야 합니다.
사용 사례
- 입력값
<div><p>A <strong>B</strong> C</p></div>- 결과
<div> <p>A <strong>B</strong> C</p> </div>
프로젝트에서 소스 확인하기
프로젝트 CSS, 특히 white-space와 템플릿 테스트로 확인하세요. 정렬됐다고 태그 중첩이 올바른 것은 아닙니다. 결과는 텍스트로 표시하며 HTML과 스크립트를 실행하지 않습니다.
실제 사례를 측정한 값이 아닌 예제 입력값입니다. 실제 도구와 같은 계산 엔진을 사용합니다. 결과를 가이드의 계산 과정과 비교한 뒤 확인 항목을 체크하세요.
| 항목 | 값 |
|---|---|
| 이 도구의 제한은 무엇인가요? | 100,000자와 10,000토큰 이하입니다. HTML 전용이며 검증과 JSX 변환은 없습니다. 블록 사이 공백은 바뀔 수 있습니다. |
| 처리 및 개인정보 | 입력값과 결과는 브라우저에서 처리되며 서버로 전송되지 않습니다. 집계 통계가 활성화된 경우 도구 이름과 처리 성공 여부만 기록하며 내용은 기록하지 않습니다. |