HTML5에서는 <menuitem> 태그를 사용하여 사용자가 팝업 메뉴(컨텍스트 메뉴)에서 직접 호출할 수 있는 명령 또는 메뉴 항목을 정의할 수 있습니다. 이 태그는 주로 <menu> 태그와 함께 사용되며, 웹 페이지의 특정 영역에서 마우스 오른쪽 버튼을 클릭했을 때 나타나는 사용자 지정 메뉴를 구성하는 데 활용됩니다.
<menuitem> 태그의 주요 속성
<menuitem> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 값 | 설명 |
|---|---|---|
| checked | checked | 메뉴 항목이 선택(체크)된 상태임을 정의합니다. |
| default | default | 해당 메뉴 항목을 기본 명령(default command)으로 표시합니다. |
| disabled | disabled | 메뉴 항목을 비활성화하여 사용자가 클릭할 수 없도록 합니다. |
| icon | url | 메뉴 항목에 표시할 아이콘 이미지의 URL을 정의합니다. |
| label | text | 사용자에게 화면에 표시되는 메뉴 항목의 이름을 정의합니다. |
| radiogroup | groupname | 여러 개의 명령 중 하나만 선택할 수 있는 그룹을 정의합니다. |
| type | checkbox command radio | 메뉴 항목의 명령 유형을 정의합니다. 기본값은 command입니다. |
사용 예제
아래 코드를 실행하면 지정한 영역 안에서 마우스 오른쪽 버튼을 클릭했을 때 사용자 지정 팝업 메뉴가 나타납니다.
<!Doctype html> <html> <head> <title>HTML menuitem Tag</title> </head> <body> <div style = "border:1px solid #000; padding:20px;" contextmenu = "clickmenu"> <p>여기 안에서 마우스 오른쪽 버튼을 클릭해 보세요...</p> <menu type = "context" id = "clickmenu"> <menuitem label = "Tutorialspoint" onclick = ""></menuitem> <menuitem label = "Tutorials Library" onclick = ""></menuitem> <menuitem label = "Coding Ground" onclick = ""></menuitem> <menuitem label = "Q/A" onclick = ""></menuitem> </menu> </div> </body> </html>
참고 사항
<menuitem> 태그는 HTML5 초안에서 도입되었지만, 이후 HTML 표준에서 제외되었으며 현재 대부분의 최신 브라우저에서 공식적으로 지원되지 않습니다. 따라서 실제 서비스 환경에서는 JavaScript와 CSS를 조합해 커스텀 컨텍스트 메뉴를 직접 구현하는 방식을 권장합니다. 위 코드는 학습 및 참고 목적으로 활용하기에 적합합니다.