복사 버튼 만들기 (HTML·CSS·자바스크립트 코드 전체 공개)

안녕하세요, 안다형입니다! 오늘 준비한 웹사이트 꿀기능은 복사 버튼입니다.

쿠폰 코드, 계좌번호, 소스코드처럼 방문자가 그대로 가져가야 하는 정보가 있을 때, 드래그해서 복사하게 두면 모바일에서 특히 불편합니다. 버튼 하나만 붙여주면 훨씬 친절해집니다.

1. HTML 구조 만들기

복사할 텍스트를 담을 영역과 버튼을 나란히 둡니다.

<div class="copy-box">
  <span id="copyText">국민 123456-78-901234</span>
  <button class="copy-btn" onclick="copyIt()">복사</button>
</div>
<p id="copyMsg" class="copy-msg">복사되었습니다!</p>

2. CSS로 모양 다듬기

기본 버튼 그대로 두면 투박하니 조금만 손봅니다.

.copy-box{display:flex;align-items:center;gap:10px;
  background:#f5f7fa;border:1px solid #e2e8f0;
  border-radius:10px;padding:14px 16px;}
.copy-btn{background:#4285f4;color:#fff;border:0;
  border-radius:8px;padding:8px 16px;font-weight:700;
  cursor:pointer;}
.copy-btn:hover{background:#3367d6;}
.copy-msg{display:none;color:#137333;font-weight:700;
  margin-top:8px;}

3. 자바스크립트로 복사 처리

요즘은 Clipboard API 한 줄이면 끝납니다. 구형 브라우저까지 챙기려면 예비 코드를 함께 넣습니다.

function copyIt(){
  var text = document.getElementById("copyText").innerText;
  if(navigator.clipboard){
    navigator.clipboard.writeText(text).then(showMsg);
  } else {
    var t = document.createElement("textarea");
    t.value = text; document.body.appendChild(t);
    t.select(); document.execCommand("copy");
    document.body.removeChild(t); showMsg();
  }
}
function showMsg(){
  var m = document.getElementById("copyMsg");
  m.style.display = "block";
  setTimeout(function(){ m.style.display = "none"; }, 1500);
}

복사 성공 후 1.5초 동안 안내 문구를 보여주는 것이 핵심입니다. 아무 반응이 없으면 방문자는 눌린 건지 아닌지 알 수 없어 계속 누르게 됩니다.

두 가지 복사 방식 비교

navigator.clipboard 는 https 같은 보안 컨텍스트에서만 동작합니다. 그래서 조건문으로 예비 코드를 함께 넣어두면 어떤 환경에서도 무난하게 동작합니다.

티스토리 글에 넣는 방법

1. 글쓰기 화면 오른쪽 위 기본모드를 눌러 HTML로 바꿉니다.
2. 위 세 조각(HTML · CSS · JS)을 원하는 위치에 붙여넣습니다. CSS와 JS는 각각 style, script 태그로 감싸주세요.
3. 다시 기본모드로 돌아와 발행하면 됩니다.

미리보기에서는 스크립트가 동작하지 않는 경우가 있으니, 실제로는 발행 후 확인하는 편이 정확합니다.

자주 묻는 질문

Q. 버튼을 눌러도 복사가 안 됩니다.

http 환경이거나 로컬 파일로 연 경우입니다. https 주소에서 다시 확인해 보세요. 티스토리는 기본이 https라 문제없습니다.

Q. 여러 개의 복사 버튼을 넣고 싶습니다.

id 대신 클래스를 쓰고, 버튼 클릭 시 this.parentNode 안의 텍스트를 읽도록 바꾸면 몇 개든 넣을 수 있습니다.

Q. 복사되는 텍스트에 줄바꿈을 넣고 싶습니다.

innerText 대신 textarea에 담아두고 그 값을 복사하면 줄바꿈이 그대로 유지됩니다.

마무리

복사 버튼은 코드 분량은 적지만 방문자 체감 편의는 큰 기능입니다. 계좌번호, 쿠폰 코드, 명령어를 자주 안내하는 블로그라면 하나 만들어두고 계속 재사용해 보세요.

 

함께 보면 좋은 글

• 예쁜 버튼 만들기 CSS
• 맥 스타일의 창 만들기 CSS
• 로또 번호 생성기 만드는 방법 html
• 홈페이지 떠있는 배너 만들기