[Blogger] 제미나이 스타일 코드 블럭 (1): 복사 버튼과 세련된 CSS 디자인 만들기

블로그스팟에 복사 버튼 있는 코드 박스 만드는 또 다른 방법을 알았다, 구글 제미나이 덕분에. Gemini 3으로 업그레이드 후 확실히 좋아졌음이 느껴진다. 좀 더 세련된 스타일의 코드 박스 구현 방법을 정리한다.

복사 버튼 코드 박스 생성 방법

1. 블로그스팟 관리자 화면 [테마] → [맞춤설정] → [고급] → [CSS 추가]에 아래의 코드를 삽입한다.

CSS


/* 제미나이 스타일 전체 컨테이너 */
.gemini-code-box {
  margin: 24px 0;
  background-color: #f8f9fa; /* 제미나이 코드 영역 배경 */
  border-radius: 12px;
  border: 1px solid #e3e3e3;
  overflow: hidden;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* 상단 헤더 */
.gemini-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background-color: #f8f9fa; 
  color: #444746;
  font-size: 13px;
  font-weight: 500;
}

/* 복사 버튼 */
.gemini-copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #444746;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-size: 13px;
}

.gemini-copy-btn:hover {
  background-color: #eff1f3;
}

/* 복사 성공 시 파란색 포인트 */
.gemini-copy-btn.copied {
  color: #0b57d0 !important;
}

/* 코드 본문 영역 */
.gemini-code-box pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  background-color: #ffffff; /* 코드 실제 배경은 흰색 또는 아주 밝은 회색 */
  border-top: 1px solid #e3e3e3;
}

/* 코드 본문의 두께감과 선명도 조절 */
.gemini-code-box code {
  font-family: 'Roboto Mono', 'Consolas', monospace !important;
  font-weight: 500 !important; /* 기본보다 약간 더 두꺼운 500 설정 */
  font-size: 14px;
  line-height: 1.7;
  color: #1f1f1f;
  
  /* 글씨를 더 선명하게 만드는 옵션 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 하이라이트되는 핵심 키워드들을 더 강조하고 싶을 때 */
.hljs-keyword, .hljs-selector-tag, .hljs-title {
  font-weight: 700 !important; /* 예약어 등은 아주 두껍게 표시 */
}

2. 자바스크립트도 CSS처럼 테마 설정에 미리 심어둘 수 있다. 이렇게 하면 모든 글에서 기능을 공유하므로 글 쓸 때 자바스크립트를 넣을 필요가 없어진다.

1) 블로그스팟 관리자 메뉴에서 [테마] → 맞춤설정 옆 화살표(▼) → [HTML 편집]으로 들어간다.

2) 키보드 Ctrl + F를 눌러 </body> 태그를 찾는다. (맨 아래쪽에 있음)

3) </body> 바로 윗줄에 아래 자바스크립트 코드를 붙여넣고 저장을 누른다.

JavaScript


<script>
function copyGeminiCode(button) {
  const codeBox = button.closest('.gemini-code-box');
  const codeText = codeBox.querySelector('code').innerText.trim();
  
  // 아이콘 SVG들
  const copyIcon = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
  const checkIcon = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0b57d0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;

  navigator.clipboard.writeText(codeText).then(() => {
    const iconSpan = button.querySelector('.icon-placeholder');
    const textSpan = button.querySelector('.text-placeholder');
    
    // 상태 변경
    button.classList.add('copied');
    iconSpan.innerHTML = checkIcon;
    textSpan.innerText = "복사됨";

    // 2초 후 원상복구
    setTimeout(() => {
      button.classList.remove('copied');
      iconSpan.innerHTML = copyIcon;
      textSpan.innerText = "코드 복사";
    }, 2000);
  });
}
</script>

3. 글 쓸 때마다 넣는 것 (HTML 구조)

이제 글을 쓸 때 자바스크립트 걱정 없이, 코드 박스의 '모양'만 HTML 모드에서 넣어주면 된다.

<pre><code>와 </code></pre> 사이에 삽입하고자 하는 코드를 넣으면 끝.

※ <는 <로, >는 >로 변환.

HTML


<div class="gemini-code-box">
  <div class="gemini-code-header">
    <span>HTML</span>
    <button class="gemini-copy-btn" onclick="copyGeminiCode(this)">
      <span class="icon-placeholder">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
      </span>
      <span class="text-placeholder">코드 복사</span>
    </button>
  </div>
  <pre><code class="language-html">
// 여기에 복사할 코드를 넣으세요
function helloWorld() {
  console.log("Hello, Blogspot!");
}
  </code></pre>
</div>

오늘의 한마디

'(예시 2)'가 더 세련되 보인다. 내 말이 맞지?

(예시 1) 복사 버튼 있는 코드 박스

(예시 2) 복사 버튼 있는 코드 박스 제미나이 스타일

이 블로그 검색

더한스픽