현재 사용가능한 한글 구글 웹폰트들

Google Fonts opengraph image

구글 웹폰트 early access에 얼마전에 공개된 본고딕이 새로 생겼나 보려고 들어갔다가 의외로 한글 폰트들이 여럿 있어서 모아보니, (2014년 8월 10일 현재) 총 10개가 되네요. 또 다른 웹폰트가 추가되면 이 글도 업데이트 시키도록 하겠습니다.


한나체

배달의 민족으로 유명하죠?ㅎㅎ

제주고딕

스타일이 normal에 400 하나뿐인게 아쉽네요ㅠㅠ

제주명조

제주한라산체

KoPub 바탕

종이책과 ebook용도로 만들어진 폰트죠. 아직 바탕체만 있고, 돋움체는 없네요;;

나눔고딕

나눔고딕 코딩

아래 코드 깔끔하게 보이지 않나요?ㅎ

나눔명조

나눔손글씨 붓

나눔손글씨 펜

본고딕(2016.9.4 추가)

스타일리시 크롬 확장기능 설치 및 사용법

warning.or.kr 접속

크롬이나 파이어폭스를 쓰시는 분들 중 많은 분들이 이미 확장기능을 쓰고 계실겁니다. 여러 인기 있는 확장기능들이 있지만, 제가 개인적으로 좋아하는 것들은 광고차단과 이번 글에서 소개할 Stylish입니다. 요즘 크롬을 쓰는 분들이 많아져서(저도;;) 크롬을 기준으로 설명하겠습니다.

Stylish?

Stylish는 웹사이트의 CSS를 사용자가 원하는 대로 바꿀 수 있게 해주는(정확히는 덮어씌우는) 확장기능입니다. 간단하게는 자주 가는 웹사이트의 폰트나 배경화면을 마음대로 바꾸는 것부터, 레이아웃을 통째로 바꾸는 것까지 가능하게 해줍니다.

스타일리시 설치하기

준비물: 크롬이 깔린 데스크탑 또는 노트북

  1. 크롬 웹스토어의 Stylish페이지로 이동합니다.
  2. 오른쪽 ‘+ 무료’버튼을 클릭합니다.
  3. 확인창에서 ‘추가’버튼을 클릭하면 끝!

스타일리시 사용하기

스타일리시를 사용하는 방법은 크게 2가지가 있습니다. CSS를 직접 작성하는 방법공개된 CSS소스를 가져와서 사용하는 방법입니다. 물론 여기서 CSS를 작성하는 방법은 다루지 않을 거구요;; 공개된 소스를 사용하는 방법을 알려드리겠습니다.
Stylish에서 사용할 수 있는 공개된 CSS는 userstyles.org에서 얻으실 수 있습니다. 여기서는 userstyles.org에서 제가 만든 warning.or.kr redesign을 적용해보죠.

  1. 스타일리시를 적용할 사이트인 warning.or.kr에 접속합니다.
  2. 주소표시줄 오른의 Stylish 아이콘을 클릭하고 ‘Find more styles for this site’를 클릭합니다.
  3. 새 탭으로 뜨는 페이지에서 원하는 스타일을 선택합니다.
  4. Install with Stylish 버튼을 클릭하여 스타일을 설치합니다.
  5. warning.or.kr을 다시 접속해서 바뀐 스타일을 확인합니다.

스타일리시 해제하기

설치된 스타일을 해제하는 방법도 간단합니다.
  1. 적용된 스타일을 해제할 사이트에 접속합니다.
  2. 주소표시줄 오른쪽의 Stylish아이콘을 클릭하고 해제할 스타일 밑의 ‘Disable’을 클릭합니다. (‘Delete’를 눌러 바로 삭제도 가능합니다)

스타일리시 옵션

주소표시줄 오른쪽의 Stylish 아이콘을 오른쪽버튼 클릭하고 ‘옵션’을 클릭하면 나옵니다.

스타일리시 옵션화면에서는 직접 CSS를 작성 및 수정하거나 설치된 스타일의 관리와 업데이트를 할 수 있습니다. 설치된 스타일이 깨진다면 ‘check for update’를 클릭해서 업데이트가 되었는지 확인해보는 것이 좋겠죠.

참 쉽죠?:) 제가 만든 다른 스타일인 소셜미디어 나눔고딕 강제적용도 테스트로 설치해보세요ㅎ

[appbox chromewebstore fjnbnpbmkenffdnngjfgmeleoegfcffe]

티스토리 티에디션 대표이미지 원본사이즈로 불러오기

며칠 전 블로그 스킨을 바꿨습니다.
대대적으로 스킨을 변경하는것도 쉽지 않았지만, 메인화면을 티에디션으로 꾸미는데도 꽤 애 먹었습니다.

티에디션이 메인화면을 있어보이게 만드는데는 참 좋은툴이기는 한데, 썸네일을 마음대로 하기가 어렵다는 단점이 있더군요.
제가 원하는 썸네일 크기는 가로가 665픽셀 정도였는데, 크기 수정 자체가 없어서 어떻게 해결해야할지 고민을 좀 했습니다.

썸네일 → 원본이미지로 바꾸기

[티에디션 설정]에 들어가셔서, 이미 배치해놓으신 아이템을 선택하신 후
[디자인]에서 [HTML]버튼을 누르면 HTML수정을 직접 할 수 있습니다.

소스가 엄청 복잡할텐데요, 잘 살펴보면

http://[##_article_rep_thumb_host[?]_##]/[##_thumb_type[?]_##]/[##_article_rep_thumb_hash[?]_##]

라고 되어있는 부분이 있습니다.(?는 숫자)
여기서 중간의 “[##_thumb_type[?]_##]”를 모두 “original”로 바꿔줍니다.(번호는 무시하세요)

위와 같이 수정 후 저장하면 원본이미지 불러오는건 끝입니다.

이 방법의 단점은 사이즈가 제각각으로 나온다는 겁니다.
그나마 티스토리에서 제공하는 썸네일은 크기가 작더라도 썸네일 크기는 다 똑같아서 상관이 없는데 말이죠.

덧) 그래서 저는 DIV에 CSS로 배경이미지로 지정하여 사용하고 있습니다.

HTML

CSS