현재 티스토리 스킨 중 꽤 괜찮은 평을 받는 스킨이 바로 프라치노 공간 스킨이다. 깔끔한 레이아웃과 미려한 디자인으로 많은 팬을 확보하고 있으며, 현재 블로그에 적용된 스킨도 그것이다[1]. 기본 설정으로 사용해도 좋지만 대부분의 공간 스킨 사용자가 자기 입맛에 맞게 약간의 수정을 가해 쓰는데, 나도 그렇다. 간단하게 그 내용을 정리해 본다.
홈화면 리다이렉트
블로그 홈화면을 띄웠을 때 원하는 페이지를 표시한다. 모든 글 목록을 표시하려면 ‘{ location.href = ’/category/’ }‘. 특정 목록을 표시하려면 ’{ location.href = ‘/category/[항목이름]’ }
/* Main Page Redirect by Readiz */
var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];
var url = urlAddr.split('/');
if(url[1] == '') { location.href = '/category/' }
빅풋 주석
목적: 자바 스크립트 기반 예쁜 주석(footnote)인 빅풋을 활성화한다. 적용 방법은 링크 참조.
소제목 꾸미기
목적: 가독성을 높히기 위해 소제목을 꾸민다. 현재 블로그에 적용된 것은 다음과 같다.
#article h2 {
border-bottom: solid 1px #a9a9a9;
border-left: solid 7px #84C55E;
font-family: "Nanum Gothic", sans-serif !important;
font-weight: normal !important;
font-size: 18px !important;
padding-left: 6px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
하나씩 설명하면,
- h2는 소제목 단계. 난 마크다운 기준 ‘##’, 즉 2단계 소제목을 가장 많이 쓰므로 h2. 1단계면 h1, 3단계면 h3 등으로 하자.
- border-bottom과 border-left는 줄을 긋는다.
- font는 서체 관련
- padding은 줄과 글자 사이. ‘안쪽’ 간격
- margin은 줄 밖. ‘바깥’ 간격
- !important를 많이 넣어 지저분해 보이는데, 필수다. 넣어서 강제로 지정하지 않으면 반영되지 않는다.
본문 꾸미기
문단 간 자동으로 간격 벌리고, 기존 서체가 너무 굵어 얇게 만든다. 이것도 !important로 덮어쓰지 않으면 적용 안 된다.
#article p {
margin-bottom: 30px !important;
margin-top: 20px !important;
font-weight: lighter !important;
}
-
티스토리는 네이버 블로그보다 사용자의 자유도가 훨씬 높다. HTML과 CSS 일부를 직접 건드릴 수 있는 게 그 증거. 자유도로 따지면 워드프레스 > 티스토리 > 네이버 블로그 순 ↩
