[티스토리꾸미기] ChatGPT가 알려준 클립보드 복사 버튼 만드는 방법

1. 해당 포스팅은 스포일러를 포함하고 있을 수 있습니다.
2. 사용하시다가 불편하신 점이 있다면 방명록으로 남겨주세요.
3. 왕래는 하지 않습니다.

728x90

728x170

내 블로그는 드래그도 오른쪽 버튼 허용도 되어 있지 않다. 하지만 드문드문하게 클립보드에 복사했으면 하는 부분이 생길 수 있고 버튼이 있을 것 같아서 ChatGPT에게 클립보드 복사할 수 있는 방법에 대해 물어보았고, 이를 정리한 내용이다.

클립보드에 복사할 수 있는 스크립트

1. 블로그 편집 > 꾸미기 > 스킨 편집 > html 편집 > html

2. <head></head> 사이에 아래 코드를 집어넣는다.

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

[클립보드버튼]head사이에넣을코드.txt

0.00MB

3. </body> 바로 위에 아래 코드를 입력해준다.

<script>
  var clipboard = new ClipboardJS('.copybtn');
  
  clipboard.on('success', function(e) {
    alert('텍스트가 클립보드에 복사되었습니다.');
    e.clearSelection();
  });
  
  clipboard.on('error', function(e) {
    alert('복사에 실패하였습니다. 수동으로 복사해주세요.');
  });
</script>

[클립보드버튼]body사이에넣을코드.txt

0.00MB

4. 저장 → 여기까지 하면 준비는 끝이다.

5. 서식에 다음 코드를 저장해둔다.

<button class="copybtn" data-clipboard-text="복사하고 싶은 내용">복사하기</button>

[클립보드버튼]서식에넣을코드.txt

0.00MB

data-clipboard-text 안에 복사하고 싶은 내용을 적으면 된다. 아래 예시를 보고 참고하시면 되겠다.

ex)

<button class="copybtn" data-clipboard-text="복사하고 싶은 내용">이룰 수 없는 꿈</button>

클립보드에 복사되는 내용: 복사하고 싶은 내용

여러분에게 보이는 내용: 이룰 수 없는 꿈

<button class="copybtn" data-clipboard-text="내 어릴 적 꿈은">이룰 수 없는 꿈</button>

클립보드에 복사되는 내용: 내 어릴 적 꿈은

여러분에게 보이는 내용: 이룰 수 없는 꿈

! 여기에서 잠깐

3번과 5번에서 copybtn이라고 적힌 부분이 있는데, 여기 이름은 본인이 수정해도 된다. 앞에 점(.)이나 따옴표(")는 건드리지 말고 영문을 바꿔주면 된다. 단, 3번을 바꾸면 5번을 바꿔야 하고, 5번을 바꾸면 3번을 같이 바꿔줘야 작동한다.

버튼 꾸미기

1. 블로그 편집 > 꾸미기 > 스킨 편집 > html 편집 > CSS

2. 코드 추가해주면 된다. 앞서 말했듯 copybtn을 바꿨다면, CSS를 적용할 때도 수정해서 작성해주면 된다.

.copybtn{
	넣고 싶은 조건 넣기
}

3. 현재 내가 쓰고 있는 css는 다음과 같이 사용하고 있다.

.copybtn{
	background-color: rgba(66, 184, 131, 0.6);
    border: none;
    border-radius: 30px;
    padding: 10px;
}

CSS를 그대로 활용하면 아래처럼 보인다.

background-color는 배경색이다. 원하는 색상으로 넣어주면 된다.

ex) 첫번째가 가장 무난한 방법이긴 하다.

background-color: #facac9;

background-color: rgba(66,184,131, 0.6);

border는 선을 의미한다. none이라고 적은 건, 선을 사용하지 않겠다는 의미로 적어놓았다.

boder-radius는 선의 굴곡이라고 할 수 있을 것 같다. 각진 것보다 조금 둥근 걸 좋아하는 나로서는 30px 정도 주었다. 100%정도 주면 거의 동그라미처럼 보인다.

