star

#Ludens

#social #IT #web #iPad #fashion #psychology #responsive

CDN으로 바로 사용가능한 한글 웹폰트 총정리

2015.10.08 08:30 in Web/Coding

작년 글에서 구글 Early Access에서 제공하는 웹폰트를 살펴보았다면, 이번에는 한글날 기념으로(?) CDN 사이트인 jsDelivr에 올라온 웹폰트를 소개해보려고 합니다.

jsDelivr에 올라와 있는 웹폰트들은 woff와 woff2형식으로만 제공되기 때문에(나눔바른고딕은 제외) 인터넷 익스플로러는 IE9 이상부터 적용됩니다.

구글과 겹치는 폰트와 저작권 문제가 있을것이라고 판단한 몇가지는 제외했습니다.


나눔바른고딕

제가 최근에 가장 많이 사용하는 웹폰트입니다. 전 특히 얇은 버전을 좋아합니다 :)

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

본고딕 (Noto Sans)

구글과 어도비에서 만든 폰트입니다. 漢子도 지원된다고 하네요.

  • normal 250:
  • normal 300:
  • normal 350:
  • normal 400:
  • normal 500:
  • normal 700:
  • normal 900:

코드보기(클릭)

스포카 한 산스

어제 공개된 따끈따끈한 새 폰트입니다. 위의 Noto Sans를 수정해서 만들어진 폰트라네요!

  • normal 300:
  • normal 400:
  • normal 700:

사용방법은 폰트 소개 페이지를 참고해주세요 :)

다음체

다음이 사망(ㅠㅠ)하고 배포페이지도 사라졌네요

  • normal 400:
  • normal 700:

코드보기(클릭)

고도체

고도몰로 유명한 고도소프트에서 배포하는 폰트입니다.

  • normal 400:
  • normal 700:

코드보기(클릭)

한겨레결체

2005년에 한겨레에서 배포한 폰트였죠. 모르는 사람이 많더군요ㅎㅎ

  • normal 400:

코드보기(클릭)

롯데마트 드림체

롯데마트에서 배포하는 폰트 중에 '통큰체'도 있었는데, 저작권 문제로 배포가 중단되었더군요. 여기에는 드림체와 행복체만 가져왔습니다.

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

롯데마트 행복체

이 폰트 처음 써보는데 이쁘군요 +_+

  • normal 400:
  • normal 700:

코드보기(클릭)

정음체

북한과 합작해서 만들었다고 합니다.

  • normal 400:

코드보기(클릭)

대한체

  • normal 400:
  • normal 700:

코드보기(클릭)

부산체

  • normal 400:

코드보기(클릭)

성동고딕체

신기하게 '광역시'나 '도'가 아닌 구청에서 제작한 폰트네요.

  • normal 700:
  • normal 800:

코드보기(클릭)

성동명조체

  • normal 400:
  • normal 700:

코드보기(클릭)

바른바탕체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

바른돋움체

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

청소년체

한국청소년활동진흥원(길다;;)에서 배포하는 폰트입니다.

  • normal 400:

코드보기(클릭)

덧) 구글에서 제공하는 폰트까지 합치면 총 24가지 한글 웹폰트를 쓸 수 있군요.

신고
tagAdobe, Code, css, Google, jsDelivr, Lotte Mart, Noto Sans, Spoqa, webfont, 가독성, 고도소프트, 고도체, 나눔바른고딕, 다음커뮤니케이션, 대한인쇄문화협회, 대한체, 드림체, 바른돋움체, 바른바탕체, 본고딕, 부산, 부산체, 북한, 성동고딕체, 성동구청, 성동명조체, 신문사, 여성가족부, 정음체, 청소년체, 한겨레, 한겨레결체, 한글날, 행복체
받은 트랙백이 없고 , 댓글이 없습니다.

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

2014.08.10 22:33 in Web/Coding

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


한나체

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

  • normal 400:

코드보기(클릭)

제주고딕

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

  • normal 400:

코드보기(클릭)

제주명조

  • normal 400:

코드보기(클릭)

제주한라산체

  • normal 400:

코드보기(클릭)

KoPub 바탕

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

  • normal 300:
  • normal 400:
  • normal 700:

코드보기(클릭)

나눔고딕

  • normal 400:
  • normal 700:
  • normal 800:

코드보기(클릭)

나눔고딕 코딩

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

  • normal 400:
  • normal 700:

