티스토리(태터툴즈) 블로그에 웹폰트 적용하기
WebPrograming관련 :
2007. 4. 30. 21:42
반응형
출처 : http://si-hon.net/2
티스토리(태터툴즈) 블로그에 웹폰트 적용하기
Step 1. 무작정 따라하기
1. 웹폰트 다운로드 후, '스킨-스킨편집-직접올리기' 모드에서 업로드.
2. 스킨 편집을 누르고, 위아래로 나뉜 두가지 창 중에서 위쪽 창의 소스 가운데
<head>와 </head>사이에 다음과 같이 입력해 준다.
폰트 이름은 자유로이 입력해도 Ok.
(하지만, 기본 폰트의 이름을 넣는 것이 좋겠죠. ex) 산책10)
'폰트파일명.확장자' 이 부분의 ~./images/... 부터가 경로인데 여기서는
티스토리에 맞춰서 설명하고 있으므로... 파란 부분에만 알아서 넣어주면 되겠다.
10pt 는 폰트사이즈인데, 이 사이즈의 경우 특정한 사이즈에서만 제대로 출력이 되는
폰트가 많으므로 반드시 다운받은 곳에서 적절 사이즈를 확인해서 집어넣어주자.
3. 다시, 위쪽 창 skin.htm 탭에서 article_rep_desc_## 을 검색하여 찾는다.
(저 부분이 전체 중 하나 뿐이므로 찾기 쉽다.) 그리고 찾은 부분의 바로 윗 줄을 보면
<div class="article"> 이라는 구문이 있다. 그 구문 옵션에다가
style="font:10pt/150% 폰트이름;" 이와같이 넣어준다.
여기서 10pt 는 역시 폰트별로 적절한 사이즈를 넣어야하고,
150% 는 줄간격이므로 적당한 줄간격을 찾아서 넣어주자. 기본은 당연 100%.
(웹폰트는 작고 아기자기한 글씨체가 많기 때문에 150% 정도로 벌려주는 것이 보통 예쁘게 보입니다.)
<div class="article" style="font:10pt/150% 폰트이름;"> 이렇게 되면 Ok.
2번의 과정은 웹폰트를 블로그 스킨과 외부에 적용하는 것이고
3번의 과정이 블로그의 포스트와 내용물에 폰트를 적용하는 과정이다.
원하는 부분에만 적절히 적용해 주시길.
덧: 파이어폭스에서는 웹폰트 적용 불가.
(이해하고 따라가는 Step 2 를 보실분은 조금더 펼쳐보세요.)
Step 2. 이해하고 따라하기
위의 방법이 초보라도 따라할 수 있는 가장 간단한 방법이고,
좀 더 세부적으로 깔끔하게 폰트를 적용하려면 스타일 시트를 만져 주어야 한다.
스타일 시트란 스킨편집란의 html 문서(skin.html) 아래의 style.css 부분이다.
스타일 시트로 문서의 성격을 규정해주면, 구문마다 일일히 폰트 지정 명령을 주지 않아도
되므로 편리하고 깔끔한 문서를 구성할 수 있다.
요컨대, 스킨을 적용한 후 밑에 있던 검색창을 위로 붙인다던가, 카운터 위치를 가운데로 조정해
준다든지 하는 위치를 손보려면 위쪽 창의 html 문서를 만지면 되고, 문서 전체의 폰트를
바꿔 주고 싶다든지, 특정한 폼(즉 블로그 메인, 태그, 위치로그 등의 제목창)의 글씨 굵기나
크기를 바꿔주고 싶다는 등의 문서의 미적인 성격을 조절하려면 아래쪽 창의 스타일 시트를
조절하는 식이다.
어쨌든....
스타일 시트 자체는 스킨을 제작한 제작자 분들의 취향문제도 있고,
스킨 각각마다 전부 다 다르기 때문에 위의 따라하기처럼 이렇게 바꾸세요ㅡ라고
못 박을수는 없다. (더구나 본인도 언어를 이해하는 수준의 전문가는 아니기 때문에;;)
해서, 아래에 필자가 현재 수정해서 사용중인 스킨의 스타일 시트를 붙여 이해를 돕고자한다.
단순히 웹폰트를 적용하기 위한 작업이라면 font 명령어가 나온 부분에 주목해서
아래처럼 본인의 웹폰트 스타일로 적용해주면 된다. 어느 부분이 어떤 부분의 스타일인지는
보통 '/* ~~ */' 과 같은 주석이 달려 있으니 알기도 쉽다.
단, 아래처럼 스타일 시트를 손본다 하더라도 가장 중요한 구문, 즉 Step 1 에서 붙여넣기 한
이 부분은 html 문서의 head 에 반드시 들어가 있어야 한다.
이유는, 이 구문이 업로드된 웹폰트 파일을 실제 읽어오는 부분이며
읽어온 다음에야 비로소 명령어를 사용해 문서에 적용이 가능....하기 때문이라고 하겠다.
간단히 말해, 스타일 시트를 만져서 적용하고 싶다면, skin.html 탭의 <head> 와 </head> 의
사이에 위의 저 구문을 집어넣어주고 시작하시라는 말씀.
우선 예제를 보기 전에 간단히 설명하자면, 아래 스타일 시트의 '본문 공통' 부분을 보자.
line-height: 150%; 줄은 '페이지 전체에 줄간격 150% 주겠다' 라는 의미이다.
이렇게 해 주면, Step 1에서 <div> 태그 안쪽에 넣어준 옵션 중 줄간격이 페이지 전체에
간단히 적용이 된다. Step 1에서 한 바와같이 skin.html 페이지의 저 부분에만 옵션을
줄 경우, 포스트(즉 본문) 부분에만 줄간격이 걸리기 때문에 방명록이나 태그 구름에는
들쭉날쭉한 줄간격이 되어 다소 보기 싫은 블로그가 될 수가 있다. (물론 가독성도 떨어진다)
게다가 스타일 시트를 만지게되면 어딘가에서 퍼온 글을 붙여놓기 할 때도 자신의
블로그 폰트로 제대로 적용이 된다. Step 1과 같은 과정만을 밟을 경우, 복사하여 퍼온
포스트의 폰트가 자신의 블로그내에서 적용되지 않게 된다. 퍼온 곳에서의 폰트가
우선되기 때문이다. 직접해 보면 이해가 쉬울 것이다.
a:link 라는 줄은 '본문 전체에서, 링크가 걸려있는 텍스트의 스타일을 결정 하겠다' 라는 의미이다.
그 이하는 전부 이와같이 font-family: 산책10; font-size: 10pt; 스타일이 붙은,
'어디어디의 폰트를 무엇으로 하고, 어떤 스타일을 적용하라' 라는 명령이므로
이런식으로 차분히 살펴보면 누구나 쉽게 할 수 있을 거라..........고 예상하는 바이다.
............┌( -_-)┘(후다닥)
스킨을 제작하신 분의 권리 문제도 있고하니... 전부 공개는 불가;
(빨간 부분에 주목해서 봐 주신다면 이해가 좀더 쉬울 것으로 생각합니다~)
티스토리(태터툴즈) 블로그에 웹폰트 적용하기
Step 1. 무작정 따라하기
1. 웹폰트 다운로드 후, '스킨-스킨편집-직접올리기' 모드에서 업로드.
2. 스킨 편집을 누르고, 위아래로 나뉜 두가지 창 중에서 위쪽 창의 소스 가운데
<head>와 </head>사이에 다음과 같이 입력해 준다.
<style type="text/css">
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
a:link {font-family: 폰트이름;font-size: 10pt;}
a:visited {font-family: 폰트이름;font-size: 10pt;}
a:hover {font-family: 폰트이름;font-size: 10pt;}
a:acvite {font-family: 폰트이름;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 10pt;}
</style>
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
a:link {font-family: 폰트이름;font-size: 10pt;}
a:visited {font-family: 폰트이름;font-size: 10pt;}
a:hover {font-family: 폰트이름;font-size: 10pt;}
a:acvite {font-family: 폰트이름;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 10pt;}
</style>
폰트 이름은 자유로이 입력해도 Ok.
(하지만, 기본 폰트의 이름을 넣는 것이 좋겠죠. ex) 산책10)
'폰트파일명.확장자' 이 부분의 ~./images/... 부터가 경로인데 여기서는
티스토리에 맞춰서 설명하고 있으므로... 파란 부분에만 알아서 넣어주면 되겠다.
10pt 는 폰트사이즈인데, 이 사이즈의 경우 특정한 사이즈에서만 제대로 출력이 되는
폰트가 많으므로 반드시 다운받은 곳에서 적절 사이즈를 확인해서 집어넣어주자.
3. 다시, 위쪽 창 skin.htm 탭에서 article_rep_desc_## 을 검색하여 찾는다.
(저 부분이 전체 중 하나 뿐이므로 찾기 쉽다.) 그리고 찾은 부분의 바로 윗 줄을 보면
<div class="article"> 이라는 구문이 있다. 그 구문 옵션에다가
style="font:10pt/150% 폰트이름;" 이와같이 넣어준다.
여기서 10pt 는 역시 폰트별로 적절한 사이즈를 넣어야하고,
150% 는 줄간격이므로 적당한 줄간격을 찾아서 넣어주자. 기본은 당연 100%.
(웹폰트는 작고 아기자기한 글씨체가 많기 때문에 150% 정도로 벌려주는 것이 보통 예쁘게 보입니다.)
<div class="article" style="font:10pt/150% 폰트이름;"> 이렇게 되면 Ok.
2번의 과정은 웹폰트를 블로그 스킨과 외부에 적용하는 것이고
3번의 과정이 블로그의 포스트와 내용물에 폰트를 적용하는 과정이다.
원하는 부분에만 적절히 적용해 주시길.
덧: 파이어폭스에서는 웹폰트 적용 불가.
(이해하고 따라가는 Step 2 를 보실분은 조금더 펼쳐보세요.)
less..
Step 2. 이해하고 따라하기
위의 방법이 초보라도 따라할 수 있는 가장 간단한 방법이고,
좀 더 세부적으로 깔끔하게 폰트를 적용하려면 스타일 시트를 만져 주어야 한다.
스타일 시트란 스킨편집란의 html 문서(skin.html) 아래의 style.css 부분이다.
스타일 시트로 문서의 성격을 규정해주면, 구문마다 일일히 폰트 지정 명령을 주지 않아도
되므로 편리하고 깔끔한 문서를 구성할 수 있다.
요컨대, 스킨을 적용한 후 밑에 있던 검색창을 위로 붙인다던가, 카운터 위치를 가운데로 조정해
준다든지 하는 위치를 손보려면 위쪽 창의 html 문서를 만지면 되고, 문서 전체의 폰트를
바꿔 주고 싶다든지, 특정한 폼(즉 블로그 메인, 태그, 위치로그 등의 제목창)의 글씨 굵기나
크기를 바꿔주고 싶다는 등의 문서의 미적인 성격을 조절하려면 아래쪽 창의 스타일 시트를
조절하는 식이다.
어쨌든....
스타일 시트 자체는 스킨을 제작한 제작자 분들의 취향문제도 있고,
스킨 각각마다 전부 다 다르기 때문에 위의 따라하기처럼 이렇게 바꾸세요ㅡ라고
못 박을수는 없다. (더구나 본인도 언어를 이해하는 수준의 전문가는 아니기 때문에;;)
해서, 아래에 필자가 현재 수정해서 사용중인 스킨의 스타일 시트를 붙여 이해를 돕고자한다.
단순히 웹폰트를 적용하기 위한 작업이라면 font 명령어가 나온 부분에 주목해서
아래처럼 본인의 웹폰트 스타일로 적용해주면 된다. 어느 부분이 어떤 부분의 스타일인지는
보통 '/* ~~ */' 과 같은 주석이 달려 있으니 알기도 쉽다.
단, 아래처럼 스타일 시트를 손본다 하더라도 가장 중요한 구문, 즉 Step 1 에서 붙여넣기 한
<style type="text/css">
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
</style>
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
</style>
이 부분은 html 문서의 head 에 반드시 들어가 있어야 한다.
이유는, 이 구문이 업로드된 웹폰트 파일을 실제 읽어오는 부분이며
읽어온 다음에야 비로소 명령어를 사용해 문서에 적용이 가능....하기 때문이라고 하겠다.
간단히 말해, 스타일 시트를 만져서 적용하고 싶다면, skin.html 탭의 <head> 와 </head> 의
사이에 위의 저 구문을 집어넣어주고 시작하시라는 말씀.
우선 예제를 보기 전에 간단히 설명하자면, 아래 스타일 시트의 '본문 공통' 부분을 보자.
line-height: 150%; 줄은 '페이지 전체에 줄간격 150% 주겠다' 라는 의미이다.
이렇게 해 주면, 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;}
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;}
.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;}
.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; }
.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;}
.
.
.
.
.
.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;}
.
.
.
.
.
스킨을 제작하신 분의 권리 문제도 있고하니... 전부 공개는 불가;
(빨간 부분에 주목해서 봐 주신다면 이해가 좀더 쉬울 것으로 생각합니다~)
less..
반응형
'WebPrograming관련' 카테고리의 다른 글
| input (0) | 2007.05.02 |
|---|---|
| 웹 표준 가이드 (0) | 2007.04.21 |
| 제로보드 utf-8 환경에서 깨짐없이 한글 자르기(cut_str 수정) (1) | 2007.03.25 |
