[javascript] Clipboard.js를 사용하여 웹페이지에서 특정 요소의 위치 복사하기

30 Nov 2023

javascript

웹페이지에서 특정 요소의 위치를 복사하는 것은 종종 필요한 작업입니다. 이를 도와주는 훌륭한 Javascript 라이브러리인 Clipboard.js를 사용하여 간단하게 이 작업을 수행해보겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드에 텍스트 또는 HTML을 복사하기 위한 간단한 Javascript 라이브러리입니다. 이 라이브러리는 document.execCommand를 사용하여 복사 작업을 처리하므로 기본 실행 파일과 권한이 필요하지 않습니다.

설치하기

먼저, Clipboard.js를 설치해야 합니다. 아래와 같이 HTML 파일의 <head> 섹션에 아래 스크립트 링크를 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

사용하기

이제, 복사할 요소를 선택하고 복사 버튼을 추가해보겠습니다. 예를 들어, 아래와 같은 HTML 구조를 가진 웹페이지가 있다고 가정해봅시다.

<div id="target">이 요소의 위치를 복사하려면 버튼을 클릭하세요.</div>
<button id="copy-button" data-clipboard-target="#target">복사</button>

위에서 data-clipboard-target="#target" 속성은 복사할 대상 요소의 ID를 지정하고 있습니다.

이제, 아래 스크립트를 추가하여 복사 버튼에 클릭 이벤트를 바인딩하고 Clipboard.js를 초기화합니다.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var clipboard = new ClipboardJS('#copy-button');
  
  clipboard.on('success', function(e) {
    console.log('복사 성공:', e.text);
  });
  
  clipboard.on('error', function(e) {
    console.log('복사 실패:', e.text);
  });
});
</script>

이제 웹페이지를 실행하고 버튼을 클릭하여 요소의 위치를 클립보드에 복사할 수 있습니다. 성공적으로 복사되면 ‘복사 성공’ 메시지가 콘솔에 표시됩니다.

추가 옵션

Clipboard.js는 더 많은 옵션을 제공하여 원하는 방식으로 복사 작업을 적용할 수 있습니다. 자세한 내용은 Clipboard.js 공식 문서를 참조하세요.

결론

Clipboard.js는 웹페이지에서 특정 요소의 위치를 복사하는데 유용한 도구입니다. 간단한 설치와 사용법으로 쉽게 적용할 수 있으며, 추가 옵션을 사용하여 원하는 방식으로 복사 작업을 조정할 수 있습니다.