``` ### 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보다 약간 연한 색상 (선택 사항) / } / BASIC css end */