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

30 Nov 2023

javascript

웹 개발에서는 종종 사용자가 웹페이지의 특정 요소의 링크를 복사하도록 하는 기능이 필요합니다. 이를 위해 Clipboard.js라는 Javascript 라이브러리를 사용할 수 있습니다. Clipboard.js는 클립보드에 텍스트를 복사하고 붙여넣기할 수 있는 기능을 제공합니다.

Clipboard.js 설치하기

Clipboard.js를 사용하기 위해서는 먼저 해당 라이브러리를 웹페이지에 추가해야 합니다. 이를 위해 다음과 같이 코드를 작성합니다.

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

위 코드를 <head> 태그 안에 추가합니다.

특정 요소의 링크 복사하기

Clipboard.js를 사용하여 특정 요소의 링크를 복사하는 방법은 간단합니다. 먼저, HTML 요소에 data-clipboard-text 속성을 추가하고 복사할 링크를 해당 속성에 지정합니다. 다음으로, 자바스크립트 코드에서 Clipboard.js를 초기화하고 특정 요소에 클릭 이벤트를 추가합니다.

<button class="copy-link" data-clipboard-text="https://www.example.com">링크 복사하기</button>

<script>
    var clipboard = new ClipboardJS('.copy-link');
    
    clipboard.on('success', function(e) {
        console.log('링크가 성공적으로 복사되었습니다.');
        e.clearSelection();
    });
    
    clipboard.on('error', function(e) {
        console.log('복사 중 오류가 발생하였습니다.');
    });
</script>

위 코드에서 .copy-link 클래스를 가진 버튼을 클릭하면 해당 버튼의 data-clipboard-text 속성에 지정된 링크가 클립보드에 복사됩니다. 복사가 성공하면 success 이벤트가 발생하고, 복사 중 오류가 발생하면 error 이벤트가 발생합니다.

결론

Clipboard.js는 웹페이지에서 특정 요소의 링크를 복사하는 기능을 구현하는 데 유용한 라이브러리입니다. 위의 예제를 참고하여 웹페이지에 Clipboard.js를 적용해 보세요.

참고 자료

Clipboard.js 공식 문서