HTML은 HyperText Markup Language를 간단하게 적은 것이다. 굳이 우리말로 옮기면 <초월 문서에 표시를 달 수 있는 언어>쯤 된다. 종종 잊어버리는데 Markup언어이므로 태그를 잘 활용하면 논문처럼 상당히 체계적인 글을 쓸 수 있다. 글을 입력할 때 그림과 같이 제목과 본문을 따로 설정해 줄 수 있다. 여기서 제목 1, 2, 3을 택하면 자동으로 제목(heading)을 나타내는 h 태그를 입력해 준다.
조심할 점은 티스토리 스킨은 대부분 글 제목에 <h1></h1>을 이미 배정되어 있어서 제목 1은 <h2></h2>, 제목 2는 <h3></h3>을 달아 준다. 스킨에 이미 h 태그에 꾸미기를 해둔 대로 나온다. 이렇게 글 안에 작은 제목을 구별해 두면 검색 로봇이 글을 더 잘 파악할 수 있어서 검색이 잘 되게 만들 수 있다고 한다.
이제 한 발 더 나아가 제목에 자동으로 번호가 매겨지도록 해 보자. 형식은 아래와 같이 CSS 파일을 손 보면 된다.
.entry-contenth1 {
font-family:var(--font_01), 'Noto Sans KR';
margin:50px0px;
font-size:1.2em;
font-weight:700;
color:#121212;
}
.entry-contenth2 {
font-family:var(--font_01), 'Noto Sans KR';
counter-reset:section0;
counter-increment:chapter;
margin:50px0px;
font-size:1.2em;
font-weight:600;
border-top:2pxsolid#666;
border-bottom:1pxsolid#999;
padding:5px0px;
color:#121212;
}
.entry-contenth2:before {
content:counter(chapter)". ";
}
.entry-contenth3 {
font-family:var(--font_01), 'Noto Sans KR';
counter-reset:slide0;
counter-increment:section;
margin:30px0px;
font-size:1.1em;
font-weight:600;
color:#121212;
}
.entry-contenth3:before {
content:counter(chapter)"."counter(section)" ";
}
.entry-contenth4 {
font-family:var(--font_01), 'Noto Sans KR';
margin:20px10px;
font-size:1.0em;
margin-top:15px;
font-weight:600;
color:#2D2424;
}
.entry-contenth4::before {
content:"\27A2"
}
이제 준비는 끝났다. 아래와 같이 입력하면 된다.
<h2>Chapter</h2>
<h3>Section</h3>
<h4>slide</h4>
<h4>slide</h4>
<h3>Section</h3>
<h2>Chapter</h2>
<h3>Section</h3>
<h3>Section</h3>
<h2>장</h2>
<h3>절</h3>
<h3>절</h3>
아래와 같이 자동으로 번호가 붙는다. section보다 아래는 slide로 위와 같은 꼴로 하면 되는데 귀찮아서 생략한다. 블로그에 논문을 쓸 것도 아니라 장과 절만 구분하면 충분하다.
Chapter
Section
slide
slide
Section
Chapter
Section
Section
장
절
절
다 마무리 되었다고 생각하고 글을 띄워보니 아뿔사 사이드바에 있는 작은 제목에도 번호가 붙여진다. 이것을 없애주어야 한다. 에고, 뭐 하나 쉬운 일이 없다.
