블로그스팟 복사 버튼 코드 박스 만들기! 며칠간 폭풍 검색으로 찾아낸 최종 코드

복사 버튼 있는 코드 박스 예시 화면 블로그스팟에 복사 버튼이 있는 코드 박스를 만들어 보자. 며칠 간 폭풍 검색으로 몇 개의 코드를 찾아서 적용해 봤지만 구현이 안되서, 관둘까 하는 찰나에 드디어 알아냈다. 필요한 사람들을 위해 코드를 올려본다.

복사 버튼 코드 박스 만들기

1) CSS_테마 HTML 편집에서 다음의 CSS 코드를 </b:skin> 바로 위에 추가한다.

- 글자 크기는 font-size의 숫자로 조정하면 됨.

블로그스팟 HTML 편집화면 </b:skin> 위에 CSS 코드 삽입 화면
블로그스팟 HTML 편집화면 </b:skin> 위에 CSS 코드 삽입 화면

CSS 

/* 코드 박스 스타일 + 복사 버튼 위치 */
.code-block {
  position: relative;
  margin: 1em 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
}

.code-block pre {
  margin: 0;
  padding: 16px;
  overflow: auto;
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  background: #f7f7f7; /* 필요시 변경 */
}

/* 복사 버튼 */
.code-block .copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: rgba(0,0,0,0.06);
  backdrop-filter: blur(2px);
}
.code-block .copy-btn:active { transform: translateY(1px); }

/* 복사 성공 툴팁(간단) */
.code-block .copy-btn.copied::after {
  content: "복사됨";
  position: absolute;
  top: -26px;
  right: 0;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  background: rgba(0,0,0,0.75);
  color: #fff;
}

2) JavaScript_테마 HTML 편집에서 '복사 버튼 동작'을 하는 자바스크립트를 </body> 바로 위에 추가한다.

블로그스팟 HTML 편집화면 </body> 위에 JavaScript 삽입 화면
블로그스팟 HTML 편집화면 </body> 위에 JavaScript 삽입 화면

JavaScript 

<script>
// DOM이 준비되면 코드블록마다 복사 버튼 추가
(function(){
  function createButton() {
    var btn = document.createElement('button');
    btn.className = 'copy-btn';
    btn.type = 'button';
    btn.innerText = '복사';
    return btn;
  }

  function handleCopyClick(btn, codeEl) {
    var text = codeEl.innerText;
    if (!navigator.clipboard) {
      // 구형 브라우저 대체
      var textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      try { document.execCommand('copy'); } catch(e) {}
      document.body.removeChild(textarea);
    } else {
      navigator.clipboard.writeText(text).catch(function(err){
        // 실패해도 무시
      });
    }

    // 시각적 피드백
    btn.classList.add('copied');
    setTimeout(function(){ btn.classList.remove('copied'); }, 1500);
  }

  function initCodeCopy() {
    // 이미 래핑된 것은 건너뜀
    var existing = document.querySelectorAll('.code-block');
    if (existing.length === 0) {
      var pres = document.querySelectorAll('pre > code');
      pres.forEach(function(code){
        var pre = code.parentElement;
        // 래퍼 div 만들기
        var wrap = document.createElement('div');
        wrap.className = 'code-block';
        pre.parentNode.insertBefore(wrap, pre);
        wrap.appendChild(pre);

        var btn = createButton();
        wrap.appendChild(btn);

        btn.addEventListener('click', function(){ handleCopyClick(btn, code); });
      });
    } else {
      // 이미 한 번 처리된 경우(새로 로드된 포스트 등)를 위해 다시 바인딩
      document.querySelectorAll('.code-block').forEach(function(wrap){
        if (!wrap.querySelector('.copy-btn')) {
          var code = wrap.querySelector('code');
          var btn = createButton();
          wrap.appendChild(btn);
          btn.addEventListener('click', function(){ handleCopyClick(btn, code); });
        }
      });
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCodeCopy);
  } else {
    initCodeCopy();
  }
})();
</script>

3) 글쓰기에서 HTML 모드로 전환한 뒤 아래처럼 코드를 넣어준다.

<pre><code class=" language-js">와 </code></pre> 사이에 '복사 가능한 코드'를 넣어주면 끝.

HTML 

<pre><code class="language-js">
// 예: 복사 가능한 코드
function hello() {
  console.log('안녕');
}
</code></pre>


오늘의 한마디

요즘은 ChatGPT나 구글의 Gemini가 있으니 원하는 코드를 바로 찾을 수 있는데, 복사 버튼 있는 코드 박스는 적용하는데 꽤나 어려웠음. 내가 코알못이 아니었다면, 며칠이나 걸릴 일은 아니겠지?

복사 버튼 있는 코드 박스 예시 화면
복사 버튼 있는 코드 박스 생성 예시

※ 참고:

  • the web trick
  • aaronluna.dev
  • ChatGPT
  • Gemini


※ 2025.12.26. 글 수정

- 이 글에서 보여지는 코드는 위의 예시 이미지처럼 '복사' 버튼만 있는 코드임. 사용에는 문제가 없지만 '복사' 버튼을 누르면 '복사됨' 글씨가 잘 안보이는 현상과 디자인의 문제로 새 코드 소개 글을 작성함.


Related Posts

댓글

댓글 쓰기