주로 기술문서를 블로그에 기재하다보니 스킨 적용시 몇가지 기준이 있다.
첫째. 심플해야 된다.
둘째. 가독성 좋은 폰트를 사용해야 된다.
셋째. 2단 형태의 본문 폭이 넓은 스킨이어야 한다.
물론 스킨을 여기저기 뜯어 고쳐서 사용할 수 도 있지만 다른거 연구하기도 바쁘므로 그냥 맘에 드는거 가져다 쓴다.
최근 DasMonochromEnglisch 스킨을 적용하였다. 2% 부족한 부분을 살짝 고쳐 사용한다. 아래는 수정한 내역이다.
1) 줄간격 수정
수정전 :
/* Common Styles */
* {
margin:0;
padding:0;
border:0;
line-height:1.3;
font-family:"Malgun Gothic", "Meiryo", "Segoe UI", "Trebuchet MS", "MS PGothic", "Gulim", "AppleGothic", "Sans-serif";
}
수정후 :
/* Common Styles */
* {
margin:0;
padding:0;
border:0;
line-height:1.8;
font-family:"Malgun Gothic", "Meiryo", "Segoe UI", "Trebuchet MS", "MS PGothic", "Gulim", "AppleGothic", "Sans-serif";
}
2) 검색바 수정
수정전 :
/* Search */
#searchBox {float:left; margin-top:95px; padding-left:64px; background:url(images/txt_search.gif) no-repeat 7px 3px; }
#searchBox label {display:none; }
#searchBox input {
width:160px;
height:14px;
border:1px solid #9A9A9A;
background-color:#515151;
color:#9A9A9A;
vertical-align:middle;
position:relative;
cursor:pointer;
}
#searchBox .submit {
width:22px;
height:16px;
border:0px;
background:url(images/btn_search.gif) no-repeat;
text-indent:-5000px;
overflow:hidden;
vertical-align:middle;
position:relative;
cursor:pointer;
}
수정후 :
/* Search */
#searchBox {float:left; margin-top:5px; padding-left:64px; background:url(images/txt_search.gif) no-repeat 7px 7px; }
#searchBox label {display:none; }
#searchBox input {
width:160px;
height:18px;
border:1px solid #9A9A9A;
background-color:#515151;
color:#9A9A9A;
vertical-align:middle;
position:relative;
cursor:pointer;
}
#searchBox .submit {
width:22px;
height:18px;
border:0px;
background:url(images/btn_search.gif) no-repeat;
text-indent:-5000px;
overflow:hidden;
vertical-align:middle;
position:relative;
cursor:pointer;
}
3) 본문 글자색 수정
수정전 :
.article {
width:/*@post-width*/683px/*@*/;
color:/*@post-body-color*/#8A8A8A/*@*/;
font-size:/*@post-body-font-size*/12px/*@*/;
font-family:/*@post-body-font-family*/"Malgun Gothic", "Meiryo", "Segoe UI", "Trebuchet MS", "MS PGothic", "Gulim", "AppleGothic", "Sans-serif"/*@*/;
word-break:break-all;
word-wrap:break-word;
overflow:hidden;
}
.entry .article a {color:#8A8A8A; text-decoration:underline; }
수정후 :
.article {
width:/*@post-width*/683px/*@*/;
color:/*@post-body-color*/#323232/*@*/;
font-size:/*@post-body-font-size*/12px/*@*/;
font-family:/*@post-body-font-family*/"Malgun Gothic", "Meiryo", "Segoe UI", "Trebuchet MS", "MS PGothic", "Gulim", "AppleGothic", "Sans-serif"/*@*/;
word-break:break-all;
word-wrap:break-word;
overflow:hidden;
}
.entry .article a {color:#323232; text-decoration:underline; }
4) 본문 제목 크기 수정
수정전 :
.titleWrap h2 a {
color:/*@post-title-color*/#5C5C5C/*@*/;
font-size:/*@post-title-font-size*/12px/*@*/;
line-height:1.3em;
font-family:/*@post-title-font-family*/"Malgun Gothic", "Meiryo", "Segoe UI", "Trebuchet MS", "MS PGothic", "Gulim", "AppleGothic", "Sans-serif"/*@*/;
}
수정후 :
.titleWrap h2 a {
color:/*@post-title-color*/#5C5C5C/*@*/;
font-size:/*@post-title-font-size*/16px/*@*/;
line-height:1.3em;
font-family:/*@post-title-font-family*/"Malgun Gothic", "Meiryo", "Segoe UI", "Trebuchet MS", "MS PGothic", "Gulim", "AppleGothic", "Sans-serif"/*@*/;
}