HTML의 oncontextmenu 이벤트 속성은 사용자가 HTML 문서 내 요소에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴(우클릭 메뉴)를 열려고 할 때 실행됩니다. 이 속성을 활용하면 우클릭 동작에 맞춰 사용자 지정 스크립트를 실행할 수 있어, 이미지 보호 기능이나 커스텀 컨텍스트 메뉴 구현 등 다양한 용도로 활용할 수 있습니다.
문법(Syntax)
oncontextmenu 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname oncontextmenu="script"></tagname>
예제(Example)
아래 예제는 빨간색 박스 위에서 마우스 오른쪽 버튼을 클릭하면 oncontextmenu 이벤트가 발생하고, 페이지 배경색과 글자색이 변경되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
.box {
background: #db133a;
width: 140px;
height: 140px;
margin: 1rem auto;
color: #fff;
}
</style>
</head>
<body>
<h1>HTML oncontextmenu Event Attribute Demo</h1>
<p oncontextmenu="get()" class="box"></p>
<p>위의 빨간 박스에서 마우스 오른쪽 버튼을 클릭해 컨텍스트 메뉴를 열어보세요.</p>
<script>
function get() {
document.body.style.background = "#084C61";
document.body.style.color = '#fff';
}
</script>
</body>
</html>실행 결과(Output)
코드를 실행하면 아래와 같은 화면이 나타납니다.
이제 빨간색 박스 위에서 마우스 오른쪽 버튼을 클릭해 보세요. 컨텍스트 메뉴가 열리면서 oncontextmenu 이벤트가 트리거되고, 배경색이 진한 청록색(#084C61)으로, 글자색은 흰색으로 변경되는 것을 확인할 수 있습니다.
정리
oncontextmenu 이벤트 속성은 우클릭 동작에 반응하는 간단하지만 유용한 기능입니다. event.preventDefault()와 함께 사용하면 기본 컨텍스트 메뉴를 차단하고 자신만의 커스텀 메뉴를 만들 수도 있습니다. 웹 페이지에서 우클릭 관련 인터랙션을 구현할 때 적극적으로 활용해 보세요.