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;}
.
.
.
.
.
스킨을 제작하신 분의 권리 문제도 있고하니... 전부 공개는 불가; (빨간 부분에 주목해서 봐 주신다면 이해가 좀더 쉬울 것으로 생각합니다~)
이올린에 북마크하기
이올린에 추천하기
웹폰트가 궁금해서 찾아왔다가 잘 알았습니다~
유용한 정보 감사합니다. ^^
앗, 도움이 되셨다니 기뻐요~ 좋은하루 되세요.^^
위와 같이 하면 편하긴 하지만...전체적으로 동일한 폰트가 적용된다는 단점이 있어서...
전 개별적으로 적용 했습니다. 방법은 제 블로그에 올려뒀습니다.
개별적용하신 포스트, 못 찾겠어요^^;
방문 감사해요.^^ 좋은하루 되세요~
웹폰트를 바꿀려고 검색중인데 ㅠㅠ 첫번째 쉬운 방법으로 해도 안바뀌네요 ㅠㅠ 왜 이럴까;;; ㅠㅠ
안녕하세요.^^
에궁.. 과정을 알면 어디에서 어떻게 하시면 된다고
수정해 드릴 수 있을텐데. ㅡㅜ 기본적인걸 알려드리고나면
각자 블로그에 적용하시는 부분을 봐 드릴때가 제일 답답해요 ㅡㅜ
비밀댓글 입니다
방명록에 글 남겼어요^^
좋은정보 감사합니다. 저도 활용해 봐야겠네요.
도움이 되었다니 기쁘네요ㅡ. 방문해 주셔서 감사합니다.^^
웹폰트때문에 찾아왔어요. 유익한 정보 감사합니다. 덕분에 잘 적용했어요~div체제는 하나도 몰랐었는데 따라하니까 되네요. (노가다;;) 감사합니다.
예쁘게 바꿔주려면 노가다가 좀 심하긴해요^^;;
그래도 스킨 자주 바꾸면서 익숙해지면 그것도 복사 신공으로 노가다가 노가다가 아니게 된답니다. ㅎㅎ;; 도움이 되었다니 기쁩니다~.
부분적으로 적용하는 방법은 없나요?
step2 에서 빨간색 글씨로 된 부분을 보시면요,
가령 예를 들어 두번째 줄에 a:link 다음에 있는
빨간색 부분의 경우에는 '링크'글씨의 폰트를 바꾼다는 속성입니다.
step2에서처럼 스타일 시트를 수정하는 경우
보통 폰트 속성이 저렇게 줄 별로 지정되어 있구요
각 줄의 맨 앞에는 그것이 본문인지, 카테고리인지, 또는 제목 글씨인지 등등...
그 폰트 속성이 적용될 부분이 표시되어 있습니다.
전체적으로 예쁘게 적용하시는 것과 마찬가지로
부분적용 역시 스타일 시트를 곰곰이 살펴보시고 고치셔야 해요.
제가 질문을 잘 못 했네요;
본문 내용에서 부분적으로 바꿀 수 있는 방법은 없나요?
예를 들면 윗 줄의 문장에서 "부분적"이라는 단어만 웹 폰트를 적용하는 방법이요.
그건 스킨 단계에서 처리할 부분이 아니고요...
글을 쓰실 때 위지윅에서 Html 코드를 수정할 수가 있을겁니다.
스킨에서 본문 전체에 폰트를 적용하게끔 해 두셨다면,
글을 쓰실때(가령 티스토리라면 글쓰기 박스 우측위에 EDIT 버튼이 있습니다.)
Html 코드 수정을 누르셔서 <font> 태그를 사용해서
직접 다른 폰트를 불러오도록 작성해 주셔야겠지요.
웹폰트를 특정한 문구가 나올때만 사용하시려면
일단 폰트 자체는 올려두시고요, 위에 Step2에 있는
<head> 에서 웹폰트를 읽어오는 기본 구문은 적어주신 다음..
글을 쓰실때마다 해당 글의 html 코드를 수정하는
방식으로 사용하실 수 있습니다.
답변 감사합니다^^
관련 글을 곧 포스팅할 예정입니다. 글이 완성되면 트랙백을 보낼께요.
근데 아쉽게도 부분 적용은 안 되네요. 스타일 태그를 본문에 쓰면 내용과 함께 사라져버립니다ㅠㅠ
도움이 되셨다니 다행입니다..^^
부분 적용에 대해서도 시원하게 해결이 되셨다면 좋았을 것을. ㅡㅜ
트랙백 기다리고 있겠습니다.~
step1, 2 둘다 해봤는데 적용이 안되요ㅠㅠ
도와주세요!!!!!!!!!!!!!ㅠㅠ
헉.. ㅡㅜ 넘 간만에 댓글을; 죄송해요..
지금쯤 해결 하셨으려나..
좋은 정보 감사합니다..
많은 도움이 됐어요..즐거운 하루 되세요..^^
좋은 하루 되세요.^^