HTML5 Menuitem 태그 사용법

1. Menuitem 태그란?

Menuitem 태그는 menu 태그 내에서 메뉴 항목을 정의하는 데 사용됩니다. 주로 컨텍스트 메뉴나 팝업 메뉴의 항목을 만들 때 활용됩니다.

2. 기본 구조

<menu type="context">
    <menuitem label="복사" icon="copy.png"></menuitem>
    <menuitem label="붙여넣기" icon="paste.png"></menuitem>
    <menuitem label="삭제" icon="delete.png"></menuitem>
</menu>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 기본 컨텍스트 메뉴 예제 -->
<div class="context-example">
    <h3>기본 컨텍스트 메뉴 예제</h3>
    <menu type="context">
        <menuitem label="복사" icon="copy.png"></menuitem>
        <menuitem label="붙여넣기" icon="paste.png"></menuitem>
        <menuitem label="삭제" icon="delete.png"></menuitem>
    </menu>
</div>

<!-- 하위 메뉴 예제 -->
<div class="submenu-example">
    <h3>하위 메뉴 예제</h3>
    <menu type="context">
        <menuitem label="파일">
            <menu>
                <menuitem label="새로 만들기"></menuitem>
                <menuitem label="열기"></menuitem>
                <menuitem label="저장"></menuitem>
            </menu>
        </menuitem>
    </menu>
</div>

<!-- 비활성화 메뉴 예제 -->
<div class="disabled-example">
    <h3>비활성화 메뉴 예제</h3>
    <menu type="context">
        <menuitem label="실행"></menuitem>
        <menuitem label="중지" disabled></menuitem>
        <menuitem label="재시작"></menuitem>
    </menu>
</div>

<style>
    /* 컨텍스트 메뉴 예제 스타일 */
    .context-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

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

    /* 비활성화 메뉴 예제 스타일 */
    .disabled-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

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

5. 스타일링 예제

<style>
    /* 기본 menuitem 스타일 */
    menuitem {
        display: block;
        padding: 8px 15px;
        cursor: pointer;
    }

    /* 강조 스타일 */
    menuitem:hover {
        background-color: #f5f5f5;
    }

    /* 비활성화 스타일 */
    menuitem[disabled] {
        color: #999;
        cursor: not-allowed;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        menuitem {
            padding: 6px 10px;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 경우에만 menuitem 태그를 사용합니다.
• 불필요한 중첩을 피합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

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

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