[javascript] 커스텀 콘텍스트 메뉴 스타일링하기

11 Dec 2023

javascript

컨텍스트 메뉴는 웹 애플리케이션에서 우클릭을 통해 나타나는 게시물에 대해 추가 작업을 수행할 수 있는 기능입니다. 보통 이 기능을 커스텀하기 위해 라이브러리를 사용합니다. 하지만 때로는 기본적인 웹 기술만으로 커스텀 콘텍스트 메뉴를 만드는 것이 유용할 수 있습니다. 이번 포스팅에서는 HTML, CSS, 그리고 자바스크립트를 사용하여 기본 콘텍스트 메뉴를 커스텀하는 방법에 대해 알아보겠습니다.

HTML 구조

우선, 기본적인 HTML 구조부터 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>커스텀 콘텍스트 메뉴</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div oncontextmenu="return false" class="context-menu">우클릭해주세요</div>
</body>
<script src="script.js"></script>
</html>

CSS 스타일링

다음으로는 CSS를 사용하여 커스텀 콘텍스트 메뉴의 디자인을 작성해보겠습니다.

.context-menu {
  width: 150px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  position: absolute;
  display: none;
  z-index: 1000;
}

.context-menu.active {
  display: block;
}

자바스크립트로 동작 구현

마지막으로, 자바스크립트를 사용하여 우클릭 이벤트를 처리하고 커스텀 콘텍스트 메뉴를 활성화하도록 구현해보겠습니다.

document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  const contextElement = document.querySelector('.context-menu');
  contextElement.style.top = event.clientY + 'px';
  contextElement.style.left = event.clientX + 'px';
  contextElement.classList.add('active');
});

document.addEventListener('click', function(event) {
  const contextElement = document.querySelector('.context-menu');
  if (!contextElement.contains(event.target)) {
    contextElement.classList.remove('active');
  }
});

이제, 웹 페이지에서 우클릭을 해보면 우리가 만든 커스텀 콘텍스트 메뉴가 나타나는 것을 확인할 수 있습니다. 여기서 배운 내용을 바탕으로 디자인 및 기능을 추가하여 원하는 형태의 커스텀 콘텍스트 메뉴를 만들어 보세요.

참고문헌: