블로그 초기 페이지에 사용하는 카운터 1, 2, 3 ...... 북클럽 스킨의 "cover-thumbnail-2"와 "cover-list"의 각 <li> 항목에 숫자를 부착한 것입니다.
원래는 자바스크립트로 구현했던 기능으로 script.js 파일에 코드를 추가하여 사용하였는 데, 구글 PageSpeed에서 웹페이지 로딩 속도를 측정할 때마다 대규모 화면 변화를 일으키는 요인 중 하나로 이것이 당첨되었습니다.
리스트가 전체 페이지를 차지하고 숫자를 부착할 때마다 화면을 갱신하는 등 좋지 않은 영향을 미친다는 것인데 확인하는 방법이 어려워서 통과! 철거하고 CSS로 대체하기로 결정! 아직까지 별다른 점검 사항이 없는 것 보니까 괜찮은 것 같습니다. 만족했겠죠?
3개의 CSS 속성을 묶어서 구현할 수 있는 기능입니다.
1. 카운터 이름을 netwareMore로 지정하고 디폴트 값인 0으로 초기화
counter-reset: netwareMore;
2. 지정한 netwareMore의 카운터 숫자 증감
counter-increment: netwareMore;
3. 지정한 netwareMore의 카운터 숫자를 부착
content: "목차 " counter(netwareMore) ": ";
※ 카운터 이름은 "counter-set" 속성으로도 지정이 가능합니다. IE와 Safari 브라우저가 지원하지 않으며, 지원하는 브라우저도 상위 버전으로 올라가야 합니다.
counter-set - CSS: Cascading Style Sheets | MDN (mozilla.org)
카운터를 적용하면 다음과 같은 모습이 됩니다.
| 목차 1: 목차 2: 목차 3: 목차 4: |
블로그에 간단하게 적용한 코드입니다.
/* CSS counter 적용 사례 */
.cover-list,
.cover-thumbnail-2 {
counter-reset: list-number;
}
.cover-list ul li .title::before,
.cover-thumbnail-2 ul li .title::before {
counter-increment: list-number;
content: counter(list-number);
margin-right: 0.5em;
padding: 0 5px;
background-color: #ddd;
}
CSS counter 기능을 2개의 그룹에 사용하였기 때문에 counter-reset도 2회 사용했습니다. 1회만 사용하면 숫자의 증감이 각각 1부터 시작하는 것이 아니라 계속 이어서 +1 증가합니다.
".cover-list ul li .title"의 앞("::before")과
".cover-thumbnail-2 ul li .title"의 앞("::before")에 숫자를 추가합니다.
정확한 적용 방법과 정말 다양한 확장 기능은 아래 링크를 붙여 놓은 Mozilla 개발자 네트워크(MDN)의 관련 웹 문서를 참고하세요.
[참고] mdn web docs (영어) Using CSS Counters
[참고] mdn web docs (한글) CSS 카운터 사용하기
댓글