<menu> 태그, HTML 메뉴 만들기

<menu> 태그, HTML 메뉴 만들기

HTML은 웹 개발의 기초를 이루는 마크업 언어입니다. 그 중에서도 <menu> 태그는 메뉴를 정의하고 관리하는 데 사용되는 특별한 태그입니다. 이 글에서는 <menu> 태그의 특징, 활용법, 그리고 실제 예시를 통해 이해도를 높이는 방법을 알아보겠습니다.

 

 

목차

1. <menu> 태그란?
2. 주요 속성
3. 기본 사용법
4. 실제 코드 예제
5. 접근성 고려사항
6. CSS를 활용한 스타일링
7. 브라우저 호환성

 

<menu> 태그란?

<menu> 태그는 HTML5에서 추가된 태그로, 메뉴 항목을 그룹화하기 위해 사용됩니다. 주로 컨텍스트 메뉴, 도구 메뉴, 명령 목록 등을 정의하는 데 사용됩니다.

• 비구조적 메뉴를 생성하기 적합합니다.
• 메뉴 항목은 일반적으로 <li> 또는 <button>과 함께 사용됩니다.

 

 

 

주요 속성

<menu> 태그는 몇 가지 주요 속성을 제공합니다:

속성	설명
type	메뉴의 유형을 정의합니다. (context, toolbar 등)
label	메뉴의 레이블을 지정합니다.

 

 

 

기본 사용법

아래는 <menu> 태그의 기본 사용 예입니다:

<menu type="context" label="Options">
    <li><button>Copy</button></li>
    <li><button>Paste</button></li>
    <li><button>Delete</button></li>
</menu>
        

 

 

 

실제 코드 예제

실제 프로젝트에서 활용할 수 있는 예제입니다:

• 웹 애플리케이션에서 컨텍스트 메뉴 생성
• 사용자 지정 도구 모음 구현

<menu type="toolbar">
    <li><button>Save</button></li>
    <li><button>Open</button></li>
    <li><button>Settings</button></li>
</menu>
        

 

 

 

 

접근성 고려사항

<menu> 태그를 사용할 때 접근성을 높이기 위해 다음 사항을 고려하세요:

• 명확한 레이블 제공
• 키보드 내비게이션 지원
• 스크린 리더와의 호환성

 

 

 

CSS를 활용한 스타일링

메뉴를 사용자 친화적으로 만들기 위해 CSS를 활용할 수 있습니다. 예를 들어:

<style>
    menu {
        background-color: #f0f0f0;
        padding: 10px;
        border: 1px solid #ccc;
    }
    menu li {
        list-style: none;
        margin-bottom: 5px;
    }
</style>
        

 

 

 

브라우저 호환성

<menu> 태그는 일부 최신 브라우저에서 제한적으로 지원됩니다. 다음은 브라우저 지원 현황입니다:

브라우저	지원 여부
Chrome	지원
Firefox	부분 지원
Safari	미지원