[javascript] Clipboard.js를 활용한 웹페이지 개발

30 Nov 2023

javascript

이번에는 Clipboard.js를 활용하여 웹페이지에서 복사 버튼을 구현하는 방법에 대해 알아보겠습니다. Clipboard.js는 클립보드에 텍스트를 복사하거나 붙여넣기를 하는 동작을 간편하게 처리해주는 라이브러리입니다.

Clipboard.js란?

Clipboard.js는 ZeroClipboard의 개선된 버전으로, 클립보드 동작을 다루기 위한 간단한 자바스크립트 라이브러리입니다. 복사 버튼을 클릭하면 해당 요소의 값을 클립보드에 복사할 수 있습니다. Clipboard.js는 모바일 기기를 포함한 모든 브라우저에서 동작합니다.

설치 방법

먼저, Clipboard.js를 설치하기 위해 Clipboard.js 사이트로 이동하여 최신 버전의 소스 코드를 다운로드합니다.
다운로드한 소스 코드를 프로젝트에 포함시킵니다.
HTML 파일에서 <script> 태그를 사용하여 Clipboard.js를 로드합니다.

<script src="path/to/clipboard.min.js"></script>

사용 방법

복사 버튼을 만들고 싶은 요소에 data-clipboard-text 속성을 추가합니다. 이 속성의 값은 클립보드에 복사될 텍스트를 의미합니다.

<button class="btn" data-clipboard-text="복사할 텍스트">복사</button>

자바스크립트 파일에서 new ClipboardJS()를 사용하여 Clipboard 객체를 생성합니다. 생성자의 매개변수로는 복사 버튼의 선택자를 전달합니다.

<script>
    new ClipboardJS('.btn');
</script>

예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="path/to/clipboard.min.js"></script>
    <style>
        .btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="text" id="myInput" value="복사할 텍스트">
    <button class="btn" data-clipboard-target="#myInput">복사</button>

    <script>
        new ClipboardJS('.btn');
    </script>
</body>
</html>

위 예제 코드를 실행하면 “복사” 버튼을 클릭하면 입력한 텍스트가 클립보드에 복사됩니다. data-clipboard-target 속성을 사용하여 특정 요소의 값을 복사할 수도 있습니다.

이제 Clipboard.js를 활용하여 웹페이지에서 간편하게 텍스트를 복사하는 기능을 구현할 수 있습니다. 언제 어디서든 필요한 텍스트를 복사하기 위해 Clipboard.js를 활용해보세요.