전체메뉴

기술 체험 전시관

아이콘
HTML5를 이용한 신기술들을 전시하는 기술 체험 전시관입니다.

Custom Context Menu

 ‘Context Menu’란 마우스 우 클릭 시 웹 브라우저 등 마우스가 위치한 영역에 맞는 우 클릭 메뉴가 노출되는 것을 말하며, 메뉴 선택 시 해당 영역에 이벤트를 실행시킬 수 있습니다. 이러한 ‘Context Menu’에 기능을 추가, 수정, 삭제하여 사용자가 원하는 기능으로 구성하는 것이  ‘Custom Context Menu’입니다. 


‘Custom Context Menu’를 구성하는 데에는 기본적으로 3가지 기술이 필요합니다. 

첫째, 우 클릭 시 메뉴가 노출되는 이벤트에 대한 이벤트 핸들러. 

둘째, 우 클릭 메뉴 선택 시의 이벤트 처리. 

셋째, 우 클릭 시 현재 마우스의 위치에 따라 메뉴의 위치를 제어하는 CSS가 있습니다. 


‘Context Menu’에서 지원하는 기능의 경우 브라우저, OS별로 다르게 적용되며, 단순한 수정이 아닌 신규로 개발되는 메뉴의 경우에는 브라우저, OS별로 지원 여부가 상이하므로 적용 시 유의하여야 합니다. 


W3C 표준화 시점 : 2016년 11월 1일

적용 화면

전체화면으로 보기

적용화면 이미지

API

WebExtension API : 브라우저의 기능을 확장하고 수정 할 수 있다.

ContextMenus API : 컨텍스트 메뉴의 아이템을 수정하거나 추가하도록 한다.

예제 설명

예제 파일 다운로드

상단은 이미지영역으로 뒤로가기, 앞으로가기, 새로고침, 즐겨찾기로 구성 하단은 마우스 우클릭 시 기본 메뉴를 제공하고 실행 시 단축키를 제공한다.

이메일 무단 수집 거부

팝업 닫기

본 웹사이트에 게시된 이메일 주소가 전자우편수집 프로그램이나 그밖의 기술적장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시 정보통신망 이용촉진 및 정보보호등에 관한 법률에 의해 처벌 받을 수 있습니다.

닫기
TOP