티스토리 뷰

HTML

[HTML] <wbr>

<wbr>

<wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다.

<wbr> 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 할 때 사용합니다. 예를 들면 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다. 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 word-break 속성을 사용합니다.


<wbr>

<wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다.

정의(Definition)

  • <wbr> 태그는 일반적인 한글이나 영어에 해당되지 않는 글자에서 사용합니다.
  • <wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다.
  • <wbr> 태그는 단어가 너무 길거나 원하는 곳에서 줄바꿈을 하고 싶을 때 사용합니다.
  • 일반적인 한글이나 영어에 줄바꿈을 원하면 CSS 속성 word-break를 사용합니다.

비교(Compare)

  • 텍스트 줄바꿈을 원하다면 <br> 태그를 사용합니다.
  • 텍스트 줄바꿈 할 지점을 원하다면 <wbr> 태그를 사용합니다.
  • 일반적인 텍스트의 줄바꿈을 원하다면 CSS 속성 word-break 속성을 사용합니다.

샘플(Sample)

줄바꿈 할 지점을 정의합니다.

Sample1

일반적인 문장

이 문장은 일반적인 문장입니다. 일반적인 문장은 화면크기에 따라서 자동으로 줄바꿈이 됩니다. 이 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 설정합니다. 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다.

webzz.tistory.com/352/tistory/webstoryboy/webs/site/coding/this.com/site/smaple/web.co.kr

<wbr>태그를 사용한 경우

이 문장은 일반적인 문장입니다. 일반적인 문장은 화면크기에 따라서 자동으로 줄바꿈이 됩니다. 이 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 설정합니다. 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다.

webzz.tistory.com/352/tistory/webstoryboy/webs/site/coding/this.com/site/smaple/web.co.kr

<br>태그를 사용한 경우

이 문장은 일반적인 문장입니다. 일반적인 문장은 화면크기에 따라서 자동으로 줄바꿈이 됩니다.
이 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다.
의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 설정합니다. 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다.

webzz.tistory.com/352/tistory/webstoryboy/webs/site/coding/this.com
/site/smaple/web.co.kr

html
<h3>일반적인 문장</h3>
<p>
    이 문장은 일반적인 문장입니다. 일반적인 문장은 화면크기에 따라서 자동으로 줄바꿈이 됩니다. 이 태그의 사용은 제한적입니다. 
    일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 설정합니다. 
    의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다.
</p>
<p>webzz.tistory.com/352/tistory/webstoryboy/webs/site/coding/this.com/site/smaple/web.co.kr</p>

<h3><wbr>태그를 사용한 경우</h3>
<p>
    이 문장은 일반적인 문장입니다. 일반적인 문장은 화면크기에 따라서 자동으로<wbr> 줄바꿈이 됩니다. 이 태그의 사용은 제한적입니다. 
    일반적인 한글이나 영어에서는<wbr> 해당이 되지 않습니다.<wbr> 의미가 없는 단어나<wbr> 해석 할 수 없는 단어의<wbr> 줄바꿈을 설정합니다. 
    의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다.
</p>
<p>webzz.tistory.com<wbr>/352<wbr>/tistory<wbr>/webstoryboy<wbr>/webs<wbr>/site<wbr>/coding<wbr>/this.com<wbr>/site<wbr>/smaple<wbr>/web.co.kr</p>

<h3><br>태그를 사용한 경우</h3>
<p>
    이 문장은 일반적인 문장입니다. 일반적인 문장은 화면크기에 따라서 자동으로 줄바꿈이 됩니다.<br> 이 태그의 사용은 제한적입니다. 
    일반적인 한글이나 영어에서는 해당이 되지 않습니다.<br> 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 설정합니다. 
    의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다.
</p>
<p>webzz.tistory.com/352/tistory/webstoryboy/webs/site/coding/this.com<br>/site/smaple/web.co.kr</p>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<wbr> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML5

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