더보기 커스텀

더보기(summary) 커스텀

• 접기/펼치기 박스 커스텀
• 다크 모드 대응

(jekyll-theme-chirpy 7.2.4 기준)

---

1️⃣ assets\css\jekyll-theme-chirpy.scss 코드 추가

/* 접기/펼치기 박스 커스텀 */
.custom-collapse {
  border: 1px dashed #d3d3d3; /* 연한 점선 색상 */
  border-radius: 4px;
  padding: 20px;
  margin: 15px 0;
  /* 라이트 모드에선 연회색, 다크 모드에선 진한 회색 */
  background-color: #fbfbfb; 
}

/* 다크 모드 대응 */
[data-mode='dark'] .custom-collapse {
  background-color: #252525;
  border-color: #444;
}

.custom-collapse summary {
  cursor: pointer;
  color: #adb5bd; /* '닫기' 텍스트를 연한 회색으로 */
  font-size: 0.95rem;
  list-style: none; /* 기본 화살표 숨기기 (선택 사항) */
  outline: none;
}

/* 마우스를 올렸을 때 (Hover) */
.custom-collapse summary:hover {
  color: #495057; /* 마우스 호버 시: 진한 회색으로 변경 */
}

.custom-collapse[open] summary {
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f3f5;
  padding-bottom: 8px;
}

---

2️⃣ 마크다운에서 사용

### Q. 템플릿?
<details class="custom-collapse">
  <summary>답변 보기</summary>
    기능은 결정되어 있지만 자료형은 결정되어 있지 않은 문법입니다. 
    즉, 타입에 의존하지 않은 함수나 클래스를 작성할 수 있게 해줍니다.
</details>