웹 개발을 하다 보면 종종 사용자가 웹페이지의 특정 부분을 클립보드에 복사해야 하는 경우가 있습니다. 이를 수행하기 위해 Clipboard.js라는 라이브러리를 사용할 수 있습니다.

Clipboard.js란?

Clipboard.js는 자바스크립트로 구현된 클립보드 복사 기능을 손쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 사용자가 웹페이지의 텍스트나 HTML 요소 등을 클립보드에 복사할 수 있도록 지원합니다.

설치하기

먼저, Clipboard.js를 사용하기 위해 라이브러리를 설치해야 합니다. 다음 명령어로 npm으로 Clipboard.js를 설치합니다.

npm install clipboard

사용하기

Clipboard.js를 사용하여 웹페이지에서 복사한 내용의 특정 부분을 선택하는 방법에 대해 알아보겠습니다.

1. HTML 파일에 Clipboard.js 라이브러리를 추가합니다.

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

1. 복사 버튼을 만들고 해당 버튼에 클릭 이벤트를 연결합니다.

<button id="copyBtn">Copy</button>

1. 자바스크립트로 Clipboard.js를 초기화하고 복사 버튼에 복사할 내용과 이벤트 핸들러를 지정합니다.

<script>
    var clipboard = new ClipboardJS('#copyBtn', {
        text: function() {
            // 복사할 내용 선택
            var selectedText = window.getSelection().toString();
            return selectedText;
        }
    });

    clipboard.on('success', function(e) {
        console.log('복사 완료:', e.text);
    });

    clipboard.on('error', function(e) {
        console.error('복사 실패:', e.action);
    });
</script>

위 코드에서 text 함수에서 window.getSelection().toString()을 사용하여 현재 선택된 텍스트를 반환합니다. 이 함수를 변경하면 복사될 텍스트를 선택하는 방식을 변경할 수 있습니다.

1. 웹페이지에 해당하는 부분에 복사 버튼을 추가합니다.

<div>
    <p>복사할 내용을 선택하고 복사 버튼을 클릭하세요.</p>
    <button id="copyBtn">Copy</button>
</div>

위 코드에서는 <p> 요소 내의 텍스트를 복사할 수 있도록 설정되어 있습니다. 원하는 요소에 id 속성을 제공하여 해당 요소의 텍스트를 복사할 수 있습니다.

결론

Clipboard.js를 사용하면 웹페이지에서 특정 부분을 선택하고 클립보드에 복사하는 기능을 쉽게 구현할 수 있습니다. 웹 개발 시에는 사용자의 편의성을 높이기 위해 이러한 복사 기능을 추가할 수 있습니다.

참고자료

• Clipboard.js 공식 문서
• Clipboard.js GitHub 저장소