HTML5 Command 태그 사용법

1. Command 태그란?

Command 태그는 사용자가 실행할 수 있는 명령을 정의하는 데 사용됩니다. 주로 메뉴나 도구 모음에서 명령을 실행할 때 활용됩니다.

2. 기본 구조

Command 태그의 기본 사용법

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

3. 자주 사용되는 속성

속성 설명 예시
type 명령 유형 <command type="command">
label 명령 레이블 <command label="복사">
icon 명령 아이콘 <command icon="copy.png">

4. 실제 사용 예제

<!-- 기본 명령 예제 -->
<div class="command-example">
    <h3>기본 명령 예제</h3>
    <menu>
        <command type="command" label="복사" icon="copy.png"></command>
        <command type="command" label="붙여넣기" icon="paste.png"></command>
        <command type="command" label="삭제" icon="delete.png"></command>
    </menu>
</div>

<!-- 라디오 명령 예제 -->
<div class="radio-example">
    <h3>라디오 명령 예제</h3>
    <menu>
        <command type="radio" label="작게" radiogroup="size"></command>
        <command type="radio" label="보통" radiogroup="size"></command>
        <command type="radio" label="크게" radiogroup="size"></command>
    </menu>
</div>

<!-- 체크박스 명령 예제 -->
<div class="checkbox-example">
    <h3>체크박스 명령 예제</h3>
    <menu>
        <command type="checkbox" label="굵게"></command>
        <command type="checkbox" label="기울임"></command>
        <command type="checkbox" label="밑줄"></command>
    </menu>
</div>

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

    /* 라디오 명령 예제 스타일 */
    .radio-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 체크박스 명령 예제 스타일 */
    .checkbox-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

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

💡 주의사항

5. 스타일링 예제

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

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

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

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

6. 성능 최적화 팁

7. 검증 및 테스트

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