<wbr> 태그의 정의 및 사용법

<wbr> 태그는 줄 바꿈 기회를 나타냅니다.

'줄 바꿈 기회'란?

<wbr> 태그는 Word BReak Opportunity(단어의 줄바꿈 기회)의 줄임말로,
CSS로 설정된 텍스트의 줄바꿈 규칙 내에서, 콘텐츠 작성자가 직접 원하는 '줄바꿈 후보 지점'을 나타내어 브라우저에게 줄바꿈 기회의 힌트를 제공하는 태그입니다.

즉, 텍스트가 텍스트 박스의 끝에 도달했을 때 줄바꿈을 CSS로 설정된 브라우저의 판단 규칙이 아니라, 사람의 시각적 의미 기준으로 다루고 싶을 때 사용하는 겁니다.

  • 반드시 줄을 반드시 바꾸라는 뜻은 아닙니다.
  • 텍스트가 텍스트 박스의 끝에 도달했을 때 오버플로(overflow, 경계를 넘어섬)가 시작하는 시점에서 브라우저가 필요하다고 판단하면, <wbr> 태그 위치에서 줄을 바꿀 수 있게 됩니다.
  • 이 태그는 화면에 표시되지 않습니다.
  • 긴 단어나 URL, 코드 등에서 줄이 어색하게 끊기는 것을 막기 위해 사용됩니다.
  • 검색엔진이나 시각장애인을 위한 스크린 리더 등에서도 의미를 부여하지 않습니다.

예를 들면 이런 느낌입니다.

HTML 
정말<wbr>길고<wbr>긴<wbr>텍스트입니다.
  1. 🤖 브라우저: “음… 이 단어 너무 길어. 어디서 끊지…?”
  2. 👤 콘텐츠 작성자: “내가 몇 군데 추천해 줄게!”
  3. 🤖 브라우저: “오케이, 그럼 최적의 타이밍에 참고해서 끊을게!”

활용 예제

아래는 <wbr> 태그를 활용해 긴 문자열에서 사람의 시각적 의미 기준으로 자연스러운 줄바꿈 기회를 제공하는 예제입니다.

HTML 
<div style="width: 9em; border: 2px dashed silver;">
    <p>user.name@example.co.kr</p>
    <p>user.name<wbr>@example.co.kr</p> <!-- 브라우저가 @ 앞에서 줄바꿈할 수 있도록 힌트 제공 -->
</div>
실제 적용된 모습

사용 팁 💡

  • 긴 URL, 이메일 주소, 긴 명칭 등 줄바꿈이 어려운 긴 텍스트나 단어에 유용합니다.
  • 반응형 웹 디자인에서 긴 텍스트나 단어로 인해 레이아웃이 깨지는 현상을 방지할 수 있습니다.

주의하세요!
<wbr> 태그는 <pre> 태그처럼 줄바꿈과 공백을 그대로 유지하는 환경에서는 작동하지 않습니다.
(또는, CSS의 white-space: pre가 설정된 요소 내에서도 마찬가지입니다.)

참고사항

<wbr> 태그는 단순한 줄바꿈 힌트만을 제공합니다.
다른 HTML 태그나 텍스트 방향 속성 등과 결합될 경우에도 별도의 시각적 효과나 추가 기능이 적용되지는 않습니다.

텍스트 방향성과 <wbr> 태그

텍스트의 읽는 방향이 달라지더라도 줄바꿈 위치로서의 기능을 그대로 유지합니다. 예를 들어, 오른쪽에서 왼쪽으로 텍스트가 표시되는 상황에서도 <wbr>이 줄바꿈 가능한 지점으로 작동합니다.

HTML 
<div style="width: 9em; border: 2px dashed silver;">
    <p>user.name<wbr>@example.co.kr</p>
    <p dir="rtl">user.name<wbr>@example.co.kr</p>
</div>

코드 부연설명
dir 속성은 텍스트의 읽고 쓰는 방향(direction)을 지정합니다.
dir="rtl"은 오른쪽에 배치되어 왼쪽으로 읽고 씁니다.

실제 적용된 모습

같은 이유로 <wbr> 태그는 <bdi> 태그나 CSS의 unicode-bidi 속성에 영향을 받지 않습니다.

속성

<wbr> 태그는 모든 글로벌 속성을 사용할 수 있습니다. 하지만, <wbr>만을 위한 관련 속성은 없습니다.

기술적인 문법 요약

wbr 태그의 구문 형식
허용되는 콘텐츠 <wbr> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</wbr>)가 없다는 의미입니다.
암시적인 role 속성 값 없음
허용된 role 속성 값 모두(Any)

브라우저 호환성

wbr 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<wbr> 1 12 1 4

명세서

wbr 태그의 명세서 사양
명세서 사양
<wbr> HTML Standard
#the-wbr-element

참고문헌

같이 보기