코드보기(클릭)

나눔명조

  • normal 400:
  • normal 700:
  • normal 800:

코드보기(클릭)

나눔손글씨 붓

  • normal 400:

코드보기(클릭)

나눔손글씨 펜

  • normal 400:

코드보기(클릭)

신고
tagCode, css, Google, html, KoPub 바탕, webfont, 나눔고딕, 나눔고딕 코딩, 나눔명조, 나눔바른고딕, 나눔손글씨 붓, 나눔손글씨 펜, 제주고딕, 제주명조, 제주한라산체, 한나체
받은 트랙백이 없고 , 댓글이 없습니다.

[간단팁] CSS 한줄로 외부링크만 꾸미기

2014.03.26 09:30 in IT/Tip


photo by Shutterstock.com

어제 블로그에 적용해본 초간단팁입니다.

아래 보시면 제 블로그관련 링크에는 링크모양 아이콘이 안붙고, 외부링크에는 아이콘이 붙는 걸 보실 수 있을겁니다.

비밀은 바로 아래 적힌 CSS 한줄입니다.

위의 코드를 복사하셔서 적당하게 수정해주시면 되겠습니다.

  1. .article은 글을 감싸고있는 상위 요소로 바꿔주시고
  2. site.address.com은 적용할 사이트 주소로 바꾸신 후
  3. 저처럼 뒤에 스타일을 적용하실거면 ':after'을 살려두시고(앞을 꾸미실거면 ':before'로 바꾸시고)
  4. 원하는 CSS 스타일을 적용하시면 됩니다.

어떤 원리일까?

덧) 응용하면 이런것도 가능합니다 → @ludensk

신고
tagBlog, Code, css, Link, tip, 꾸미기, 외부, 원리
받은 트랙백이 없고 , 댓글이 없습니다.

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

2014.01.04 20:16 in IT/Tip

크롬이나 파이어폭스를 쓰시는 분들 중 많은 분들이 이미 확장기능을 쓰고 계실겁니다. 여러 인기 있는 확장기능들이 있지만, 제가 개인적으로 좋아하는 것들은 광고차단과 이번 글에서 소개할 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’를 클릭해서 업데이트가 되었는지 확인해보는 것이 좋겠죠.

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

덧) 한글로 된 소개글이 당연히 있을줄 알고 구글링했는데 없길래 그냥 썼어요...
덧2) 이 모든 것은 다음 포스팅을 위해서;;

신고
tagchrome, css, option, Stylish, update, userstyles.org, warning.or.kr, web, 사용법, 삭제, 설치, 해제, 확장기능
받은 트랙백이 없고 , 댓글이 없습니다.

티스토리 첫화면에서만 사이드바 없애기(초간단팁)

2012.11.28 12:03 in Web/Coding

워드프레스 테마들을 보면 티스토리 테마들과는 다르게 첫페이지에서 사이드바를 불러오지 않는 경우가 많습니다. 워드프레스는 대부분 메뉴, 컨텐츠, 사이드바, 푸터 등등 다 php파일로 쪼개져있어서 원하는 부분만 불러오는 게 가능한 걸로 알고있습니다. 그런데 얼마 전 스킨수정을 하다가 티에디션을 쓰면 사이드바를 아주 간단하게 없앨 수 있다는 것을 알게 되었죠.

결론부터 이야기하면 CSS에 아래 한 줄만 추가하면 됩니다.

티에디션의 클래스속성을 사용해 CSS로 감추는 방법입니다. 티에디션을 사용하면 body에 클래스속성으로 ‘tedition_blog’가 붙는데 이를 이용한 것이죠.

그런데 정말 사이드바만 없어지는 현상이 발생합니다(…) 이제 CSS에 한줄 더 추가해서 한쪽으로 치우쳐진 컨텐츠영역을 좀 늘려보겠습니다.

이러면 깔끔하게 중앙으로 옵니다.
참 쉽죠? :)

신고
tagcss, sidebar, Skin, tip, Tistory, Wordpress, 첫화면, 티에디션
받은 트랙백이 없고 , 댓글4개가 달렸습니다.

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

2012.08.18 16:23 in Web/Coding

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

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

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

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

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

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

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

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

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

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

이미지영역 소스보기

저작자 표시 비영리 변경 금지
신고
tagcss, design, html, IMAGE, Skin, Source, thumbnail, Tistory, 대표, 원본, 티에디션
트랙백이 하나이고 , 댓글이 없습니다.

