HTML 태그는 무엇이며 왜 필요한가요?

따라서 HTML에서 태그에 대한 간단한 설명은 작업 중단을 의미합니다. 매번 깨지는 것이 아니라 필요할 때마다 깨집니다.

라고 생각할 수도 있지만 CSS도 word-break: break-all를 사용하여 이 작업을 수행할 수 있습니다. 예, 작동하지만 제어할 수 없습니다.

차이점을 빠르게 보여주기 위해:



바로 볼 수 있듯이 <wbr> 버전은 중단되는 위치를 제어하기 때문에 훨씬 더 읽기 쉽습니다! CSS 솔루션은 매번 중단됩니다.

물론 웹사이트의 모든 콘텐츠를 편집할 수는 없지만 이 방법은 헤더에 매우 유용합니다!

HTML 태그 작동 방식

이 태그를 사용하는 것은 매우 쉽습니다. 중단점이 있을 수 있는 긴 단어에 태그를 배치하기만 하면 됩니다!

super<wbr />long<wbr />word<wbr />that<wbr />needs<wbr />to<wbr />break<wbr />better

이것은 단지 가짜 단어라는 것을 알 수 있지만 데모에서 이것을 실행하면 필요한 경우에만 이러한 지점에서 중단되는 것을 볼 수 있습니다!

종료 태그가 없고 자동으로 닫힐 필요가 없음을 의미하는 빈 요소입니다.

위의 예에서 한 단어에 여러 줄 바꿈이 있을 수 있음을 알 수 있습니다.

Note: If you go smaller than the actual smallest breaks it will not show!

데모

<wbr> HTML 태그와 CSS word-break 메서드 간의 차이점을 보여주기 위해 Codepen에서 이 데모를 만들었습니다.

이러한 상자의 크기를 가로로 조정하여 중단점을 볼 수 있습니다.

브라우저 지원

전폭적인 지원!! IE가 죽었으니 💁‍♂️!
저는 이 멋진HTML 속성을 사용하여 거의 반응하지 않는 디자인 문제를 해결하고 싶습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나