개요
CSS의 counter() 함수를 이용하면 티스토리 본문의 소제목 앞에 연속된 번호를 자동으로 입력할 수 있다. 소제목의 위치를 변경하거나 소제목을 삭제해도 소제목 앞에 입력된 연속된 번호는 자동으로 업데이트된다.
▲ 목차 번호가 자동으로 입력된 모습(왼쪽:본문, 오른쪽:목차 목록)
원리와 방법
티스토리 블로그 글쓰기 화면에서 제목1, 제목2, 제목3은 HTML 태그 <h2>, <h3>, <h4>에 대응돼 있다. <h2>, <h3>, <h4> 태그는 CSS의 ::before(또는 ::after) 선택자(Selector)로 찾을 수 있으며, 찾은 요소에 앞에 counter() 함수로 생성한 연속된 번호를 붙여주면 소제목마다 고유의 번호가 표시된다.
::before 선택자(Selector)
::before 선택자는 HTML의 특정 요소를 찾을 수 있으며 선택된 요소들의 앞에 콘텐츠(텍스트, 이미지, 아이콘 등)를 넣을 수 있다. 예로 <h3> 태그를 사용한 모든 요소 앞에 ■(텍스트)를 넣으려면 아래와 같이 css(style.css)를 코딩하면 된다.
h3::before {
content: "■";
}
counter() 함수
counter() 함수는 "1 2 3 4 5 6..."과 같은 연속된 번호를 만들 수 있는데 counter-reset 속성과 counter-increment 속성이 필요하다. 순서는 다음과 같다.
① counter-reset으로 연속된 번호를 표시할 변수를 선언하고 초기화한다. 초기화 값은 0이며, 변수 선언 위치의 주의가 필요하다. 선언 위치를 잘못하면 같은 번호가 표시된다. 아래 CSS의 "cnt-h3" 변수 선언 위치 참조.
② counter-increment 속성으로 ①에서 선언한 변수의 값을 증감시킨다.
③ content 속성 값에 counter(①에서 선언한 변수)를 입력한다.
자동 목차 번호 예제 소스 코드
HTML
<body>
<h2>제목 h2</h2>
<h2>제목 h2</h2>
<h3>제목 h3</h3>
<h3>제목 h3</h3>
<h3>제목 h3</h3>
<h2>제목 h2</h2>
<h3>제목 h3</h3>
<h3>제목 h3</h3>
</body>
CSS
body {
counter-reset: cnt-h2; /* <h2> 태그 카운트용 변수 생성 및 초기화(0) */
}
h2::before { /* <h2> 요소 앞에 콘텐츠 추가*/
counter-increment: cnt-h2; /* cnt-h2 변숫값 1 증가 */
content: counter(cnt-h2) "."; /* 텍스트 결합은 공백으로 */
padding-right: 5px;
}
h2 {
counter-reset: cnt-h3; /* <h3> 태그 카운트용 변수 생성 및 초기화(0) */
}
h3::before {
counter-increment: cnt-h3; /* cnt-h3 변숫값 1 증가 */
content: counter(cnt-h2) "." counter(cnt-h3); /* 예) 1.1 1.2 1.3...*/
padding-right: 5px;
}【추가 정보】
◆ 기존 cnt-h2 변숫값에서 2(숫자는 임의) 증가
counter-increment: cnt-h2 +2;
◆ 기존 cnt-h2 변숫값에서 -1 감소
counter-increment: cnt-h2 -1;
◆ 01 02 03 ... 처럼 숫자 앞에 0을 붙일 때
content: counter(cnt-h2, decimal-leading-zero);
결과 화면
▲ 자동 목차 번호 결과
자동 목차 번호 티스토리 버전 소스 코드
티스토리 본문에 자동 목차 번호 달기
.article_view {
counter-reset: cnt-h2;
}
.article_view .contents_style h2 {
counter-reset: cnt-h3;
}
.article_view .contents_style h2::before {
counter-increment: cnt-h2;
content: counter(cnt-h2) ".";
padding-right: 5px;
}
.article_view .contents_style h3 {
counter-reset: cnt-h4;
}
.article_view .contents_style h3::before {
counter-increment: cnt-h3;
content: counter(cnt-h2) "." counter(cnt-h3);
padding-right: 5px;
}
.article_view .contents_style h4::before {
counter-increment: cnt-h4;
content: counter(cnt-h2) "." counter(cnt-h3) "." counter(cnt-h4);
padding-right: 5px;
}▲ 소스 코드 다운로드
▼ 적용 방법
- 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 클릭
- 단축키 Ctrl + F 입력 후 ".article_view"로 검색
- 검색 결과 아래에 위 소스 코드 붙여 넣기
※ contents_style 클래스가 없을 경우 위 소스 코드에서 ".contents_style" 삭제할 것.
목차 목록에 자동 목차 번호 달기
▼ 티스토리 블로그에 목차 달기
https://likenew.tistory.com/503
.items {
counter-reset:cnt-toc-lv1;
}
.toc-level-1 {
counter-reset:cnt-toc-lv2;
padding-left: 36px;
}
.toc-level-1::before {
counter-increment: cnt-toc-lv1;
content: counter(cnt-toc-lv1, decimal-leading-zero) ".";
text-align: right;
display: inline-block;
font-family: "Helvetica Neue","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",Dotum,"돋움",sans-serif;
font-weight: bold;
color: #729292;
position: relative;
margin-left: -26px;
padding-right: 5px;
letter-spacing: 1px;
}
.toc-level-2 {
padding-left:62px;
}
.toc-level-2::before {
counter-increment:cnt-toc-lv2;
content:counter(cnt-toc-lv1) '.' counter(cnt-toc-lv2);
margin-right: 6px;
font-family: "Helvetica Neue","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",Dotum,"돋움",sans-serif;
font-weight: bold;
color: #729292;
position: relative;
margin-left: -26px;
letter-spacing: 1px;
}
.toc-level-3::before {
content: '・';
margin-right: 6px;
}
.toc-level-3 {font-size:13px; padding-left:59px;}
.toc-level-4 {font-size:13px; padding-left:70px;}▲ 소스 코드 다운로드
▼ 적용 방법
- 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 클릭
- 단축키 Ctrl + F 입력 후 ".toc-level-1"로 검색
- 검색 결과 아래에 위 소스 코드 붙여 넣기
※ margin 값과 padding 값을 본인 스킨에 맞게 수정할 필요 있음.
참고
▼ 티스토리 블로그 스킨 변경 방법(스킨 수정 족집게)
티스토리 블로그 스킨 변경 방법(스킨 수정 족집게)
지난 어느 날 티스토리 스킨 페이지에서 Portfolio 스킨을 적용했다. 한동안 잘 쓰던 예쁜 스킨에 손을 대기 시작했다. 티스토리 "관리 페이지 > 꾸미기 > 스킨 변경"에서 스킨을 다운로드하고 skin.ht
likenew.tistory.com