이번 글에서는 Clipboard.js라는 라이브러리를 사용하여 웹페이지에서 특정 요소를 동적으로 생성하고 복사하는 방법을 알아보겠습니다.

Clipboard.js란?

Clipboard.js는 클립보드에 텍스트 또는 HTML을 복사하는 데 사용되는 라이브러리입니다. 이 라이브러리는 사용하기 간편하고 모든 최신 브라우저에서 작동합니다.

사용 준비

먼저 Clipboard.js를 사용하기 위해 필요한 파일을 다운로드하거나 CDN 링크를 추가해야 합니다. 다음은 CDN을 사용하는 예입니다.

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

요소 생성 및 복사하기

이제 Clipboard.js를 사용하여 웹페이지에서 특정 요소를 동적으로 생성하고 복사하는 방법을 알아보겠습니다.

먼저, 요소를 생성할 HTML 템플릿을 만듭니다.

<div id="copy-container">
  <p>복사할 요소입니다.</p>
  <button class="btn" data-clipboard-target="#copy-container">복사</button>
</div>

위 예제에서는 “copy-container”라는 ID를 가진 div 요소 안에 복사할 요소와 복사 버튼이 있습니다. 버튼에는 “data-clipboard-target” 속성을 사용하여 복사할 대상을 지정합니다.

다음으로, JavaScript 코드를 작성하여 클립보드 복사 기능을 구현합니다.

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
  console.log('복사되었습니다: ' + e.text);
});

clipboard.on('error', function(e) {
  console.error('복사 실패: ', e.trigger);
});

위 코드에서는 “btn” 클래스를 가진 버튼 요소를 선택하고, “success” 이벤트와 “error” 이벤트를 감지하여 성공 및 실패 메시지를 출력합니다.

마무리

이제 Clipboard.js를 사용하여 웹페이지에서 특정 요소를 동적으로 생성하고 복사하는 방법을 알아보았습니다. 이를 통해 웹사이트에서 사용자가 편리하게 텍스트나 HTML을 복사할 수 있도록 구현할 수 있습니다. Clipboard.js에 대한 자세한 내용은 공식 문서를 참조하시기 바랍니다. (https://clipboardjs.com)

참고: 본 예제는 Clipboard.js 버전 2.0.8을 기준으로 작성되었습니다.