Step 2. 이해하고 따라하기
위의 방법이 초보라도 따라할 수 있는 가장 간단한 방법이고, 좀 더 세부적으로 깔끔하게 폰트를 적용하려면 스타일 시트를 만져 주어야 한다.
스타일 시트란 스킨편집란의 html 문서(skin.html) 아래의 style.css 부분이다. 스타일 시트로 문서의 성격을 규정해주면, 구문마다 일일히 폰트 지정 명령을 주지 않아도 되므로 편리하고 깔끔한 문서를 구성할 수 있다.
요컨대, 스킨을 적용한 후 밑에 있던 검색창을 위로 붙인다던가, 카운터 위치를 가운데로 조정해 준다든지 하는.. 레이아웃을 손보려면 위쪽 창의 html 문서를 만지면 되고, 문서 전체의 폰트를 바꿔 주고 싶다든지, 특정한 폼(즉 블로그 메인, 태그, 위치로그 등의 제목창)의 글씨 굵기나 크기를 바꿔주고 싶다는 등의.. 문서의 미적인 성격을 조절하려면 아래쪽 창의 스타일 시트를 수정하는 식이다.
어쨌든....
스타일 시트 자체는 스킨을 제작한 제작자 분들의 취향문제도 있고, 스킨 각각마다 전부 다 다르기 때문에 위의 따라하기처럼 이렇게 바꾸세요ㅡ라고 못 박을수는 없다. (더구나 본인도 언어를 이해하는 수준의 전문가는 아니기 때문에;;)
해서, 아래에 필자가 현재 수정해서 사용중인 스킨의 스타일 시트를 붙여 이해를 돕고자한다. 단순히 웹폰트를 적용하기 위한 작업이라면 font 명령어가 나온 부분에 주목해서 아래처럼 본인의 웹폰트 스타일로 적용해주면 된다. 어느 부분이 어떤 부분의 스타일인지는 보통 '/* ~~ */' 과 같은 주석이 달려 있으니 알기도 쉽다.
단, 아래처럼 스타일 시트를 손본다 하더라도 가장 중요한 구문, 즉 Step 1 에서 붙여넣기 한
<style type="text/css">
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
</style>
이 부분은 html 문서의 head 에 반드시 들어가 있어야 한다. 이유는, 이 구문이 업로드된 웹폰트 파일을 실제 읽어오는 부분이며 읽어온 다음에야 비로소 명령어를 사용해 문서에 적용이 가능....하기 때문이라고 하겠다.
간단히 말해, 스타일 시트를 만져서 적용하고 싶다면, skin.html 탭의 <head> 와 </head> 의 사이에 위의 저 구문을 집어넣어주고 시작하시라는 말씀.
우선 예제를 보기 전에 간단히 설명하자면, 아래 스타일 시트의 '본문 공통' 부분을 보자.
line-height: 130%; 줄은 '페이지 전체에 줄간격 130% 주겠다' 라는 의미이다. 이렇게 해 주면, Step 1에서 <div> 태그 안쪽에 넣어준 옵션 중 줄간격이 페이지 전체에 간단히 적용이 된다. Step 1에서 한 바와같이 skin.html 페이지의 저 부분에만 옵션을 줄 경우, 포스트(즉 본문) 부분에만 줄간격이 걸리기 때문에 방명록이나 태그 구름에는 들쭉날쭉한 줄간격이 되어 다소 보기 싫은 블로그가 될 수가 있다. (물론 가독성도 떨어진다) 게다가 스타일 시트를 만지게되면 어딘가에서 퍼온 글을 붙여넣기 할 때도 자신의 블로그 폰트로 제대로 적용이 된다. Step 1과 같은 과정만을 밟을 경우, 복사하여 퍼온 포스트와 직접 작성한 포스트의 폰트가 다른 현상을 보게 된다. 퍼온 곳에서의 폰트가 우선되기 때문이다. 직접해 보면 이해가 쉬울 것이다.
a:link 라는 줄은 '본문 전체에서, 링크가 걸려있는 텍스트의 스타일을 결정 하겠다' 라는 의미이다. 그 이하는 전부 이와같이 font-family: 산책10; font-size: 10pt; 스타일이 붙은, '어디어디의 폰트를 무엇으로 하고, 어떤 스타일을 적용하라' 라는 명령이므로 이런식으로 차분히 살펴보면 누구나 쉽게 할 수 있을 거라..........고 예상하는 바이다.
............┌( -_-)┘(후다닥)
@charset "utf-8";
/* 반드시 들어가야 하는 스타일 시작 */
/* 본문 공통 */
body{
font:13px 산책10;
background-color:white;
line-height: 130%;
color:#666;
}
a:link { font-family: 산책10; font-size: 10pt; color:#333; text-decoration:none;}
a:visited { font-family: 산책10; font-size: 10pt; color:#333; text-decoration:none;}
a:hover { font-family: 산책10; font-size: 10pt; color:red; text-decoration:underline;}
a:active { font-family: 산책10; font-size: 10pt; color:red; text-decoration:none;}
/* 페이징 - 현재 페이지 */
.selected { text-align:center; font-weight:bold; color:#f30;}
.no-more { color:#ccc;}
/* 카테고리 - 이미지 버튼 */
.ib { cursor:pointer;}
/* 카테고리 - 트리 셀 */
.branch3 { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
.c_cnt { font-family: 산책10; font-size: 10pt; color:#f30;}
/* 달력 월 표시 */
.cal_month { font-family: 산책10; font-size: 10pt; height:18px; font-weight:bold; letter-spacing:normal;}
/* 달력 요일 표시(th 영역) */
.cal_week1 { font-family: 산책10; font-size: 10pt; font-weight:normal;}
/* 달력 일요일 표시(th 영역) */
.cal_week2 { font-family: 산책10; font-size: 10pt; color:#f30; }
/* 달력 Week(tr 영역) */
.cal_week { height:10px;}
.cal_current_week { background-color:#eee;}
/* 달력 Day(td 영역) */
.cal_day { font-family: 산책10; font-size: 10pt; color:#999; text-align:center;}
/* 달력 Day, 일요일 (td 영역) */
.cal_day_sunday { font-family: 산책10; font-size: 10pt; color:#f30 !important;}
.cal_day_sunday a { font-family: 산책10; font-size: 10pt; color:#f30 !important;}
/* 달력 지난 달 날짜 표시(td) */
.cal_day1 { font-family: 산책10; font-size: 10pt; color:#ccc;}
/* 달력 다음 달 날짜 표시(td) */
.cal_day2 { font-family: 산책10; font-size: 10pt; color:#ccc;}
/* 달력 이번 달 날짜 표시(td) */
.cal_day3 { font-family: 산책10; font-size: 10pt; color:#aaa;}
/* 달력 오늘 날짜 표시(td) */
.cal_day4 { font-family: 산책10; font-size: 10pt; color:#333; font-weight:bold;}
/* 달력 글쓴 날 링크 스타일 */
a.cal_click:link { font-family: 산책10; font-size: 10pt; color:#898989; font-weight:bold;}
a.cal_click:visited { font-family: 산책10; font-size: 10pt; color:#898989; font-weight:bold;}
a.cal_click:hover { font-family: 산책10; font-size: 10pt; color:white; font-weight:bold;}
.
.
.
.
.
스킨을 제작하신 분의 권리 문제도 있고하니... 전부 공개는 불가; (빨간 부분에 주목해서 봐 주신다면 이해가 좀더 쉬울 것으로 생각합니다~)
Rss 구독하기
