Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML5에서 요소에 컨텍스트 메뉴를 만드는 방법

HTML5에서는 contextmenu 속성을 사용하여 특정 요소에 대한 컨텍스트 메뉴(우클릭 메뉴)를 만들 수 있습니다. 컨텍스트 메뉴는 사용자가 해당 요소 위에서 마우스 오른쪽 버튼을 클릭했을 때 나타납니다.

기본 사용법

컨텍스트 메뉴를 구현하려면 다음 두 가지가 필요합니다.

  • 메뉴를 표시할 요소에 contextmenu 속성을 추가하고, 메뉴의 id 값을 지정합니다.
  • <menu type="context"> 안에 <menuitem> 요소들을 정의하여 실제 메뉴 항목을 구성합니다.

예제 코드

아래 코드를 실행하면 박스 영역 안에서 마우스 오른쪽 버튼을 클릭할 때 커스텀 컨텍스트 메뉴가 표시됩니다.

<!Doctype html>
<html>
   <head>
      <title>HTML menuitem 태그 예제</title>
   </head>
   <body>
      <div style="border:1px solid #000; padding:20px;" contextmenu="clickmenu">
         <p>이 영역 안에서 마우스 오른쪽 버튼을 클릭해 보세요...</p>

         <menu type="context" id="clickmenu">
            <menuitem label="튜토리얼" onclick=""></menuitem>
            <menuitem label="학습 자료실" onclick=""></menuitem>
            <menuitem label="코딩 환경" onclick=""></menuitem>
            <menuitem label="질문/답변" onclick=""></menuitem>
         </menu>
      </div>
   </body>
</html>

브라우저 호환성 주의사항

contextmenu 속성과 <menuitem> 태그는 초기 HTML5 초안에서 제안되었지만, 이후 HTML 표준 사양에서 제외되었습니다. 현재 대부분의 최신 브라우저(Chrome, Edge, Safari 등)에서는 이 기능이 지원되지 않으므로, 실무에서는 JavaScript와 CSS를 활용한 커스텀 우클릭 메뉴를 직접 구현하는 것이 일반적입니다. 예를 들어 contextmenu 이벤트를 감지하여 기본 메뉴의 동작을 막고(preventDefault()), 직접 만든 메뉴 레이어를 표시하는 방식으로 대체할 수 있습니다.