[javascript] Clipboard.js를 사용하여 웹페이지에서 여러 요소 일괄 복사하기

30 Nov 2023

javascript

웹 개발을 하다보면, 사용자가 특정 요소(텍스트, 이미지 등)를 복사할 수 있도록 하는 기능이 필요할 때가 있습니다. 이번 포스트에서는 Clipboard.js를 사용하여 웹페이지에서 여러 요소를 일괄 복사하는 방법을 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 웹에서 클립보드 기능을 제어하는 자바스크립트 라이브러리입니다. 이 라이브러리는 사용자가 클립보드에 복사할 수 있도록 텍스트, HTML, 이미지 등 다양한 요소를 선택하고 복사하는 기능을 제공합니다.

Clipboard.js 설치하기

Clipboard.js를 사용하기 위해 먼저 해당 라이브러리를 다운로드하고 웹페이지에 포함해야 합니다. 아래의 코드를 <head> 태그 안에 추가해주세요.

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

복사 기능 추가하기

이제 Clipboard.js를 사용하여 웹페이지에서 여러 요소를 복사할 수 있는 기능을 추가해보겠습니다. 우선, 복사할 요소에 data-clipboard-target 속성을 추가하고 값을 해당 요소의 ID로 설정해야 합니다. 그리고 복사 버튼을 만들어 클릭 이벤트를 통해 복사 기능을 동작하도록 해야 합니다. 아래의 예제 코드를 참고해주세요.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
</head>
<body>
  <h1 id="element1">텍스트 복사 예제</h1>
  <img id="element2" src="image.jpg" alt="이미지 복사 예제">

  <div>
    <button class="copy-button" data-clipboard-target="#element1">텍스트 복사</button>
    <button class="copy-button" data-clipboard-target="#element2">이미지 복사</button>
  </div>

  <script>
    var clipboard = new Clipboard('.copy-button');
    
    clipboard.on('success', function(e) {
      console.log('복사 완료!', e.text);
    });
    
    clipboard.on('error', function(e) {
      console.error('복사 실패!', e.text);
    });
  </script>
</body>
</html>

위의 코드에서는 data-clipboard-target 속성을 통해 복사할 요소의 ID를 지정하고, 해당 요소를 선택하는 복사 버튼을 생성했습니다. Clipboard.js는 새로운 Clipboard 인스턴스를 생성하여 복사 버튼에 대한 이벤트 리스너를 등록합니다. 복사를 성공할 경우 success 이벤트가 발생하고, 실패할 경우 error 이벤트가 발생합니다.

위의 예제 코드를 실행하면 웹페이지에서 텍스트와 이미지를 복사할 수 있는 버튼이 생성되고, 복사가 성공할 경우 콘솔에 ‘복사 완료!’ 메시지가 출력됩니다.

결론

Clipboard.js를 사용하면 간단하게 웹페이지에서 여러 요소를 일괄 복사할 수 있습니다. 해당 자바스크립트 라이브러리를 활용하여 사용자 경험을 향상시키고, 사용자들이 원하는 요소를 손쉽게 복사할 수 있도록 만들어보세요.

참고 자료

Clipboard.js GitHub