[javascript] Clipboard.js를 사용하여 텍스트 복사 기능 모바일에서 사용하기

30 Nov 2023

소개

Clipboard.js는 웹 개발자들이 클립보드에 텍스트를 복사하는 기능을 쉽게 추가할 수 있는 라이브러리입니다. 사용자가 웹 페이지에서 원하는 텍스트를 간편하게 클립보드로 복사할 수 있습니다.

이번 가이드에서는 Clipboard.js를 사용하여 모바일 기기에서 텍스트 복사 기능을 구현하는 방법에 대해 알아보겠습니다.

텍스트 복사 기능을 모바일에서 사용하기 위해 다음과 같은 것들이 필요합니다:

clipboard.min.js 파일: 이 파일은 Clipboard.js 라이브러리를 포함하고 있습니다. 공식 GitHub 저장소에서 다운로드할 수 있습니다.
텍스트 복사하고자 하는 대상 엘리먼트: 복사할 텍스트를 담고 있는 HTML 엘리먼트가 필요합니다. 이 엘리먼트에는 id 속성이 있어야 합니다.
버튼 엘리먼트: 텍스트를 복사하기 위한 버튼 엘리먼트가 필요합니다. 이 버튼에는 data-clipboard-target 속성이 있어서 텍스트를 복사할 대상 엘리먼트의 id를 참조해야 합니다.

clipboard.min.js 파일을 다운로드하고 프로젝트 파일에 포함시킵니다.
HTML 파일에 clipboard.min.js 파일을 포함시키는 스크립트 태그를 추가합니다.
```
 <script src="path/to/clipboard.min.js"></script>
```
텍스트를 복사하고자 하는 대상 엘리먼트를 생성하고 id 속성을 지정합니다.
```
 <div id="copyTarget">복사할 텍스트입니다.</div>
```
버튼 엘리먼트를 생성하고 data-clipboard-target 속성을 통해 텍스트를 복사할 대상 엘리먼트를 지정합니다.
```
 <button data-clipboard-target="#copyTarget">텍스트 복사</button>
```
스크립트 파일에 다음 코드를 추가하여 Clipboard.js를 초기화합니다.
```
 var clipboard = new ClipboardJS('button');
```

이제 텍스트 복사 버튼을 클릭하면 대상 엘리먼트의 텍스트가 클립보드로 복사됩니다. 모바일 브라우저에서도 동일하게 작동할 것입니다.

Clipboard.js를 사용하면 모바일 기기에서도 웹 페이지에서 텍스트 복사 기능을 손쉽게 구현할 수 있습니다. 위 가이드에서는 기본적인 사용 방법을 소개했으니, 필요에 따라 자세한 공식 문서를 참고하여 더욱 다양한 기능을 활용해보세요.