웹 페이지에서 공백이 있는 문장 부호를 앞 단어와 붙여 두려면 일반 공백을 줄 바꿈 없는 공백으로 바꾸거나, 두 요소를 작은 CSS 줄 바꿈 방지 span으로 감싸세요. Mac에서 로컬 HTML 테스트를 사용해 다양한 너비에서 결과를 확인하세요.

이 안내서는 Mac에서 페이지의 텍스트나 HTML을 편집하는 사람을 위한 것입니다. 예를 들어 폭이 좁은 카드에 Beta : 같은 추상적인 타일 레이블이 있다고 가정해 보겠습니다. 눈에 보이는 공백은 유지하면서 콜론이 혼자 다음 줄로 넘어가지 않도록 하는 것이 목표입니다. 예시에서도 의도적으로 이 공백을 유지합니다.

어떤 해결 방법을 선택해야 할까요?

먼저 간격 규칙을 텍스트 자체에 둘지, 페이지의 표현 방식에 둘지 결정하세요. 유니코드에서는 U+00A0 NO-BREAK SPACE를 일반 공백에 대응하는 줄 바꿈 없는 공백으로 정의하고, U+202F NARROW NO-BREAK SPACE를 더 좁은 변형으로 정의합니다. 이 두 문자는 눈에 보이는 간격을 서로 다르게 만들 수 있습니다. Unicode Standard, Chapter 6

편집 상황 권장하는 첫 번째 방법 확인할 사항
텍스트를 바꿀 수 있고 일반 너비의 공백을 원함 일반 공백을 U+00A0으로 바꾸기 저장된 텍스트에 줄 바꿈 없는 문자가 남아 있는지 확인
의도적으로 더 좁은 공백을 원함 U+202F 사용 페이지에서 실제로 사용하는 글꼴로 보기에 적절한지 확인
텍스트에는 일반 공백을 그대로 두고 싶음 단어와 두 기호를 모두 포함하는 span에 white-space: nowrap 적용 span에 단어, 공백, 문장 부호가 모두 포함되어 있는지 확인
페이지를 보기만 할 수 있음 편집 가능한 원본에서 수정하거나 관리자에게 요청 로컬에서 실험해도 원본 페이지는 바뀌지 않음

HTML 소스에서는 Beta :라고 작성하세요. WHATWG 문자 참조 표에 따르면  는 U+00A0에 해당합니다. 기존 공백을 바꾸세요. 참조 앞에 일반 공백을 남겨 두지 마세요. HTML Standard: Named character references

표현 규칙을 사용하려면 Beta :를 인라인 span 안에 넣고 해당 span에 white-space: nowrap을 적용하세요. 주변 단락은 평소처럼 줄 바꿈이 가능하도록 두세요. MDN은 white-space이 공백 처리와 줄 바꿈 모두를 제어한다고 설명합니다. MDN: white-space

실제로 고려할 점은 어느 범위의 텍스트를 함께 유지해야 하는지입니다. 이 예시에서는 Beta :만 보호하세요. Tile Alpha Beta : Next tile을 통째로 보호하면 레이블 전체를 불필요하게 제한하게 됩니다. 의도한 관계를 표현하는 데 필요한 최소 단위부터 적용하세요.

TextEdit으로 로컬 테스트하는 방법

기존 페이지를 바꾸기 전에 별도의 테스트 파일을 만드세요. Apple은 TextEdit에서 일반 텍스트 모드로 HTML 파일을 만들고 .html 확장자로 저장한 다음, 메시지가 표시되면 Use .html을 선택하는 방법을 안내합니다. Mac의 TextEdit에서 HTML 문서 작업하기

  1. TextEdit을 열고 File > New를 선택합니다.
  2. Format > Make Plain Text를 선택합니다.
  3. 아래의 전체 예시를 붙여 넣습니다.
  4. File > Save를 선택하고 파일 이름을 punctuation-test.html로 지정합니다.
  5. 메시지가 표시되면 Use .html을 선택합니다.
  6. Safari에서 File > Open File을 사용해 저장한 파일을 엽니다.

