wbr element - by. UXKM

요약 설명

<wbr> 요소는 단어 중간에 줄바꿈이 가능함을 명시적으로 지정하는 비시맨틱 태그로, 브라우저가 자동으로 줄을 바꾸지 못하는 긴 단어, URL, 코드 문자열 등에 사용됩니다.
실제 줄바꿈이 발생하지는 않지만, 화면이 좁아질 경우 해당 위치에서 줄을 바꿀 수 있는 후보 지점을 제시합니다. 시각적 변화는 없지만 텍스트 레이아웃의 유연성을 높이고, 오버플로우 문제를 방지하는 데 유용합니다.

<br> vs <wbr>

  1. 주요 차이점

    <br>은 직접적인 줄 바꿈을 적용하는 반면, <wbr>은 브라우저가 필요할 때 줄 바꿈을 적용할 수 있도록 힌트를 주는 역할을 합니다.

  2. 차이점 정리
    • 특징
    • <br>
    • <wbr>

    • 목적

      줄 바꿈을 강제로 삽입

      단어 내에서 줄 바꿈이 가능한 위치를 제시

    • 동작

      줄 바꿈을 즉시 발생

      브라우저가 필요한 경우에만 줄 바꿈을 허용

    • 사용 예

      텍스트 내에서 명시적으로 줄 바꿈이 필요할 때 사용

      긴 단어 또는 URL 등이 부모 컨테이너를 넘칠 때 사용

    • 사용 환경

      일반적인 줄 바꿈이 필요한 경우

      단어 내에서 줄 바꿈을 유연하게 적용하고자 할 때 사용

주요 역할 및 특징

  1. 자동 줄 바꿈 위치 지정
    • <wbr>을 삽입한 위치에서 줄바꿈이 가능하지만, 반드시 줄바꿈이 발생하는 것은 아닙니다.
    • 브라우저가 필요하다고 판단할 경우 해당 위치에서 줄바꿈을 수행합니다.
  2. 필요한 곳에만 사용
    • <wbr> 요소는 긴 단어, 긴 URL, 긴 이메일 주소 등에서 유용하게 사용됩니다.
    • 일반적인 문장은 <wbr> 요소 없이도 브라우저가 자동으로 줄 바꿈을 처리하므로, 자동 줄 바꿈이 되지 않는 긴 단어에만 사용하는 것이 적절합니다.
  3. 보이지 않는 요소

    <wbr> 자체는 화면에 아무런 시각적 효과를 주지 않으며, 단지 줄 바꿈을 제어하는 역할만 합니다.

  4. CSS와 함께 사용 가능

    word-wrap, overflow-wrap, white-space 등의 CSS 속성과 함께 사용하여 텍스트의 줄바꿈 동작을 보다 정교하게 제어할 수 있습니다.

CSS 기본 값

<wbr> 요소는 기본적으로 인라인 레벨 요소입니다.

기본 문법

속성

<wbr> 요소는 고유 속성을 가지지 않으며, 글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.

예제

<wbr> 적용과 미적용

긴 단어 줄바꿈 허용

이메일 주소에 사용

주의사항

  • <wbr>는 강제 줄바꿈이 아니라 "가능한 위치" 를 제시하는 역할을 합니다. 줄바꿈이 필요하지 않으면 <wbr>이 무시됩니다.
  • 브라우저의 기본 자동 줄 바꿈 기능과 충돌할 수 있으므로, 실제로 텍스트가 넘치거나 문제가 있을 때만 사용해야 합니다.