편집한 HTML에는 줄바꿈이 있는데 브라우저에서는 문장이 한 줄로 이어질 수 있습니다. 이때 파일의 줄바꿈 문자가 사라진 것인지 CSS가 화면에서 공백을 합친 것인지 구분해야 합니다. 저장한 텍스트와 렌더링된 화면은 서로 다른 표현이라, 눈에 보이는 줄 수만으로 원문 손상을 판단하지 않습니다.
먼저 구분할 조건
HTML의 일반적인 white-space: normal에서는 여러 공백과 줄바꿈이 화면의 공백으로 합쳐질 수 있습니다. pre-line은 줄바꿈을 유지하되 다른 공백의 처리 조건은 다릅니다. pre-wrap·nowrap처럼 다른 값도 목적에 맞는 차이가 있습니다. 소스 편집기에서 Enter를 누르는 것과 문단·명시적 줄바꿈 요소를 만드는 작업도 같지 않습니다. 본문의 구조와 시각적 배치를 어떤 방식으로 표현할지 먼저 정해야 합니다.
직접 확인한 예제와 방법
독립 HTML 두 구역에 같은 문자열 A, B, C와 줄바꿈 두 개를 넣었습니다. 글꼴의 줄 높이는 32px로 고정하고, 한 구역은 normal, 다른 구역은 pre-line을 적용했습니다. 브라우저 1280px 화면에서 normal의 높이는 32px·표시 텍스트는 A B C였고 pre-line은 96px·세 줄로 보였습니다. 원문의 textContent에는 A\nB\nC가 남아 있었습니다. 실제 링크나 계정 없이 브라우저의 DOM와 화면 배치를 확인한 시험입니다.
| 확인 항목 | 관찰 결과 |
|---|---|
| 원문 | A\nB\nC |
| white-space: normal | 1줄 / 32px |
| white-space: pre-line | 3줄 / 96px |
결과를 해석하는 기준
이 결과에서 normal의 한 줄 표시는 원문이 삭제됐다는 증거가 아닙니다. 같은 문자열이 다른 CSS 조건에서 다르게 배치된 것입니다. 저장 값부터 바꾸기 전에 해당 요소와 상위 스타일의 공백 처리 규칙을 확인하면 중복 줄바꿈이나 불필요한 태그를 넣는 일을 줄일 수 있습니다.
textContent와 innerText도 목적이 다릅니다. 전자는 저장된 문자 내용을 확인할 때, 후자는 렌더링된 텍스트를 읽을 때 다른 결과를 줄 수 있습니다. 본문 검사에서 어느 값을 비교했는지 명시해야 합니다. 실제 페이지는 숨김 요소·화면 너비·글꼴·편집기 변환을 함께 사용하므로 이 두 속성의 차이를 모든 오류의 단일 원인으로 일반화하지 않습니다.
메모와 긴 코드는 서로 다른 공백 요구를 갖습니다
작성 예제로 메모의 줄바꿈은 살리고 긴 코드 한 줄은 가로로 읽어야 하는 화면을 생각해 볼 수 있습니다. 같은 white-space 값을 전역 적용하면 한쪽 요구가 맞아도 다른 부분이 넘칠 수 있습니다. 요소의 의미와 스크롤·줄바꿈 목적을 나눠 적용하세요.
| 상황 | 확인할 질문 | 먼저 할 일 |
|---|---|---|
| 메모의 Enter를 보존 | 문단과 필드 줄바꿈 중 무엇인가 | 필요 범위에서 pre-line 등 비교 |
| 긴 코드 문자열 | 줄을 나눠도 의미가 유지되나 | 가로 스크롤·줄바꿈을 선택 |
| 복사 값과 표시 값이 다름 | 어느 API로 읽은 값인가 | textContent와 innerText 구분 |
스타일 변경 뒤 화면뿐 아니라 복사 결과도 확인하면 좋습니다. 사용자에게 보여 준 문장과 외부로 복사한 문자열이 어떤 목적의 값인지 설명할 수 있어야 합니다.
내 자료에서 확인할 순서
- 문제가 있는 공개 페이지와 저장 원문을 보존하고 줄바꿈이 어느 단계에서 달라지는지 기록합니다. 관리자 편집 화면만 보고 끝내지 않습니다.
- 원문에 실제 줄바꿈이 있는지, 문단 요소나 br 같은 구조를 사용했는지 확인합니다. 단순 파일 줄 수와 HTML 문단 수를 나눕니다.
- 해당 요소에 적용된 white-space 값과 상위 스타일을 확인합니다. 편집기나 테마가 다른 값을 덮어쓸 수 있습니다.
- 작은 사본에서 normal·pre-line·pre-wrap처럼 필요한 조건을 비교합니다. 문장과 공백 보존 요구를 먼저 정하고 값을 고릅니다.
- 좁은 화면에서도 긴 문장이 페이지 밖으로 넘치지 않는지 확인합니다. 줄바꿈을 살리는 작업과 단어를 화면에 맞춰 나누는 작업도 별도입니다.
- 변경 뒤 실제 공개 HTML와 브라우저 화면을 다시 비교합니다. 스타일은 맞는데 저장 값이 달라지면 편집·변환·캐시 경로를 따로 확인합니다.
잘못 바꾸었거나 확인이 어려울 때
줄바꿈을 늘려 보이게 하는 임시 수정은 화면 너비가 바뀌면 다시 깨질 수 있습니다. nowrap을 전역 적용하거나 모든 공백을 보존하면 긴 코드·표가 페이지 밖으로 나갈 수 있습니다. 오류가 생긴 범위에만 필요한 스타일을 적용하고, 문단의 의미를 CSS 배치로만 만들지 않는 편이 좋습니다.
정상 완료 기준
정상 완료는 원문 문자열이 의도대로 유지되고, 문단과 화면 줄바꿈이 목적에 맞으며, 데스크톱과 좁은 화면에서 읽을 수 있는 상태입니다. 공개 실험에서는 같은 A·B·C 원문을 유지한 채 normal 한 줄과 pre-line 세 줄의 차이를 확인할 수 있어야 합니다. 문자열 동일성과 화면 동일성은 각각 따로 판단합니다.
같은 예제를 다시 확인할 자료
이 실험은 고정 줄 높이·작은 문자열을 사용하는 독립 HTML입니다. WordPress 편집기나 모든 CSS 상속 조합을 실행한 시험은 아닙니다. 실제 테마의 스타일과 저장된 HTML를 같은 방법으로 확인해야 합니다.
- white-space-demo.html (1107 bytes)
자료는 비민감 가상 예제입니다. 손상·불일치라고 표시한 파일은 차이를 확인하는 실험용이며 업무 원본으로 사용하지 않습니다. 파일 크기·SHA-256 목록으로 내려받은 원본을 확인할 수 있습니다.
화면 이동이 안 되는 문제도 저장값과 공개 출력의 차이를 나눠야 합니다. 본문 위치 링크와 ID 실험에서 확인 지점을 비교할 수 있습니다.