이 파일은 완전한 독립형 HTML 문서입니다. 라이브러리, 설치, 네트워크 연결이 필요하지 않습니다. 세 카드에는 동일한 예시 텍스트가 들어 있으며, 각 카드에서 콜론 앞 공백을 다르게 처리합니다.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

파서로 예시의 문자 참조 변환을 확인한 결과, &nbsp;는 U+00A0으로 변환됩니다. 준비 과정에서는 브라우저 렌더링을 실행하지 않았습니다. Mac 브라우저에서 레이아웃을 확인할 때는 아래 비교 방법을 사용하세요.

스크린샷 하나가 아니라 경계가 생기는 지점을 비교하세요

예시의 14ch 너비는 시작점일 뿐, 줄 바꿈이 일어나는 기준점으로 보장된 값은 아닙니다. 값을 10ch로 바꾸고 저장한 뒤 새로 고침하고, 다음에는 18ch도 시도해 보세요. 일반 공백을 사용한 카드에서 콜론이 Beta와 분리되는 너비를 찾아보세요. 보호된 두 버전에서는 다른 단어는 이동하더라도 Beta와 콜론은 함께 유지되는 것이 의도한 결과입니다.

처음에 세 카드가 모두 똑같아 보여도, 이는 공백 처리 방식이 같다는 뜻이 아닙니다. 두 요소가 들어갈 공간이 충분할 수 있습니다. 해당 경계가 줄 끝에 놓일 때까지 너비를 조절한 다음, 텍스트를 확대해 다시 확인하세요.

TextEdit에서 파일을 다시 열 때는 File > Open을 사용하고 파일을 선택한 다음 Show Options를 선택하세요. 필요한 경우 Ignore rich text commands도 선택합니다. Apple은 Display HTML files as HTML code instead of formatted text 설정도 안내합니다. 이 옵션을 사용하면 소스를 직접 편집할 수 있습니다. Apple의 TextEdit HTML 안내

줄 바꿈 없는 공백이 여전히 효과가 없는 이유는 무엇인가요?

줄 바꿈 없는 문자는 브라우저의 텍스트 흐름 규칙 안에서 작동합니다. 눈에 보이지 않는 문자를 더 추가하기 전에 문제가 콘텐츠, 우선 적용되는 CSS 규칙, 레이아웃 경계 중 어디에서 비롯되는지 확인하세요.

페이지에 참조 문자열이 그대로 표시됨

페이지에 &nbsp;라는 문자가 그대로 보인다면, 입력 내용이 HTML 문자 참조로 해석되지 않고 일반 텍스트로 처리된 것입니다. HTML 소스 입력란에는 Beta&nbsp;:라고 입력하세요. 일반 텍스트 입력란에는 실제 줄 바꿈 없는 문자를 삽입하세요.

JavaScript에서도 같은 차이가 있습니다. textContent을 통해 문자열을 지정하면 텍스트가 만들어지며, HTML 참조를 파싱하지 않습니다. JavaScript 문자열에는 "Beta\u00A0:"처럼 해당 문자를 넣을 수 있습니다. 또한 공백 하나를 수정하려고 서식이 적용된 단락 전체에 textContent을 지정하지 마세요. 기존 자식 요소가 대체됩니다. MDN: Node.textContent

CSS 규칙이 지나치게 자유로운 줄 바꿈을 허용함

line-break: anywhere가 있는지 확인하세요. MDN은 이 값이 글루 및 단어 연결자 클래스에 따른 금지 규칙을 무시하고, 타이포그래피 문자 단위의 경계를 기준으로 줄 바꿈을 허용한다고 설명합니다. 따라서 줄 바꿈 없는 문자를 추가해도 이 설정을 무조건 덮어쓸 수는 없습니다. MDN: line-break

overflow-wrap도 확인하세요. 이 속성의 anywhere 값은 넘침을 피해야 할 때 원래는 줄 바꿈할 수 없는 문자열도 분리할 수 있게 합니다. 이러한 비상 동작은 공백에서 일반적으로 줄 바꿈하는 것과 다릅니다. MDN: overflow-wrap

