Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

[CSS 코드조각] h2와 h3 앞에 번호 매기기

h2h3 앞에 자동으로 번호를 매겨 준다면 참 좋겠다는 생각을 해 왔었다. 얼마 전에야 IE8부터 CSS의 counter 속성을 지원한다는 사실을 알게 됐다. 와우!

아래는 counter 속성을 이용한 CSS 코드조각이다. 이러면 h2마다 번호가 매겨진다. h2가 시작될 때마다 h3의 번호가 리셋되고, 1부터 다시 시작한다. 코드 보고 설명 듣자.

.document {
    counter-reset: h2number;
}
.document h2 {
    counter-increment: h2number;
    counter-reset: h3number;    
}
.document h2:before {
    content: counter(h2number) '. ';
}
.document h3 {
    counter-increment: h3number;
}
.document h3:before {
    content: counter(h3number) ') ';
}

프로퍼티를 세 개 사용한 걸 볼 수 있을 거다. counter-reset, counter-increment, content. 그리고 content 프로퍼티의 값으로 counter(변수명)을 사용했다.

자, 퍼블리셔들에게는 약간 이해하기 힘들 수도 있는 개념이 등장했다. 이 counter는 변수를 사용한다. 숫자를 기억해야 하기 때문이다. 나는 h2의 숫자를 기억시키기 위한 변수로 h2number를 사용했다.

자, h2에다가 counter-increment: h2number하고 적어 주면 counter-reset 같은 게 없어도 일단 처음 나오는 h2와 1을 CSS가 알아서 연관짓는다. 그리고 그 뒤 h2가 나올 때마다 숫자를 1씩 올리게 된다.

나는 선택자를 .document h2라고 썼는데, 그럼 .document h2에만 영향을 준다. .asdf h2가 나와도 카운터가 올라가지 않는다는 말이다.

h3h2가 나올 때마다 숫자가 1부터 다시 시작해야 한다. 그래서 h2counter-reset: h3number를 넣어 둔 것이다. 그러면 h2가 나올 때마다 h3의 숫자를 기억하고 있는 변수인 h3number가 1로 재설정된다.

마지막으로 content: counter(h2number) '. '; 코드를 보자. 일단, 이 코드는 .document h2:before의 속성이다. 따라서 :before 선택자가 작동하는 경우에만 이게 작동할 거다. IE8에서 이 선택자는 잘 작동한다. IE8에서는 큰 따옴표로는 작동하지 않고 작은 따옴표로만 작동한다고 하니 참고하라.

값에서 counter(h2number)는 숫자를 가리킨다. 그리고 '. '는 점을 찍고 한 칸 띄우는 거다. 다른 언어와 달리 +. 같은 잇기 기호 없이 그냥 이어서 쓰면 된다.

그래서 정리하면 아래와 같다. 일단 counter-reset은 필수가 아니다.

  • counter-increment : 해당 요소가 나올 때마다 주어진 변수가 기억하는 숫자를 하나씩 올린다. 처음 나올 때 1부터 시작.
  • counter-reset : 해당 요소가 나올 때 주어진 변수가 기억하는 숫자를 리셋한다.
  • content : counter(변수명)을 넣어 줄 프로퍼티다. :before:after 선택자에서 작동한다는 것을 잊으면 안 된다.

이상이다. 쓸 일이 많을 지는 모르겠지만, 일단 분명히 쓸 곳은 있을 거라고 생각한다. 당장 내 개인 문서 정리 시스템에도 이미 도입했다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다