티스토리를 처음 시작한걸.. 확인을 하기 힘들지만..
첫 글이 2006년도 네요..
기억이 거의 없지만.. 아마 그때부터 사용한 스킨이 지금 블로그의 스킨입니다..
//
언제 적용을 했는지는 .. 기억이 없고
스킨 자체도 워낙 많이 건들어서 ... 어떻게 다른 스킨을 적용하기에도 애매한 상황이지요..
그래도 제 취향에 너무 맞는 녀석이라 제작자 분이 새로운 스킨을 만드셨나 하고 근래에 가봤으니.. 도메인이 사라졌네요.
//
아쉬움을 뒤로하고..
이곳 저것 쓸만한 스킨을 찾아 헤메였지만... 심플하고 제 맘에 꼭드는 녀석은... 없네요..
아무래도 몇년은 계속 이 스킨을 써야 할듯한데...
개인적으로 글을 읽는게 조금 불편해져서.. (눈이 침침해진듯..) 폰트 크기를 좀 키울까 하는 생각에... 나눔 고딕을 적용해봤습니다.
나눔바른고딕도 마음에 드는데...
애매한 부분에서 좀 그렇기에... 그냥 평범한 나눔고딕으로 진행을 해봤습니다.
////
가장 먼저 흔한 웹폰트 링크를 CSS 에다가 넣어줘봤네요.
이렇게 넣어주게 되면....
특별히 어려움 없이 누구나 웹폰트를 사용을 할수있게 되지만..
인터넷 상황이 그리 좋지 못하거나 하는 상황이 되어서 웹폰트 자체를 다운로드 받는 시간이 느려지면...
그 시간동안 블로그에 글이 보이지가 않게 됩니다.
그래서 다시 바꾼것이.. HTML 에다가 자바스크립으로 구글에서 제공하는 웹폰트로더를 이용했는데요.
티스토리 스킨 편집에서 HTML 에다가 넣어주시면 되는데.
주의 하실점은.. CSS 파일을 로드 하기 전 위치에 넣어주셔야 합니다.
잘 모르신다면
<Head> 바로 아래에 넣어주시면 되요.
Untitled-01.txt본 블로그는 .. 일반적으로 마우스로 긁어 가기가 안되니. 저 TXT 파일을 열으셔서.. 복사한후에 자신의 스킨 HTML 에 넣어주시면 되겠숩니다.
//
어찌 되었건 이렇게 HTML 에 넣어주게 되면...
웹폰트 파일이 로드 되기 전까지는.. 굴림이나 돋음 처럼 기본적인 폰트로 블로그가 보여지다가..
웹폰트 파일이 모두 다운로드가 되면 .. 즉시 적용이 되어서.. 설정된 나눔고딕으로 보여지게 되는거죠.
문제는 지금까지 했던것은...
웹폰트를 불러오는 경로를 HTML 상에서 설정을 한것이고...
이제 티스토리 자체에서 웹폰트를 적용을 해보겠숩니다.
//
우선 저는 .. 웹폰트인 나눔고딕을 블로그 전체에 적용하고 싶지가 않은 상황입니다..
아마도 제가 쓰는 스킨이 여러군데 다른 기본 폰트를 이용해서 구성을 해 놓아서 그런지.. 나눔고딕으로만 보여지게 하면 좀 이상하게 보여지는곳이 좀 있더군요.
그래서 다른 부분은 모두 제외하고.
블로그 본문... 에만 나눔고딕을 적용을 해볼까 합니다.
블로그에서 우클릭을 한후에.. 페이지 소스를 열어 보게 되면...
전체적인 블로그 레이아웃을 확인 할수가 있는데.
본문이 시작하는 "친구 부부가" 로 검색해서 보니..
본문자체가 div class 설정이 article 로 지정이 되어 있네요.
원래 이런 부분은... 암묵적인지 혹은 공식적인지 스킨에 지정이 되어 있는지 모르지만...
대부분 비슷 할꺼에요.
그럼 HTML5 로 넘어오면서.. 페이지 디자인을 담당해온 CSS 파일을 확인해보죠.
대략.. 너비는.. 100% 로 상위 틀에서 지정한 너비를 가득 채우게 해놓고.. padding-bottom 이 20px 되어 있네요..
워낙 웹디 쪽을 손놓은지가 오래되어서 정확히 기억이 안나지만...
아마도 멘 하단에 20 픽셀 정도 공간을 마련하라는 말일꺼에요.
자 그럼 여기에...
나눔 고딕을 지정을 해보죠.
div class 로 지정된 article 에다가 font 크기를 10pt 로 지정을 하고 폰트 이름은 Naum Gothic' 으로 넣었습니다.
그럼 이상태에서 저장을 한번 해주고 블로그에서 어떻게 보여지는지 확인을 해보죠.
블로그 이름을 포함한 다른 폰트들은 기존에 굴림이나 돋음 같은 폰트로 유지가 되는 상태에서.
본문의 .. 글만 나눔고딕으로 변경이 되었네요.
으음..... 얼핏 보면 깔끔해 보이는데....
블로그 스킨을 수정하고 있는 상황에서... 우연이도 장문??? 의 글을 적었던 때라... 다시 한번 읽어보려고 하니.. 이거 눈이 너무 아프네요.
문단사이의 간격을 조금 넓혀줘야 하지 않나 싶네요.
다시 한번 수정에 들어가봅니다.
이번에 article 에다가 line-height 를 1.5em 정도 줘봅니다.
개인적으로 1.3~1.6 까지 꽤나 고민을 했는데.. 아무래도 단기간내에 결정하기가 힘들더군요.
블로그 자체가 어두운색이 바탕에 .. 홰색 글씨체라서... 간격을 조금 더 넓혀야 눈이 편할꺼 같은데... 아직 결정을 못했습니다....
하지만... 가볍게 딱 마춰서 1.5로 지정을 해봤네요.
확실히 글과 글 사이에 간격이 넓어진것이 보인이네요.
이 설정의 같은 경우엔 각 블로그의 성격이나 글의 량.. 혹은 스타일에 따라서.. 조금 다르게 설정을 해야 합니다.
물론 객관적인 수치로 어느정도 넓히면 보기 좋다라는 말은 있지만...
아쉽게도 제 블로그의 배경색과 글 색은.. 더 넓은 간격이 필요하지 않나 싶네요.
이부분은 나중에 시간을 드려서.. 조금 생각을 해보거나.. 아니면 블로그 스킨 자체를 다른것으로 바꾸는 .... 대대적인 공사를 해야 해서.. 지금은 어떻게 해야 할지 잘 모르겠숩니다.
////
작은 노력으로 블로그의 분위기를 바꾸는것중에 폰트만한게 없는듯 하더군요.
한번쯤 해보세요.
재미있고 또 노력한 보답이 있을것입니다.
'Tip' 카테고리의 다른 글
| NPAPI 중단과 무관하게 액티브X가 가능한 스윙 브라우저 (2) | 2015.09.05 |
|---|---|
| 솔향강릉 관광안내지도 및 바우길지도 받기.. (0) | 2015.09.01 |
| 부팅 USB 만들기 편한 Rufus (0) | 2015.08.21 |