[CSS] WordPress H2 태그 번호 붙이기

by

지금 이곳 오솔길 블로그의 소제목들을 보시면 번호가 자동으로 붙고 있습니다. H2 태그에 번호 붙이는 방법이 궁금한 분들 계실까요? H2 태그에 번호를 자동으로 붙이는 방법을 알아보러 가겠습니다.

자동으로 H2 태그 번호 붙이기

h2 태그의 내용이 “자동으로 H2 태그 번호 붙이기”인 경우, “1. 자동으로 H2 태그 번호 붙이기”로 번호가 자동으로 붙는다면 매우 편리하겠죠?

CSS에는 ::before라는 표기방식이 있습니다. 우선 ::before의 사용법을 알아보겠습니다.

<h2>자동으로</h2>
<h2>H2 태그 번호</h2>
<h2>붙이기</h2>

<style>
  h2::before {
    content: "1. ";
  }
</style>
HTML

아래와 같이 ::before에 content를 작성해 주면, h2 엘리먼트 내의 값 앞에 content의 내용이 아래와 같이 출력되게 됩니다. CSS 설정과 같이 모든 h2 태그에 동일하게 “1. “이 추가되었습니다. 이제 1로만 출력되는 것을 카운터를 추가해서 번호가 자동으로 증가되게 해 보겠습니다.

그림 1. H2 태그 번호 붙이기: 같은 번호
그림 1. H2 태그 번호 붙이기: 같은 번호

카운터 사용해서 번호 자동 증가

counter의 이름은 counter-reset과 함께 설정해 주면 되며, counter-increment를 통해서 값을 1씩 증가시킵니다.

<div class="page">
  <h2>자동으로 H2 태그 번호 붙이기</h2>
  <div>
    조금만 익히면 매우 간단하고 쉽습니다.
  </div>
  <h2>수동으로 H2 태그 번호 붙이기</h2>
  <div>
    번호 일일이 입력해 주기 너무 힘들어요. 중간에 H2 추가되면 번호 다 바꿔야 해요.
  </div>
</div>

<style>
  .page {
    counter-reset: h2counter;
  }
  h2::before {
    counter-increment: h2counter;
    content: counter(h2counter) ". ";
  }
</style>
HTML

위와 같은 코드를 작성하면, div.page를 만났을 때 h2counter 값을 0으로 초기화 합니다. 이후에 h2 태그를 만날 때마다 counter-increment가 작동하여 h2counter += 1을 작동시킵니다. 그리고 1이 증가된 값이 content에 반영됩니다. 결과는 아래 그림과 같습니다.

그림 2. H2 태그 번호 값 자동 증가
그림 2. H2 태그 번호 값 자동 증가

H2 태그와 H3 태그에 적용하기

<main>
  <h2>자동으로 H2 태그 번호 붙이기</h2>
  <div>
    조금만 익히면 매우 간단하고 쉽습니다.
  </div>
  <h3>자동이라서 편해요</h3>
  <h3>카운터 사용방법</h3>
  <h3>꾸미는 방법</h3>

  <h2>수동으로 H2 태그 번호 붙이기</h2>
  <div>
    번호 일일이 입력해 주기 너무 힘들어요. 중간에 H2 추가되면 번호 다 바꿔야 해요.
  </div>
  <h3>수동 작업의 단점</h3>
  <h3>수동으로 작업하는 경우의 문제점</h3>
</main>
HTML

기존 문서에 h3 태그를 추가해서 문서를 좀 더 위계적으로 만들어 보았습니다. h2 태그에 적용한 내용을 h3에도 적용해 주면 됩니다.

main {
  counter-reset: h2counter;
}
h2::before {
  counter-increment: h2counter;
  content: counter(h2counter) ". ";
}
h2 {
  counter-reset: h3counter;
}
h3::before {
  counter-increment: h3counter;
  content: counter(h2counter) "." counter(h3counter) ". ";
}
CSS

추가된 내용을 보면, h2에서 h3counter를 초기화하고, h3::before에서는 카운터 값을 하나씩 증가시키고, h3::before에 “h2counter.h3counter. “의 문자열이 추가되게 합니다. 그러면, 앞에서 하고 싶었던 것과 같이 “1.2. 카운터 사용방법”이 나오는 것을 아래 그림에서 확인할 수 있습니다.

그림 3. 자동으로 h2, h3 태그에 번호 붙이기
그림 3. 자동으로 h2, h3 태그에 번호 붙이기

워드프레스(구텐베르그)에 반영하기

이제 워드프레스에 적용해야겠죠? 워드프레스에서는 site-main 클래스에 블로그의 글 내용을 담고 있습니다. site-main 클래스를 만나면 카운터를 초기화하도록 합니다.

.site-main {
  counter-reset: h2counter;
}
h2.wp-block-heading::before {
  counter-increment: h2counter;
  content: counter(h2counter) ". ";
}
CSS

그리고 h2.wp-block-heading::before에서 카운터 값을 1씩 증가하도록 하고, content에는 카운터 값 h2counter를 사용해서 표시하도록 합니다. 아래 그림 4에서는 현재 오솔길 블로그에서 볼 수 있는 내용입니다. 현재는 아래와 같은 스타일로 하고 있지만, 언제 바뀔지 모르기 때문에 일단 캡처를 해 보았습니다. CSS의 카운터 기능을 사용해서 번호가 자동으로 붙고 있습니다. 번호 외의 네모난 상자 처리 같은 건 CSS를 사용해서 해 주시면 되겠습니다.

그림 4. 워드프레스에 반영한 예시
그림 4. 워드프레스에 반영한 예시

관련자료

MDN의 CSS Counter 사용하기 문서를 참고했습니다.

같이 읽으면 좋은 글

2 thoughts on “[CSS] WordPress H2 태그 번호 붙이기”

  1. 글 번호 상자 css 어떻게 해야하는지 아무리 찾아도 안나와서요 ㅠㅠ 혹시 알려주실 수 있으실까요?!

    응답

Leave a Comment