HTML5 WBR 태그 사용법

1. WBR 태그란?

WBR(Word Break Opportunity) 태그는 텍스트 내에서 줄바꿈이 가능한 위치를 지정하는 데 사용됩니다. 긴 단어나 URL이 있을 때 적절한 위치에서 줄바꿈이 되도록 도와줍니다.

2. 기본 구조

<p>이것은 매우<wbr>긴<wbr>단어입니다.</p>

<p>https://example.com/very<wbr>/long<wbr>/url</p>

<p>super<wbr>cali<wbr>fragi<wbr>listic<wbr>expi<wbr>ali<wbr>docious</p>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 긴 단어 예제 -->
<div class="word-example">
    <h3>긴 단어 예제</h3>
    <p>이것은 매우<wbr>긴<wbr>단어입니다.</p>
    <p>super<wbr>cali<wbr>fragi<wbr>listic<wbr>expi<wbr>ali<wbr>docious</p>
</div>

<!-- URL 예제 -->
<div class="url-example">
    <h3>URL 예제</h3>
    <p>https://example.com/very<wbr>/long<wbr>/url</p>
    <p>https://example.com/path<wbr>/to<wbr>/very<wbr>/long<wbr>/resource</p>
</div>

<!-- 이메일 예제 -->
<div class="email-example">
    <h3>이메일 예제</h3>
    <p>very<wbr>long<wbr>email<wbr>address@example.com</p>
    <p>user<wbr>name<wbr>with<wbr>numbers123@example.com</p>
</div>

<style>
    /* 단어 예제 스타일 */
    .word-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* URL 예제 스타일 */
    .url-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 이메일 예제 스타일 */
    .email-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .word-example,
        .url-example,
        .email-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 기본 wbr 스타일 */
    wbr {
        display: inline;
    }

    /* 강조 스타일 */
    wbr.emphasis {
        display: inline;
    }

    /* 인용 스타일 */
    wbr.quote {
        display: inline;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        wbr {
            display: inline;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 경우에만 wbr 태그를 사용합니다.
• 적절한 위치에 배치합니다.
• 불필요한 wbr 태그를 피합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

wbr 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 모바일 기기에서 테스트
• 접근성 검사 도구 사용
• 줄바꿈 테스트