반응형

안녕하세요. 계속해서 Flatinum 스킨에 관해 다루어보겠습니다. 이번에는 글꼴 변경에 관한 포스트입니다.


Flatinum 스킨의 기본글꼴은 'KoPub Dotum' 이며 부분적으로 'RaleWay' 글꼴이 적용되어 있습니다.


기본 글꼴도 뭔가 운치있어보이고 몽환적인 글씨체라 나쁘지는 않습니다만 살짝 희미하기도 하고 네이버의 기본글꼴인 나눔고딕에 익숙해져있는 분들이 많다보니 나눔고딕을 선호하는 분도 있습니다.


실제로 나눔고딕이 가독성 면에서도 뛰어나다고 알려져 있기도 합니다. 때문에 디자인이나 분위기 보다는 철저하게 가독성 위주로 가려면 나눔고딕으로 변경하는것이 좀 더 좋습니다.


티스토리에서 나눔고딕을 적용하는것은 그리 어렵지 않으니 차근히 과정을 따라오시기 바랍니다.



1. 아래 사이트에 접속합니다. 구글 웹폰트 사이트로써 웹에서 적용되는 폰트들을 제공하고 있습니다.



https://fonts.google.com/earlyaccess



2. 사이트에 접속하면 Ctrl+F 키를 누르고 Nanum Gothic을 검색합니다.



그럼 위와 같이 검색이 가능합니다. 우리가 필요한것은 Link라고 되어있는 부분입니다.


@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);


이 것이 필요한데요. 현재 웹사이트에서는 조금 잘못된 링크를 제공하고 있습니다. // <- 앞에 http: 이게 빠졌습니다. 따라서 실제로 적용할때는 http:// 까지 같이 입력해주셔야 합니다.


이 부분을 긁어서 복사합니다.



3.  블로그 관리 -> HTML/CSS 편집 -> CSS 로 가서 링크를 붙여 넣습니다.



다만 CSS 코드에서 가장 위에 붙여넣기를 하셔야 합니다. 1번 줄에 보시는바와 같이 나눔고딕의 링크가 붙여져 있습니다.


그 다음 font-family 부분에서 'KoPub Gothic' 앞에 (반드시 앞이어야 합니다) 'Nanum Gothic'을 써 넣습니다. 따옴표도 반드시 같이 포함되어 있어야 합니다.


그리고 font-weight:300 이라는 코드가 있는데 이것을 지워줍니다. font-weight는 글씨의 굵기를 결정해주는데 가장 표준적인 굵기가 400입니다. 따라서 300은 약간 옅습니다. 그렇기 때문에 가독성을 위해서는 font-weight를 지워주세요.


그냥 위와 똑같이 따라하시고 저장버튼 누르시면 됩니다.






(위) 기존 글꼴체       (아래) 나눔고딕 글꼴체 



그럼 글꼴 적용이 모두 완료 됐습니다. 정확하게 적용이 됐는지 확인하고 싶으시다면 '그' 라는 글자를 보시면 확인이 가능합니다.


기존 Flatinum에서 쓰던 글꼴에서는 '그' 라는 글자를 보면 ㄱ 이 90도 직각이 아닙니다. 


그에 비해 나눔고딕은 '그'라는 글자를 보면 ㄱ이 90도 직각으로 되어 있습니다. 이 차이점이 존재하니 확인하시면 될것 같습니다.



제가 알려드렸던 사이트에 방문하면 더 많은 글꼴체가 존재합니다. 굳이 나눔 고딕만 쓰지 않아도 되니 다양한 글꼴체를 적용해서 원하는 스킨을 만드시기 바랍니다.


이것으로 포스팅 마치겠습니다.


반응형

안녕하세요. 이번에도 역시 Flatinum 스킨에 관해 다루겠습니다.


Flatinum 스킨은 기타 다른 스킨들과는 조금 다르게 부트스트랩을 이용하여 스킨을 만들었습니다. 부트스트랩이 솔직히 뭔지는 모르겠고... 그냥 HTML/CSS를 활용하여 더 효과적으로 좋은 것을 만들때 쓰이는 툴이라고 생각하고 있습니다.


어쨌든 특이하게 부트스트랩을 사용하다보니 다른 스킨과는 방식이 좀 다릅니다. 솔직히 말하자면 좀 많이 다르더라구요. 그렇기 때문에 글 넓이 조절하는것도 사실 좀 힘들었는데요. 부트스트랩의 코드 규칙만 안다면 생각보다 아주 간단하게 수정을 할수 있습니다.


무엇보다 부트스트랩은 반응형 웹사이트 제작에 지향하는 툴이다보니... 여러모로 기능도 많다고 하더라구요.



Flatinum 스킨은 기본적으로 블로그 전체 영역이 생각보다 좁은편입니다. 때문에 사진을 크게 넣으시거나 하실때는 수정이 필요합니다. 그 방법은 다음과 같습니다.



먼저 블로그 관리 -> HTML/CSS 편집 -> CSS로 가줍니다. 대부분의 스킨 변경은 CSS에서 해결할수 있습니다.





스크롤을 내려서 가장 아랫부분으로 가시기 바랍니다. 그럼 @media로 시작하는 코드들이 있는데 이것이 바로 블로그 영역을 조절하는 부분입니다. 


이해를 돕도록 간단히 설명을 하자면 첫번째는 사용자 컴퓨터의 가로 픽셀이 최소 768px에서 최대 991px 일경우입니다.


두번째는 최소 992px에서 최대 1199px일경우이며 마지막은 1200px를 넘을경우입니다.


1200px이라 하니까 엄청 큰것 같지만 전혀 크지 않습니다. 왜냐하면 요즘 기본 모니터들도 풀HD를 지원하기 때문에 모니터의 가로픽셀이 기본 1920px 입니다.(해상도가 1920*1080 이므로...) 

심지어 해상도가 상당히 낮은 제 노트북도 가로픽셀은 1366px 입니다.


따라서 대부분의 사용자는 1200px 이상에 해당한다는 것입니다. 그 아래의 해당하려면 옛날 커다란 CRT 모니터 쓸때나 정도에 해당합니다.


모바일의 경우 모바일 웹을 쓰면 아예 다른 스킨으로 굴러가기 때문에 전혀 해당사항이 없습니다. 



따라서 마지막인 min-width: 1200px 안에서만 설정을 해줘도 되지만 혹시모르니 모두 설정정도는 해두시는게 좋습니다.



.container

#jbContentColumn

#jbSidebarColumn

이 세가지가 있는데 이것은 아래와 같습니다.



각 영역입니다. 즉 .container = #jbContentColumn + #jbSidebarColumn 입니다.


저 같은 경우 블로그 전체 영역 가로 넓이를 1250px를 주었고 글 영역 부분 980px, 사이드바 영역을 270px 주었습니다.


이렇게 조절하시면 Flatinum 스킨에서 원하는 크기대로 조절하실수 있습니다.


이것으로 포스팅 마치겠습니다.

+ Recent posts