갤러리 뷰

카테고리, 태그의 포스트 목록을 갤러리 뷰 형태로 커스텀

• 기존 테마와 동일하게 라이트/다크 모드 전환 가능
• 마우스 호버 시 애니메이션
• 썸네일 줌인
• description 표시
• 카테고리별 뷰 타입 설정 파일(yml)

(jekyll-theme-chirpy 7.2.4 기준)

---

1️⃣ _data\category_views.yml 생성

gallery_view:
  - Personal
  - Taste


list_view:
  - Study
  - Blogging

카테고리를 각각 어떤 뷰로 보여줄 건지 정의할 category_views.yml 을 만든다.

---

2️⃣ assets\css\jekyll-theme-chirpy.scss 수정

• 뷰 종류가 많아지면 /pages/_category-gallery.scss 처럼 분리해서 관리하는 것도 좋을 것 같다.

/* append your custom style below */

/* 갤러리 전체 그리드 레이아웃 - 반응형 적용 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 최소 200px, 최대 1fr로 자동 채움 */
  gap: 1rem; /* 아이템 간 간격 */
  margin-top: 2rem; /* 위쪽 여백 */
}

/* 갤러리 카드 개별 스타일 */
.gallery-card {
  background: var(--card-bg);               /* 다크/라이트 모드에 따른 배경색 */
  border: 1px solid var(--main-border-color); /* 다크/라이트 모드에 따른 테두리색 */
  border-radius: 8px;                       /* 둥근 모서리 */
  overflow: hidden;                         /* 내부 넘침 숨김 */
  transition:                              /* 배경, 글자색, 테두리, 그림자, 이동 변환 효과 */
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
  color: var(--text-color);                /* 다크/라이트 모드에 따른 글자색 */
}

/* 카드 호버 시 효과 */
.gallery-card:hover {
  box-shadow: var(--card-shadow);          /* 다크/라이트 모드에 따른 그림자 효과 */
  transform: translateY(-5px);              /* 위로 살짝 이동 */
}

/* 카드 내 이미지 스타일 */
.gallery-card img {
  width: 100%;                             /* 가로 100% */
  height: 160px;                           /* 고정 높이 */
  object-fit: cover;                       /* 이미지 비율 유지하며 꽉 채우기 */
  background: var(--img-bg);               /* 이미지 로딩 전 배경 (다크/라이트 모드 적용) */
  transition: transform 0.3s ease;         /* 이미지 확대 효과 애니메이션 */
  loading: lazy;                          /* 이미지 지연 로딩 */
}

/* 이미지 호버 시 확대 효과 */
.gallery-card img:hover {
  transform: scale(1.05);
}

/* 카드 내 텍스트 영역 */
.gallery-info {
  padding: 0.5rem;                       /* 안쪽 여백 */
}

/* 카드 제목 스타일 */
.gallery-info h3 {
  margin: 0;                             /* 기본 마진 제거 */
  font-size: 1.1rem;                    /* 글자 크기 */
  color: var(--heading-color);          /* 다크/라이트 모드에 따른 제목 색상 */
  transition: color 0.3s ease;           /* 색상 변화 애니메이션 */
}

/* 카드 날짜 스타일 */
.gallery-date {
  font-size: 0.85rem;                   /* 작은 글자 크기 */
  color: var(--text-muted-color);       /* 다크/라이트 모드에 따른 흐린 텍스트 색상 */
  transition: color 0.3s ease;           /* 색상 변화 애니메이션 */
}

.gallery-description {
  font-style: italic;
  font-size: 0.8rem; 
  margin: 0.3rem 0;
  color: var(--text-muted-color);
}

/* 태그 스타일 (갤러리 내에 태그가 있다면) */
.gallery-tags .tag {
  background-color: var(--tag-hover);   /* 다크/라이트 모드에 따른 태그 배경색 */
  color: var(--text-color);              /* 다크/라이트 모드에 따른 태그 글자색 */
  border-radius: 4px;                   /* 둥근 모서리 */
  padding: 2px 6px;                     /* 태그 안쪽 여백 */
  font-size: 0.75rem;                   /* 작은 글자 크기 */
  margin-right: 5px;                    /* 오른쪽 마진 */
  transition: background-color 0.3s ease, color 0.3s ease; /* 배경, 글자색 애니메이션 */
}

---

3️⃣ _layouts\category.html 수정

  {% assign gallery_categories = site.data.category_views.gallery_view %}
  {% assign list_categories = site.data.category_views.list_view %}

  {% if gallery_categories contains page.title %}
    <!-- ✅ 갤러리 뷰 렌더링 -->
    <div class="gallery-grid">
      {% for post in page.posts %}
        <div class="gallery-card">
          <a href="{{ post.url | relative_url }}">
            {% if post.image %}
              <img src="{{ post.image | relative_url }}" alt="{{ post.title }}">
            {% else %}
              <!-- 기본 썸네일 이미지 -->
              <img src="/assets/img/default-thumbnail.jpg" alt="default image">
            {% endif %}
            <div class="gallery-info">
              <h3>{{ post.title }}</h3>
              <p class="gallery-date">{{ post.date | date: "%Y-%m-%d" }}</p>

              {% if post.description %}
                <p class="gallery-description"><em>{{ post.description }}</em></p>
              {% endif %}

              <p class="gallery-tags">
                {% for tag in post.tags %}
                  <span class="tag">{{ tag }}</span>
                {% endfor %}
              </p>
            </div>
          </a>
        </div>
      {% endfor %}
    </div>

  {% else %}
    <!-- 📄 리스트 뷰 렌더링 -->
    <ul class="content ps-0">
      {% for post in page.posts %}
        <li class="d-flex justify-content-between px-md-3">
          <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
          <span class="dash flex-grow-1"></span>
          {% include datetime.html date=post.date class='text-muted small text-nowrap' lang=lang %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

---

태그 뷰 설정도 카테고리와 동일하게 진행하면 된다.