css 제목 H2,3,4 태그 자동번호 매기기

문단이나 단원 등의 제목을 만들고 H2, H3, H4 태그를 적용하게 되는데 이때 순차적으로 번호를 지정하지 않더라도 자동으로 번호가 매겨지도록 CSS 속성을 적용할 수 있습니다.

H2 태그 번호 적용하기

.entry-content { 
	counter-reset: h2counter; 
}

티스토리 북클럽 스킨의 경우 본문 내용이 적용되는 태그에 클래스 명이 'entry-content'으로 되어있는데 'counter-reset' 속성을 추가해 주고 속성값으로 h2counter와 같이 적당한 이름을 지정합니다.

 

 

.entry-content h2::before {
	counter-increment: h2counter;
	content: counter(h2counter) ".";      
}

가상 요소 속성을 추가하여 번호를 붙여줍니다. counter-increment: 에는 앞서 설정한 이름 h2counter 적용하고  content: 에는 counter(h2counter)를 적용하여 숫자 값을 표시하게 되고 큰따옴표를 이용하여 추가 문구를 설정합니다.

 

위는 숫자뒤에 마침표가 나오도록 한 설정입니다.

 

 

H2태그에서 이어받아 H3 순서 적용하기

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

h2 태그에도 앞서 적용한 counter-reset 속성을 적용하고 적당한 이름을 부여하고 h3::before 속성에서 적용한 이름을 같이 적용하고 content에 H2적용값을 먼저 적용하고 "-"기호를 넣어주고 다음에 h3값을 적용합니다.

 

이와 같이 적용하면 1-2와 같이 표시가 됩니다.

 

 

제목 전체 적용

See the Pen h태그 자동 번호 by 1730 (@1730) on CodePen.

 

 

H1은 글제목이므로 제외하고 H2, H3, H4까지 위처럼 적용하여 사용을 할 수가 있습니다.

 

본문 태그가 .entry-content로 되어있는 북클럽 스킨이나 일부 티스토리 스킨에서는 위 속성을 복사하여 수정 없이 그대로 적용이 가능할 수도 있습니다.

 

2022.12.25 - [Internet/CSS] - 미디어쿼리 해상도 폭 다크모드 설정

미디어쿼리 해상도 폭 다크모드 설정

2022.12.22 - [Internet/CSS] - CSS 물결 애니메이션

CSS 물결 애니메이션