wbr 태그란 무엇인가?
HTML의 <wbr>(Word Break Opportunity) 태그는 텍스트 안에 '잠재적인 줄바꿈 지점'을 정의합니다. 이 태그가 있다고 해서 반드시 줄바꿈이 일어나는 것은 아니며, 콘텐츠가 화면이나 컨테이너의 너비를 초과해 줄바꿈이 필요해질 때 브라우저가 해당 위치에서 줄을 나눌 수 있도록 힌트를 제공하는 역할을 합니다.
띄어쓰기 없이 길게 이어진 문자열, 예를 들어 긴 URL, 파일 경로, 기술 용어, 복합어 등은 화면 밖으로 삐져나가기 쉽습니다. 이런 텍스트에 <wbr>를 적절히 배치하면 사용자에게 가독성 좋은 형태로 자동 줄바꿈을 유도할 수 있습니다.
wbr 태그 사용 예제
아래 코드를 직접 실행해 보면 <wbr> 태그가 HTML에서 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML wbr Tag</title> </head> <body> <p> https://www.example.com/<wbr>documents/<wbr>tutorials/<wbr>html-wbr-tag.html </p> </body> </html>
브라우저 창의 너비를 줄여 보면, 긴 URL이 화면 밖으로 잘리지 않고 <wbr>가 삽입된 지점을 기준으로 깔끔하게 줄바꿈되는 것을 확인할 수 있습니다.
br 태그와 wbr 태그의 차이
<br> 태그는 조건 없이 항상 그 자리에서 줄바꿈을 강제하지만, <wbr> 태그는 줄바꿈이 실제로 필요한 상황에서만 동작한다는 점이 다릅니다. 따라서 반응형 웹 환경에서 유연한 텍스트 처리를 원한다면 <wbr>가 더 적합한 선택입니다.
활용 시 참고 사항
- CSS와의 조합:
white-space: nowrap스타일과 함께 사용하면 기본적인 줄바꿈은 막으면서<wbr>위치에서만 줄바꿈을 허용할 수 있습니다. - 브라우저 지원:
<wbr>는 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원됩니다. - 대안: CSS의
overflow-wrap: break-word또는word-break속성으로도 비슷한 효과를 낼 수 있지만, 줄바꿈 위치를 직접 제어하고 싶다면<wbr>가 가장 명확한 방법입니다.