블로그 웹폰트 적용기

2008.12.13 20:01 in Blog

이곳의 웹폰트는 MS의 EOT가 아니라 확장자가 TTF인 트루타입글꼴입니다.
그리고 윈도우즈에서만 가능합니다.

오페라10 알파버전, 그리고 파이어폭스 3.1버전에서 웹폰트지원 이야기를 들은 저는 블로그에 웹폰트를 적용시키기로 마음먹었습니다.
일단 여러 무료폰트중에서 네이년이 만들어 배포하는 나눔고딕을 쓰는건 제 취향에는 영 아니라서 한겨레신문에서 배포하는 한겨레결체를 쓰기로 결심했습니다.
사용자 삽입 이미지
먼저 직접올리기에서 폰트파일을 올린뒤에
오페라10 알파를 주력으로 사용하는 저는 그쪽에 설명나온대로 아래와같이
사용자 삽입 이미지
스킨->CSS설정에서 간단하게 한줄을 추가시키고요. 테스트를 위해 제 윈도우에서 한겨레결체를 없앤뒤 들어가보았습니다.
이렇게 오페라10 알파에서는 성공적으로 나왔는데...

불여우에서는 안나오더군요. 아마 정식버전부터 지원되나 봅니다.
저는 된다는 소리만 듣고 베타에서도 적용되는줄 알았지요-_-;;

일단 지금은 오페라10알파 말고는 웹폰트가 적용 가능한 브라우져가 아직 없는것 같군요. 이제 파이어폭스도 정식버전이 나오면 웹폰트적용이 될것이니 IE에서 EOT지원이 아니라 TTF를 지원했으면 하는 바램이 있네요.
신고
tagalpha, Beta, css, eot, firefox, Internet Explorer, Opera, Skin, test, truetype, TTF, Web font, Windows, 글꼴, 지원, 한겨레, 한겨레결체
받은 트랙백이 없고 , 댓글8개가 달렸습니다.

블로그에 미투글을 달아봅시다

2008.07.26 23:50 in Blog

저는 API가 뭔지도 모르고 CSS도 어떻게 하는건지 전혀 모르는 사람입니다.
이 방법은 Channy님의 미투전광판을 토대로 제가 심플하게 변형한 것입니다.

글 위에 이렇게 뜨는 한 문장의 글귀가 무엇인지 궁금하지 않으셨나요?
이것은 미투데이라는 마이크로블로그서비스를 이용한 것인데요,
사용자 삽입 이미지
저렇게 쓰는 이야기를 블로그에 어떻게 옮겨놓을수 없을까 하다가 찾았답니다.

소스는 아래와 같습니다(제 스킨에 적용된 그대로 써 놓았습니다.)
<link rel="stylesheet" href="http://cfs.tistory.com/custom/blog/11/119697/skin/images/me2fade.css" type="text/css" />
<script type="text/javascript" src="http://cfs.tistory.com/custom/blog/11/119697/skin/images/me2fade.js"></script>
<script type="text/javascript">
addLoadEvent(me2fade.init("ludens"));
</script>
<div id="me2fade"></div>
<div class="article">[##_article_rep_desc_##] </div>
적용을 하시려면 일단 관리자화면에서 '스킨'→'HTML/CSS 편집'으로 가셔서
<div class="article">[##_article_rep_desc_##] </div>이라는 부분 위에 붙여넣으시면 됩니다. 다른곳에 넣으셔도 상관은 없습니다;;;
참, 중요한 사항은 ludens를 자신의 아이디로 바꾸어야 합니다.
바꾸지 않으면 제 미투글이 뜰거에요;;;

위에서 필요한 파일은
이렇게 2개입니다.(사실 제것과 똑같은 모양새로 쓰길 원하신다면야 필요는 없습니다;;;)
파일은 '스킨'->'직접올리기'로 올리시면 됩니다.
그리고 본인의 취향에 맞게 수정하시면 됩니다.

me2fade.css 설정


참, 미투데이를 하시는 블로거분들 미투주소랑 댓글좀 남겨주세효 친신할거에요!
meet me at me2DAY
150자의 재미있는 낙장불입의 세계에 가입하실 분은 여기를 눌러주세효~
신고
tagAPI, Blog, css, html, me2day, me2fade, Skin, 낙장불입
트랙백이 하나이고 , 댓글17개가 달렸습니다.

티스토리 툴바