웹페이지에서 복사 기능을 비활성화하기 위해서는 Clipboard.js 라이브러리를 사용할 수 있습니다. Clipboard.js는 클립보드에 텍스트를 복사하거나 붙여넣을 수 있는 기능을 제공하는 라이브러리입니다.

필요한 준비물

• Clipboard.js 라이브러리 (CDN 링크 등을 통해 가져올 수 있음)

적용 방법

1. 웹페이지에 Clipboard.js 라이브러리를 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

1. 비활성화할 요소에 적용할 클래스를 생성합니다.

.disable-copy {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

1. JavaScript 코드를 사용하여 복사 기능을 비활성화합니다.

var copyButton = document.getElementById('copyButton');
var clipboard = new ClipboardJS(copyButton);

clipboard.on('success', function(e) {
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

1. 비활성화할 요소에 disable-copy 클래스를 추가합니다.

<button id="copyButton" class="disable-copy">텍스트 복사</button>

위의 코드에서 copyButton은 클릭 시 복사 기능을 수행하는 요소의 ID입니다. 필요에 따라 요소의 ID를 변경하십시오.

동작 원리

위의 코드에서 ClipboardJS 객체를 생성하고 해당 객체에 이벤트 리스너를 추가하여 복사 기능을 비활성화합니다. success 이벤트가 발생하면 복사된 텍스트를 선택 해제하고, error 이벤트가 발생하면 오류 메시지를 출력합니다.

copyButton 요소에 disable-copy 클래스를 추가함으로써 클릭 시 복사 기능이 비활성화됩니다.

결론

Clipboard.js를 사용하여 웹페이지에서 복사 기능을 비활성화하는 방법을 알아보았습니다. 이를 통해 사용자가 웹페이지에서 텍스트를 복사하지 못하도록 제어할 수 있습니다. Clipboard.js 라이브러리는 클립보드 관련 기능을 간편하게 구현할 수 있으므로, 웹개발자에게 유용한 도구입니다.