clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js

clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다.

사용하기

clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다.

기본 문법

다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다.

var clipboard = new ClipboardJS( '.btn' );  // 클래스의 값이 btn인 요소를 복사
clipboard.on( 'success', function() {       // 복사에 성공했을 때
  // do something
} );
clipboard.on( 'error', function() {         // 복사에 실패했을 때
  // do something
} );

예제

Click을 클릭하면 Lorem Ipsum Dolor가 복사됩니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
    <style>
      body {
        font-family: Consolas, monospace;
      }
    </style>
  </head>
  <body>
    <p class="btn" data-clipboard-text="Lorem Ipsum Dolor">Click</p>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <script>
      var clipboard = new ClipboardJS( '.btn' );
      clipboard.on( 'success', function() {
        alert( 'Success' );
      } );
      clipboard.on( 'error', function() {
        alert( 'Fail' );
      } );
    </script>
  </body>
</html>

다양한 예제는 다운로드한 파일의 demo 폴더에 있습니다.

Related Posts

Brackets / 실시간 미리보기 사용하는 방법

Brackets / 실시간 미리보기 사용하는 방법

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다. 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다. 을 클릭하면… 크롬에서 HTML 문서를 보여줍니다. 코드에 커서를 위치시키면, 그 부분이 크롬에서 강조됩니다. 코드를 수정하면 ...

Brackets / 다운로드하고 설치하는 방법

Brackets / 다운로드하고 설치하는 방법

Brackets 브라켓은 웹 코딩에 최적화된 텍스트 에디터입니다. Adobe가 후원하는 오픈소스로, 누구나 자유롭게 사용할 수 있습니다. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It’s crafted from the ground up for web designers and front-end developers. 다운로드 브라켓 홈페이지에 접속합니다. Download Brackets를 ...

코딩용 글꼴 D2coding 설치하는 방법

코딩용 글꼴 D2coding 설치하는 방법

코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax는 홈페이지에 수식을 표현할 수 있게 해주는 오픈소스 자바스크립트입니다. 다음의 스크립트만 HTML 문서에 추가하면 수식을 넣을 수 있습니다. <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: } }); </script> <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 수식 입력은 LaTeX나 MathML 등으로 합니다. LaTeX으로 수식을 나타낸 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스 에디트플러스는 윈도우에서 사용하는 텍스트 에디터입니다. 가볍고, 유용한 기능을 포함하고 있으며, HTML, PHP, Java, C/C++, CSS, ASP, Perl, JavaScript, VB Script, Python, Ruby 등 다양한 언어에 대한 코드 하이라이트를 제공합니다. 또한 FTP/SFTP로 원격 서버에 접속하여 바로 코딩을 할 수 있는 기능을 포함하고 있습니다. 코드 하이라이트는 직접 만들어 사용할 수도 있고, 다른 사용자가 ...

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

카페24 쇼핑몰은 자체적으로 디자인 편집기를 제공합니다. 미리보기도 가능하고, 코드 하이라이트도 되는 편집기이기는 하지만, 전문 텍스트 에디터가 아니어서 불편한 점도 있습니다. 만약 에디트플러스를 사용한다면, 카페24에서 제공하는 플러그인을 이용하여 에디트플러스에서 코딩 작업을 할 수 있습니다. 에디트플러스 4 카페24의 플러그인이 지원하는 에디트플러스 버전은 4, 32비트입니다. 최신 버전은 5인데, 5에서는 플러그인을 사용할 수 없습니다. 에디트플러스 4는 ...

안드로이드 스튜디오 / 버전코드 변경하는 방법

안드로이드 스튜디오 / 버전코드 변경하는 방법

구글 플레이 콘솔에 앱을 등록할 때 앱에서 설정한 버전이 등록됩니다. 버전은 versionName과 versionCode가 있습니다. 상단의 0.1.0이 versionName, 하단에 있는 1이 versionCode입니다. 버전은 build.gradle에서 정합니다. versionCode와 versionName의 값을 수정하면 됩니다.

윈도우(Windows) 버전과 인터넷 익스플로러(IE : Internet Explorer) 버전

인터넷 익스플로러는 마이크로소프트가 제공하는 웹브라우저입니다. 현재는 점유율이 많이 낮아졌지만, 한때 95%가 사용할 정도로 절대 강자였던 프로그램입니다. IE의 가장 큰 특징은 윈도우(Windows)에 종속되어 있다는 것입니다. 즉, 윈도우 버전마다 설치할 수 있는 IE의 버전이 다릅니다. 최신 버전의 IE를 사용하려면 최신 버전의 윈도우를 사용해야 합니다. 사용자가 IE 때문에 윈도우를 살리는 없기에, 웹 개발자에게는 아주 골치아픈 ...

웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법

웹사이트가 IE8, IE9, IE10에서 잘 나오는지 테스트하는 방법

웹사이트를 만들 때 IE에서 잘 나오는지 확인을 해야 합니다. 다른 웹브라우저는 최신 버전을 사용한다고 가정을 하는데, IE는 윈도우에 종속되어 있어서 최신 버전을 사용할 수 없는 경우가 있거든요. 예를 들어 윈도우 XP는 IE8, 윈도우 Vista는 IE9까지만 사용할 수 있습니다. 각 버전의 IE에서 사이트가 잘 나오는지 테스트하는 방법 중의 하나는 IE 또는 Edge에 ...

SVG 이미지 파일 만드는 방법

SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...