표현상 짧은 한 쌍 전체를 유지해야 한다면 로컬 no-wrap span을 사용하세요. 특히 페이지 스타일시트에 더 구체적인 선택자가 있는 경우, 해당 span에 실제로 적용되는 규칙을 확인하세요. 다른 긴 텍스트의 기존 줄 바꿈 동작을 유지할 수 있도록 수정 범위를 좁게 잡으세요.

문장 부호가 별도의 레이아웃 상자에 들어 있음

콜론이 일반 인라인 텍스트인지, 아니면 inline-block 또는 다른 원자적 인라인 요소 안에 있는지 확인하세요. W3C는 원자적 인라인 요소 주변의 특수 줄 바꿈 지점을 명시하며, 인접한 줄 바꿈 없는 공백과 관련된 예외도 포함합니다. 이런 상자 옆에 삽입한 공백은 하나의 연속된 텍스트 실행 안에 있는 공백과 같지 않습니다. CSS Text Module Level 3: Line Breaking Details

이처럼 간단한 레이블에서는 단어, 공백, 문장 부호를 하나의 일반 인라인 span에 넣으세요. 자동 줄 바꿈을 원한다면 이들 사이에 있는 명시적인 <br>을 제거하세요. nowrap는 강제 줄 바꿈을 없애지 않고 부드러운 줄 바꿈을 억제합니다. CSS Text Module Level 3: White Space and Wrapping

브라우저의 글자 모양을 유지하고 좁은 레이아웃을 처리하려면 어떻게 해야 하나요?

단어를 글자 단위로 나누지 말고 온전하게 유지하세요. W3C는 인라인 경계를 넘어 글자 모양 처리를 이어가야 하는 경우와, 패딩, 테두리, 정렬 같은 요소가 끼어들어 처리를 끊어야 하는 경우를 정의합니다. 일반 인라인 span을 사용하면 불필요한 서식 경계가 생기지 않습니다. CSS Text Module Level 3: Shaping Across Element Boundaries

물리적인 제약은 여전히 있습니다. 보호된 한 쌍이 들어가려면 가로 공간이 충분해야 합니다. 컨테이너가 Beta :보다 좁아지면 두 요소를 함께 유지할 때 넘칠 수 있습니다. 이 상황을 의도적으로 테스트하세요. 그런 다음 영향을 받는 텍스트를 숨기는 대신 카드 너비를 늘리거나 레이블을 짧게 줄이는 등 레이아웃을 조정하세요. 줄 바꿈 방지 동작은 W3C의 white-space 정의에 설명되어 있습니다.

줄 바꿈 라이브러리가 필요한가요?

일반적인 브라우저 페이지에서는 이 작업에 라이브러리가 필요하지 않습니다. linebreak이라는 라이브러리는 유니코드 줄 바꿈 기회를 계산합니다. 설명서에서는 실제 줄 선택은 사용 가능한 너비와 표시 텍스트 크기를 아는 소프트웨어의 몫이라고 명시합니다. 현재 README에는 유니코드 버전 13 지원이라고 적혀 있습니다. foliojs/linebreak 문서

다른 도구에서 이미 이 라이브러리를 사용하고 있다면 이 구분이 중요합니다. 가능한 줄 바꿈 지점 목록만으로는 브라우저가 글자 모양을 적용한 텍스트를 어디서 줄 바꿈할지 알 수 없습니다. 이 페이지 편집 작업에서는 글꼴 모양 처리와 최종 줄 레이아웃을 브라우저에 맡기고, 문자나 범위를 좁힌 CSS로 원하는 제약을 표현하세요.

수정 사항을 적용하기 전에 세 가지를 확인하세요. 공백이 계속 보이는지, 줄 끝 가까이에서 단어와 문장 부호가 함께 유지되는지, 주변 텍스트는 여전히 줄 바꿈이 가능한지 확인합니다. 텍스트 자체에 이 관계를 담으려면 줄 바꿈 없는 공백을 사용하고, 표현 방식에 적용하려면 범위를 좁힌 no-wrap span을 사용하세요. 실제 페이지를 유용한 범위에서 가장 좁은 너비로 다시 확인하세요.

출처