HTML <wbr> 태그

1. HTML wbr 태그란?
2. 기본 문법
3. 주요 특징
4. 사용 예제
   • 긴 URL 주소 줄바꿈 가능하게 만들기
   • 긴 변수명이나 코드 문자열에서 줄바꿈 추가하기
   • 긴 이메일 주소 줄바꿈 처리하기
   • CSS와 함께 사용하여 가독성 향상하기
5. wbr 태그와 br 태그의 차이점
6. 사용 장점

 

• wbr 태그는 긴 텍스트에서 줄바꿈이 가능하도록 힌트를 제공
• 공백을 추가하지 않고, 필요할 때만 줄바꿈
• 강제 개행(br 태그)과 다르게, 선택적으로 줄바꿈 발생
• 긴 URL, 이메일, 코드 문자열 등에 유용

 

---

 

HTML wbr 태그란?

wbr 태그는 "Word Break Opportunity"(줄바꿈 기회)를 의미하며, 브라우저가 필요할 경우 줄바꿈을 할 수 있는 위치를 지정하는 태그입니다. 특히 긴 URL, 긴 단어, 코드 문자열 등에서 줄바꿈이 필요할 때 유용합니다.

 

---

 

기본 문법

<p>이메일 주소: user<wbr>@example.com</p>

브라우저 너비가 좁을 경우, user@example.com에서 "@" 기호 앞에서 줄바꿈이 발생할 수 있습니다.

wbr 태그가 있는 위치에서 브라우저는 줄바꿈을 "선택적으로" 수행합니다. (필요할 때만 줄바꿈)

 

---

 

주요 특징

• 텍스트가 너무 길 경우, 줄바꿈이 발생할 수 있는 위치를 지정
• 사용자가 창 크기를 조절할 때 자동으로 줄바꿈을 유도
• 공백을 추가하지 않음 (단순히 줄바꿈 기회 제공)
• SEO(검색 엔진 최적화)에는 영향 없음

 

---

 

사용 예제

💡 긴 URL 주소 줄바꿈 가능하게 만들기

🌈 예제 코드:

<p>웹사이트 주소: https://www.verylongwebsite<wbr>.com/some/really/long/path</p>

✅ 실행 결과:

웹사이트 주소: https://www.verylongwebsite

.com/some/really/long/path

브라우저 너비가 좁아지면 "." 뒤에서 줄바꿈이 발생할 수 있음.

 

💡 긴 변수명이나 코드 문자열에서 줄바꿈 추가하기

🌈 예제 코드:

<p>변수 이름: thisIsAReallyLongVariable<wbr>NameThatMightNotFit</p>

✅ 실행 결과:

변수 이름: thisIsAReallyLongVariable

NameThatMightNotFit

너무 긴 변수명을 포함하는 코드 블록에서 줄바꿈 가능하도록 설정.

 

💡 긴 이메일 주소 줄바꿈 처리하기

🌈 예제 코드:

<p>문의 이메일: customer<wbr>support@example.com</p>

✅ 실행 결과:

문의 이메일: customer

support@example.com

이메일 주소가 너무 길어 한 줄에 다 표시되지 않을 경우, @ 앞에서 줄바꿈 가능.

 

💡 CSS와 함께 사용하여 가독성 향상하기

🌈 예제 코드:

<style>
  .breakable {
    width: 200px;
    border: 1px solid black;
    word-wrap: break-word;
  }
</style>

<p class="breakable">이메일 주소: longemail<wbr>address@example.com</p>

CSS와 함께 사용하면 긴 텍스트를 자동으로 줄바꿈 처리 가능

 

---

 

wbr 태그와 br 태그의 차이점

태그	차이점
wbr	필요할 때만 자동으로 줄바꿈 (공백 없음)
br	강제 개행(줄바꿈) 발생 (항상 줄바꿈)

🌈 예제 코드:

<p>이메일: user<wbr>@example.com</p>
<p>이메일: user<br>@example.com</p>

✅ 실행 결과:

이메일: user

@example.com

이메일: user
@example.com

wbr 태그는 필요할 때만 줄바꿈하지만, br 태그는 항상 줄바꿈됨.

 

---

 

사용 장점

• 긴 단어, URL, 이메일이 화면을 벗어날 때 가독성 향상
• CSS의 word-break 속성과 함께 사용하여 긴 문자열 처리 가능
• 코드 예제, 제품 코드, 사용자 입력값 등에서 줄바꿈이 필요할 때 유용

 

---

 

• HTML del 태그 (취소선 기능)
• HTML dd 태그 (설명 기능)
• HTML datalist 태그 (자동 완성 추천 목록 기능)