padding은 내부 여백 정도로 이해하면 될것 같다. padding 없이는 글씨가 갇혀보여서 설정하게 됐다. 물론 설정하든 말든 그것은 개인의 차이라고 생각한다.

티스토리 관련 글 모아보기

목차 꾸미기 1탄

[스킨] GRAVITY SKIN 8 | 자동 목차 기능 넣기 1. GRAVITY SKIN 8에 자동 목차 기능을 넣자고 생각하게 된 계기 아무래도 목차를 사용하는데, 목차를 볼 수 있으면 좀 좋지 않을까 싶어서 해당 내용을 어떻

feverpitch.tistory.com

[정보] 티스토리 카테고리명 쪼개기(?)

※ 본문에 있는 티스토리 치환자에 ★을 넣은 이유는 티스토리 치환자이기 때문에 별이 없으면 자동적으로 치환되어 보이기 때문에 ★을 붙여서 치환자를 보여드리고자 함입니다. 실제로 ★이

feverpitch.tistory.com

[정보] 티스토리 보면 스킨 예쁜 거 많던데…. 1탄

티스토리를 사용하다 보면 스킨 예쁜 게 많다. 세상에 예쁜 옷이 많듯 예쁜 스킨도 엄청 많은데 정작 내가 찾아보려거나 하면 거의 없다?! 노노. 모든 사람들은 다 스킨 발품 파는 거예요. 1. 티스

feverpitch.tistory.com

티스토리모바일웹과 관련된 글 모아보기

[정보] 티스토리 모바일웹 본문 꾸미기 | 밑줄 형광펜 효과주기

1. 「티스토리 모바일웹 본문 꾸미기」를 시작하게 된 계기 사실 내 블로그를 봐주시는 분이 아실지는 모르겠지만, 내 블로그는 티스토리에 검색만 해도 나오는 "밑줄 형광펜 효과"를 활용해서

feverpitch.tistory.com

[정보] 티스토리 모바일웹 본문 꾸미기 1탄 | 폰트 바꾸기

1. 티스토리 모바일웹 본문 꾸미기 1탄 티스토리 모바일웹 본문 꾸미기 1탄으로 폰트를 바꾸는 것을 가지고 와보았다. 어디까지나 나는 자기만족용으로 사용하고 있는 부분이 있고, 여차하면 모

feverpitch.tistory.com

GRAVITY SKIN 8 스킨 수정 일지 모음

[스킨] GRAVITY SKIN 8 | 작전명: IDOL KRYSTAL

1. 스킨 콘셉트 | 작전명: IDOL KRYSTAL 음, 첨부했던 이미지가 원본이 그렇게 큰 상태가 아니라서 그런지 컴퓨터로 보게 되면 이미지 화질이 그렇게 좋아 보이진 않는다. (그러니까 모바일로 보시라.

feverpitch.tistory.com

[스킨] GRAVITY SKIN 8 | 스킬바 활용

GRAVITY SKIN 8 사이드바에는 스킬바가 있다. 보통 다운로드하여 사용하면 example 30이라고 적혀있는 부분이 있을 것이다. 나는 호기심(???)이라고 적고 숫자는 그대로 놔두었는데, 어떤 식으로 활용을

feverpitch.tistory.com

[스킨] GRAVITY SKIN 8 | 내가 수정하는 스킨 수정 일지 #1

거창하게 「스킨 수정 일지」라고 적어두긴 했지만, 솔직히 말하자면 큰 의미는 없다. 그냥 내가 쓰다가 수정하고 싶었던 부분을 수정하는 것일 뿐이라 그렇다. 물론 이걸 보고 어떤 분이 참고

feverpitch.tistory.com

방금 읽은 이 글이 도움이 되었다면 공감, 댓글을 남겨주세요. :)

그리드형

LIST

저작자표시 비영리 변경금지

[티스토리꾸미기] ChatGPT가 알려준 클립보드 복사 버튼 만드는 방법

클립보드에 복사할 수 있는 스크립트

버튼 꾸미기

티스토리 관련 글 모아보기

티스토리모바일웹과 관련된 글 모아보기

GRAVITY SKIN 8 스킨 수정 일지 모음

티스토리툴바