``` ### 2. 借 CSS 추가 (카운터 설정 및 디자인) 이전 페이지와 동일하게 **`.item-list`가 나타날 때마다 카운터가 증가**하도록 설정합니다. (이 CSS는 HTML `` 영역에 추가해야 합니다.) ```css /* 1. 상품 목록 전체 영역에 카운터 초기화 설정 (item-wrap에 style="counter-reset: rank-counter 0;" 설정했으므로 생략 가능) */ /* 1. 카운터 초기화는 item-wrap에 스타일로 적용합니다. */ .item-wrap { counter-reset: rank-counter 0; /* 이 코드가 HTML에 삽입되어 있어야 합니다. */ } /* 2. 각 상품 DL 태그가 나타날 때마다 카운터 1씩 증가 */ .item-list { counter-increment: rank-counter; /* 이 부분이 1위, 2위... 순서를 매깁니다. */ } /* 3. 순위 번호 디자인 및 표시 */ .rank-num::before { content: counter(rank-counter) "위"; /* 카운터 값과 "위" 텍스트를 content로 출력 */ } /* 4. 순위 번호 위치 및 디자인 (이전 답변과 동일하게 적용) */ .item-list .thumb { position: relative; } .rank-num { position: absolute; top: 5px; left: 5px; z-index: 10; background-color: #ff4d4d; color: #fff; font-size: 14px; font-weight: bold; padding: 3px 6px; border-radius: 3px; text-align: center; } /* ==================================== */ /* 1.

태그 스타일 (1.5배 크기 + Bold) / / ==================================== / #productClass h1 { font-size: 1.5em; / 기본 폰트 크기의 1.5배 / font-weight: bold; / 굵게 / color: #333; / 텍스트 색상을 진하게 설정 (선택 사항) / margin-bottom: 10px; / 아래 설명 문구와의 간격 조정 / } / ==================================== / / 2. .best-intro 설명 문구 스타일 (1.2배 크기) / / ==================================== / .best-intro { font-size: 1.2em; / 기본 폰트 크기의 1.2배 / line-height: 1.6; / 줄 간격을 넓혀 가독성 향상 / / font-weight: normal; <- H1과 대비되도록 굵기를 일반으로 유지하는 것이 좋습니다. / color: #555; / H1보다 약간 연한 색상 (선택 사항) / } / ========================= 퍼줌 SEO 내부링크 박스 ========================= / .pz-seo-box{ margin:40px 0; padding:28px 24px; border-radius:14px; background:#f8fafc; border:1px solid #e5e7eb; text-align:center; } .pz-seo-box.top{ margin-top:20px; } .pz-seo-box.bottom{ margin-bottom:20px; } .pz-seo-text{ font-size:16px; line-height:1.7; color:#333; margin-bottom:18px; word-break:keep-all; } .pz-seo-links{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; } .pz-btn{ display:inline-block; padding:12px 18px; font-size:14px; border-radius:8px; text-decoration:none; font-weight:600; transition:all 0.2s ease; } / 메인 강조 버튼 / .pz-btn.main{ background:#2563eb; color:#fff; } .pz-btn.main:hover{ background:#1e40af; } / 서브 버튼 / .pz-btn.sub{ background:#fff; color:#2563eb; border:1px solid #2563eb; } .pz-btn.sub:hover{ background:#eff6ff; } / 공란 방지 flex / .item-cont { display: flex !important; flex-wrap: wrap; gap: 12px; } .item-list { width: calc((100% - 24px) / 3) !important; float: none !important; box-sizing: border-box; } / BASIC css end */