보기 좋은 떡이 먹기도 좋다. 블로그 글도 보기 좋아야 한다. 블로그 스킨을 만들 때 가독성을 고려해야 하는 까닭이다. 사람마다 차이가 있겠지만 나는 명조체처럼 삐침이 있는 바탕체가 삐침이 없는 고딕체보다 읽기 편하다. 글꼴 이름에 serif가 있으면 삐침이 있고 sans가 있으면 삐침이 없다. 참고로 sans는 프랑스어에서 '~없다.'를 뜻한다고 한다. 짧은 글은 작은 제목을 따로 빼지 않아도 되지만 긴 글은 아무래도 중간에 작은 제목을 따로 적어야 읽기 편하고 보기도 좋다. 제목을 두껍게 하거나 본문 글꼴과 색을 다르게 만들면 눈에 띄게 보일 수 있다. 당연히 하나하나 정하지 말고 CSS로 조절해 주어야 좋다.
CSS로 제목을 꾸미는 방법
먼저 HTML에서 제목(head)을 구별해 두는 태그는 <h1>title</h1>가 있다. 보통 h1부터 h4까지 사용한다. 이제 번호에 따라 제목을 조금씩 다르게 꾸며 보자. 스킨 편집에서 CSS를 열고 Ctrl+F을 누르고 h2를 넣어서 검색하면 해당 태그가 있는 부분에 줄이 생긴다. 잘 찾았다면 아래와 같이 고쳐서 제목을 꾸며 보자. 참고로 아래는 티스토리 Whatever 스킨을 고친 것이다.
가장 큰제목
문서에서 가장 큰 제목은 h1 태그로 둘러 싼다.
제목1
티스토리 편집기 상단에서 제목1을 선택하면 자동으로 h2 태그로 둘러싼다. h1 태그는 글 제목에 사용하므로 h2 태그를 배정한 모양이다.
제목2
마찬가지로 편집기 상단에서 제목2를 선택하면 다음 단계인 h3 태그로 둘러싼다. h3을 꾸밀 때와 같이 h3: before{}를 써서 제목 앞에 문자나 기호를 넣을 수 있다. 문자나 기호를 "content:'\27A2';"와 같이 지정해 주는데 아래 링크를 따라가면 문자를 불러들이는 숫자가 정리되어 있다.
content:'\27A2';
}
h4 태그로 만든 제목3
블로그에 제목을 4단계까지 구분하는 경우는 아마 없을 것이다.
제목3
편집기 상단에서 제목3을 선택하면<p data-ke-size="size14">제목3</p>이 입력된다. 글꼴이나 문단 형식은 p 태그 설정에 따라 영향을 받고 글꼴 크기만 작아진다. 꾸미기 위해서는 h4 태그로 둘러싸면 된다.
CSS Entities
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
