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, 가독성, 고도소프트, 고도체, 나눔바른고딕, 다음커뮤니케이션, 대한인쇄문화협회, 대한체, 드림체, 바른돋움체, 바른바탕체, 본고딕, 부산, 부산체, 북한, 성동고딕체, 성동구청, 성동명조체, 신문사, 여성가족부, 정음체, 청소년체, 한겨레, 한겨레결체, 한글날, 행복체
받은 트랙백이 없고 , 댓글이 없습니다.

PC웹에서 twemoji로 이모티콘 이쁘게 보기

2015.06.26 14:51 in Web/Coding

emoji
emoji by downloadsource.fr

스마트폰📱에 내장된 기본이모티콘 많이들 쓰시나요? 전 예전에는 iOS랑 안드로이드랑 호환이 안되서 많이 안쓰다가, 최근에는 호환이 잘 되는 것 같아 자주 쓰고 있습니다. 😀😀

그런데 이 이모티콘들, PC💻에서도 쓸 수 있습니다.

  • 맥OS: 타이핑 중, Command+Control+Space 키[각주:1]
  • 윈도우8: 터치키보드에서 이모티콘 선택[각주:2]
  • 공통: 이모티콘 사이트(Get Emoji 등)에서 복사+붙여넣기

문제는 이 이모티콘이 이쁘게 적용되지 않는 브라우저들도 있다는 거죠.
(여기서는 IE를 예로 들었지만 크롬에서도 비슷합니다..)

지원 안되는 브라우저들 시르다 😭😭

이 상황에 대한 해결책이 바로 트위터에서 만든 twemoji인 것이죠. 😆😆

10초만에 설치하기

twemojigithub에 공개되어있고, CDN에서 끌어다 쓸 수 있어서 매우 편합니다.  적용하고 싶으신분들은 아래 두줄만 HTML코드 중 </body> 위에 추가시키면 끝입니다.

그런데 기본크기가 36x36으로 좀 큽니다. 그래서 작게 나오도록 코드를 수정했습니다.

사이즈는 16, 36, 72가 있습니다. 16과 36의 중간크기가 없는게 아쉽네요😥😥

참 쉽죠? :)

  1. <a href="http://macnews.tistory.com/1723" target="_blank">OS X 매버릭스의 새로운 이모티콘•특수문자 입력 방법 마스터하기</a> [본문으로]
  2. <a href="http://blog.getemoji.com/emoji-keyboard-windows" target="_blank">How To Use Emoji On Windows 8</a> [본문으로]
신고
tagAndroid, Browser, chromium, emoticon, html, Internet Explorer, IOS, mac os, PC, tip, twemoji, web, windows 8, 설치, 호환
받은 트랙백이 없고 , 댓글이 없습니다.

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

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, 나눔고딕, 나눔고딕 코딩, 나눔명조, 나눔바른고딕, 나눔손글씨 붓, 나눔손글씨 펜, 제주고딕, 제주명조, 제주한라산체, 한나체
받은 트랙백이 없고 , 댓글이 없습니다.

파비콘의 중요성에 대하여

2013.04.03 09:07 in Web/Coding

clip_image001

이 글은 Let’s Talk About the Importance of Favicons의 번역입니다.

온라인 비지니스의 전문가들은 작은 것들이 경쟁에서 차이를 만들어 낸다는 것을 알고 있습니다. 경험이 별로 없는 사람들도 그 사실을 빠르게 배울 것입니다. 여러분의 수준이 전문적이더라도 웹사이트 디자인에 대해 간과하는 몇가지가 있죠. 그러한 가장 적절한 예가 웹사이트의 파비콘입니다. 파비콘이 뭔지 아시나요? 아신다면, 파비콘을 효과적으로 사용하고 계신가요?

파비콘을 소개합니다

clip_image002

'파비콘'이라는 단어는 'favorites icon'줄인 말입니다. 원래 파비콘은 즐겨찾기(또는 북마크) 목록에서 웹페이지를 구별하기 위해 사용되었죠 오랜 시간 동안 파비콘은 다른 용도로 발전해왔습니다. 파비콘을 볼 수 있는 장소들은 다음과 같습니다.

  • 인터넷 브라우저 주소입력줄의 왼쪽편에
  • (브라우저가 예상 URL 서비스를 지원한다면)예상 URL의 목록에서
  • 브라우저에 열려진 다양한 탭들

삶을 편하게 만드는 파비콘

요즘, 인터넷을 정기적으로 사용하는 대부분의 사람들은 파비콘을 보는 것에 익숙해져 있습니다. 평범한 인터넷 사용자들은 아마 파비콘에 대해 많은걸 알지 못할 겁니다. 하지만 그 사용자들은 파비콘의 존재 유무를 구별해냅니다.

clip_image004

뇌는 이미지를 글자보다 더 빠르고 쉽게 처리할 수 있습니다. 즐겨찾기 목록을 둘러볼 때, 사용자들은 파비콘이 붙어있는 덕분에 원하는 사이트를 빠르게 찾아냅니다. 여러 개의 탭이 열려있을 때에도 똑같은 일이 일어납니다. 파비콘은 각각의 다른 사이트들을 더 쉽게 구별할 수 있도록 합니다.

clip_image005

반대로 웹사이트에 파비콘이 없다면, 그저 빈 페이지가 웹사이트의 이름 옆에 있을 것입니다. 파비콘이 없는 여러 즐겨찾기를 가지고 있다면, 그런 사이트들이 똑같이 빈 문서 아이콘으로 보여서 원하는 사이트를 고르는 것이 훨씬 더 어렵겠죠.

신뢰를 주는 파비콘

사이트에 맞춤 파비콘을 포함시키는 것은 신뢰를 주는 한가지 방법입니다. 마치 보잘것 없는 것처럼 보이지만, 방문자들은 파비콘을 알아차리고, 그것이 무엇을 뜻하는지 평가할 것입니다. 비슷하게, 워드프레스 초보자들이 기본 파비콘을 사용할 때 사용자들은 이를 알아차립니다. 파비콘이 있는 것이 없는 것보다는 좋고, 맞춤 파비콘이 기본 파비콘보다 좋습니다.

브랜드인지도를 상승시키는 파비콘

우리 모두는 로고의 중요성에 대해 알고 있습니다. 우리를 기업과 시각적으로 연결시켜주는 것이 바로 그것이죠. 맥도날드에 노란 아치모양이 없다면 어떨까요? 아니면 트위터에 조그만 파랑새가 업다면요? 여러분들의 회사 로고에서 유래됬든, 완전히 새로운 모습이든 간에 파비콘은 작은 로고와 같습니다. 파비콘은 인터넷 사용자들에게 브랜드를 기억하는데 도움을 줍니다.

파비콘 만들기

clip_image006

맞춤 파비콘이 필수적일까요? 그렇지는 않습니다. 하지만, 저는 만들어진 파비콘들이 방문자경험의 전반적인 품질 개선에 꽤 큰 영향을 준다고 생각합니다.

만약 새로 파비콘을 만들거나, 기본파비콘 또는 오래된 파비콘을 업그레이드한다면, 해야 할 것들이 있습니다.

  1. 파비콘 생성기를 웹에서 찾기(엄청나게 많습니다)
  2. 파비콘 생성하기(보통 16픽셀x16픽셀)
  3. 테마의 이미지섹션으로 가기
  4. 파비콘 추가 또는 기존의 파비콘을 대체하기

파비콘은 엄~청 작다는걸 기억하세요. 파비콘에 너무 많은걸 넣거나 장식을 많이하지 마세요. 알아볼 수 없는 파비콘은 없는것보다 오히려 안좋습니다.

clip_image007

두드러진 글씨체로 회사이름의 첫글자를 이용해보세요. 위의 구글 파비콘이 그러한 완벽한 예입니다. 매우 간편한 방법인 동시에, 여러분들이 원하는 만큼 근본적이고 정교하게 만들어질 것입니다.

clip_image008

만약 이미 회사로고가 있다면, 파비콘에 로고의 특정부분이나 전체를 넣을 수 있는지 보세요. 로고와 회사 이니셜을 함께 사용한 아마존을 위 사진을 보고 확인해보세요.


만약 여러분이 온라인세상에 처음이라면, 이 글이 아마 파비콘에 대해 알 수 있는 첫번째 기회가 아닌가 싶습니다. 인터넷 비지니스의 전문가라면 여러분들이 이미지를 대충 볼 때부터 알고 있었을 테죠. 어느 쪽이든 여러분들의 파비콘을 만드는 것은 웹사이트의 성공에 도움이 될 것입니다.

덧) 파비콘이라는게… 없어도 그만, 있어도 그만인데 정작 없으면 허전한 그런 느낌이라죠;;

신고
tagAmazon, Brand, favicon, Google, Internet, web, 만들기, 사용자, , 소개, 신뢰, 인지도
트랙백이 하나이고 , 댓글이 없습니다.

티스토리 블로그에 트위터카드 적용하기

2013.01.30 16:23 in Web/Coding

어제, 트위터에게서 메일을 받았습니다.

미리 신청해두었던 트위터 카드 신청이 승인되었다는 메일이였습니다+_+ 이제 트위터에 누군가 제 글을 공유한 것을 twitter.com이나 공식앱에서 보면 제목과 저의 아이디를 달고 표시됩니다. 이미 뉴욕타임즈와 같은 해외 유명 신문에는 대부분 적용된 기능이죠.

트위터 카드?

트위터 카드는 트위터 내에서 링크를 공유할 때 그 링크에 대한 자세한 설명을 보여주도록 하는 도구입니다. 크진 않지만, 어떤 사람이 어떻게 공유할 지 모르는 트위터에서 출처와 컨텐츠를 만든 사람을 부각시켜준다는 점에서 괜찮은 것 같습니다.

트위터카드는 3가지 순서만 따라서 하시면 됩니다.

  1. 문서를 읽고 원하는 카드형식을 고릅니다.
  2. 원하는 카드형식에 맞춰 메타태그를 적용하고 테스트도구로 확인합니다.
  3. 트위터카드 적용 신청서를 작성하고 제출합니다.

적용하기가 어려운 것은 아니지만, 3번에서 신청서를 제출하고 나서 걸리는 시간이 꽤 됩니다. 저 같은 경우는 1월 7일에 신청했으니, 20일이 넘게 결렸네요ㅠㅠ

아래 티스토리를 기준으로 적용방법을 적어놓았습니다.

매우 쉬운 트위터카드 적용

적용방법은 엄청 쉽습니다. 페이스북의 오픈그래프처럼 <head></head>에 메타태그 몇 줄만 넣어주면 끝이죠.

위에서 ‘@아이디'부분만 맞게 바꿔주시면 됩니다. 소스를 적용 하셨다면 잘 나오는지 테스트 해보시기 바랍니다.

자세한 설명 보기

신청서 접수 그리고 기다림…

테스트에서 잘 나왔다고 끝!이 아닙니다. 이제 신청서를 작성해야 합니다.

  • Contact information: 신청이 접수된 후 연락이 올 정보이니 정확하게 적습니다.
  • Website URL: 트위터카드를 적용한 사이트를 적습니다.
  • Website description: 저는 간단하게 personal blog라고 적었습니다.
  • Twitter Username associated with that domain: 본인의 계정을 적어주시면 됩니다.
  • Example Summary Card URL: 위에서 트위터카드를 테스트했던 주소를 적어주시면 됩니다.

다 작성하셨으면 아래 Submit을 눌러 신청서를 보냅니다. 그리고… 기다립니다;;;

신청이 완료되면?

신청서가 처리되면 신청이 접수되었는지, 아니면 거절되었는지 신청서에 적었던 메일주소로 결과를 보내줍니다.
신청이 승인되면 트위터에서 이전에 올렸던 글을 확인해봅니다:)

덧) 어쩐지 한국 최초(?)인것 같은 느낌인데요…
덧2) 그런데 왜 트위터 한국지사 블로그는 적용을 안했을까요-_-;;
덧3) 처음에 저는 메타태그 소스만 넣고 왜 안되지…하고 멍하게 있다가 @nalbam님의 도움으로 신청했습니다.
덧4) 날밤님도 http://spic.kr로 트위터카드 신청서를 접수하셨으니 금방 적용 되겠죠!

신고
tagcard, Contents, e-mail, html, nalbam, test, THE NEW YORK TIMES, Tistory, Twitter, 기다림, 순서, 신문, 신청, 저자, 적용, 출처, 해외
트랙백이 하나이고 , 댓글이 없습니다.

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

2012.11.28 12:03 in Web/Coding

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

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

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

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

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

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

무료로 나만의 위키 장만하기

2012.11.13 09:10 in Web/Coding

올해 7월 스프링노트가 종료된다는 공지가 떴죠ㅠ 스프링노트를 열심히 쓰시던 분들은 대체재로 에버노트미디어위키 중 한가지를 선택했는데요, 두가지를 간단하게 비교하면 다음과 같습니다.

  에버노트(무료) 미디어위키(설치형)
장점 쉬운 사용법
모바일 친화적
믿을만한 데이터관리
히스토리 기능
누구나 참여 가능
쓸만한 확장기능들
다채로운 서식 가능
단점 용량제한
히스토리 기능 제한
참여기능 제한
제한된 서식기능
호스팅,도메인 필요
설치의 어려움
사용의 어려움

그 중 저처럼 스프링노트에서 에버노트로 옮기신 분들은 아쉬움이 많을 겁니다. 특히나 히스토리 기능과 참여기능의 제한이 가장 발목을 잡죠. 스프링노트의 경우 위키를 기반으로 만든 서비스이다보니 그 두가지가 강력했는데 말이죠. 어쩔 수 없이 대안으로 에버노트를 쓰고있을 뿐입니다ㅠ

스프링노트에 대한 아쉬운 마음에 서론이 좀 길었네요. 이 글에서는 미디어위키 설치에 있어 호스팅 문제와 설치의 어려움 문제를 해결할 수 있는 방법을 알려드릴려고 합니다. 바로 며칠전에 아사달에서 나온 무료 위키호스팅이죠.
(단, 도메인은 가지고 계셔야 합니다.)

무료 위키호스팅?

아사달엔 왜 위키호스팅이 존재할까?

아사달의 위키호스팅 페이지로 가보면, 3가지 상품이 있습니다. 위키무료형으로 신청하기를 클릭합니다.

그런데…

제가 아는 지인중에 한분이 ‘아사달은 무늬만 IT회사지’라고 했던게 떠오릅니다(…)

위키호스팅 신청하기

IE로 바꿔서 접속 후 신청하기를 누르면 다음과 같은 화면이 나옵니다.

도메인을 입력하고 바로신청을 누르면 로그인을 시킵니다(도메인 입력시 2차도메인도 가능합니다)

로그인을 후 진행하면 위키의 공개수준을 선택할 수 있습니다. 목적에 맞게 선택하시고 아래 약관동의신청하기를 누르면 만들어집니다.

마지막으로 아까 입력했던 도메인과 아사달의 서버를 A레코드로 연결시켜 주면 완료입니다.

아사달 로그인 후 상단의 내정보에 가셔서 방금 신청한 위키호스팅의 호스팅정보를 클릭합니다.

그러면 서버명이 나오는데, 이를

‘실행->cmd->ping 서버명’을 쳐보면 IP주소가 나옵니다. 이걸 기억하셨다가,
(저랑 서버명이 같다면 위의 110.45.146.224를 기억하시면 됩니다)

도메인 관리에서(저의 경우는 DNSever) A레코드를 추가합니다.

설정 후 몇시간이 지나면 위키 첫화면을 보실 수 있을 것입니다.

위키호스팅의 장점과 단점


장점단점
  • 도메인만 있으면 비교적 쉽게 위키 장만이 가능함
  • 필수설정들이 미리 되어있음
  • 익숙치 않은 사용자들을 위한 도움말 표시
  • 도메인 선택 가능
  • 추가설정 또는 스타일변경 불가능
  • 아사달과의 꺼림칙한(?) 관계
  • 백업은 어떻게?
  • 느린 속도

위키호스팅의 장점은 처음 위키를 접하는 사람들의 문턱을 낮춰준다는데 있는 것 같습니다. 미디어위키를 설치하면 파일업로드 설정 등 설치 후에도 이것저것 설정해줘야 하는데, 일단 설치만 하면 기본적인 설정은 모두 되어있다는 점이 가장 큰 장점인것 같네요.

문제는 이게 서비스형이다보니 추가적인 설정이나 스타일변경이 불가능하다는 점입니다. 개인적으로는 스타일시트 정도는 수정할 수 있도록 하게 해 주었다면 어땠을까 하는 생각이 듭니다.

그리고 아사달을 소개하는 문서들이 공용(?)으로 들어가 있습니다. 무료상품으로 이용해서 이런게 나온다면 상관없겠지만, 유료상품에도 나온다면 좀 문제가 되지 않을까 하네요.

마지막으로 가장 치명적인 문제인데, 속도가 좀 느린것 같습니다. 저만 그렇게 느끼는건지 아니면 미디어위키 자체의 속도가 느린건지, 아니면 서버의 문제일까요? 속도부분은 개선되었으면 좋겠습니다.


무료 위키호스팅은 속도의 문제도 있고 용량의 문제도 있다보니 개인용이나 아주 소규모용으로는 적합하지만 대규모로 쓰기엔 좀 무리가 있겠죠. 아까도 이야기했지만, 도메인만 있으면 금새 세팅해서 사용이 가능하다는 점이 꽤 큰 메리트가 되지 않을까 싶습니다. 저처럼(?) 소프트한 유저분들은 도메인만 가지고 사용해보셔도 좋을 것 같습니다.

덧) 제가 만든 위키는 http://wiki.ludens.kr 입니다. 최근 수정한 문서는 여기입니다.
덧2) 정말 아사달 사장님은 위키 좋아하시는듯… 사내에도 도입해서 쓰고있다네요.
덧3) 에버노트의 히스토리기능과 참여기능은 프리미엄의 계정은 지원합니다.

신고
tagdomain, EVERNOTE, History, hosting, mediawiki, mobile, springnote, wiki, 서식, 설정, 설치, 쉬운, 아사달
받은 트랙백이 없고 , 댓글2개가 달렸습니다.

이미지의 Alt태그와 Title태그의 중요성

2012.10.29 13:18 in Web/Coding

HTML에 쓰이는 이미지태그(img)에 보면 Alt속성Title속성이 있습니다. 이 두가지 속성의 존재를 아는 분들은 귀찮아서 안쓰고, 모르는 분들은 몰라서 못쓰고 하는 그런 속성이죠. 아시는 분들은 아시겠지만 의외로 쓸모 없어보이는 이 두가지 속성이 웹사이트 또는 블로그 유입에 영향을 끼칩니다.(국내는 그렇게 큰 영향은 없습니다만;;) 긴 글이긴 한데, 저도 한번 자세히 알고싶어서 번역해보았습니다.

이 글은 The Importance of Adding Alt Tags and Title Tags to Images on Your Website의 번역입니다.


검색엔진최적화(이하 SEO)의 전문가가 아닌 사람들에게는 ‘SEO’가 뭔가 대단해 보일 수 있습니다. 하지만 의외로 여러분이 기본적인 내용만 잘 따른다면, 관리하고 있는 웹사이트를 검색엔진(구글, 빙, 야후 등)에 성공적으로 최적화 시킬 수 있습니다.
웹디자이너나 웹개발자들조차 간과하고 넘어가는 중요한 사항 중 하나는 ‘웹사이트에 있는 이미지를 검색엔진에 최적화시키기’입니다. 이미지는 방문객 수에 꽤 큰 영향을 끼칠 수 있습니다.

사람들은 일상적으로 ‘구글 이미지 검색’과 같은 도구를 사용하여 웹서핑을 합니다. 만약 웹사이트에 올려진 이미지에 올바른 키워드로 검색엔진에 맞춰져있다면, 더 많은 트래픽을 유도할 수 있을 것입니다.

이미지의 Alt태그란?

Alt태그 또는 Alt속성은 이미지의 “대체문구”(alternative text)입니다. 보통 Alt태그는 이미지를 설명하는 목적으로 만들어집니다. 웹사이트라면 Alt태그는 사람들에게 보여지지 않습니다. 웹사이트에서 Alt태그가 사용되는 경우가 한가지 있는데, 시각장애인이 음성기반의 소프트웨어로 웹서핑을 할 때 쓰입니다. Alt태그는 시각장애인들에게 어떤 컨텐츠가 지금 보고있는 웹사이트에 있는지 알려주는데 도움을 줍니다. 반면에 시각장애인들을 제외한 다른 대부분의 사람들을 위해서는 검색엔진에 사용됩니다. 검색엔진이 여러분의 웹사이트를 크롤링할때, Alt태그를 이용하여 컨텐츠를 더 잘 이해하고 검색결과 순위에서 적절하게 색인합니다.

Alt태그의 예외

Alt태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

<img src=”http://ludens.kr/image.jpg” alt=”대체문구 예시” width=”300” height=”238”>
대체문구 예시

이미지의 Title태그란?

Title태그는 간단하게 말하면 이미지의 제목입니다. 웹사이트에 있는 이미지에 마우스를 올리면 나오는 문구를 본 적이 있나요? 바로 그 문구는 이미지의 Title태그가 표시되는 것입니다. Title태그의 가장 큰 목적은 웹페이지를 읽는 사람들에게 이미지에 대한 정보를 좀 더 제공하기 위함입니다. Title태그는 이미지 이외에 다른 웹페이지를 링크할때도 쓰입니다. 물론 이 경우에도 링크된 컨텐츠에 마우스커서를 올리면 Title태그의 내용을 볼 수 있습니다. 보이지 않는 Alt태그에는 딱히 완전한 문구를 넣을 필요가 없지만, Title태그는 여러분의 독자가 볼 수 있기 때문에 정확한 키워드와 완전한 문구가 들어가야 합니다.

Title태그는 3~5개정도의 단어로 구성되어야 합니다. 어떤 사람들은 미련하게 긴 문장(문단)을 Title태그에 넣습니다. Title태그는 짧으면서 유익해야 합니다. Alt태그에서 이야기했던 SEO가 Title태그에도 같이 적용됩니다.

Title태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

<img src=”http://ludens.kr/image.jpg” alt=”대체문구 예시” title=”타이틀태그 예시” width=”300” height=”238”>
대체문구 예시

Alt태그와 Title태그 사용의 장점

Alt태그와 Title태그로 이미지를 최적화했을 때 얻을 수 있는 장점은 다음과 같습니다.

  • 검색유입의 증가
  • 웹사이트에 대한 높은 품질의 검색
  • 더 많은 유효방문자

Alt태그와 Title태그를 적용한다고 해서 다양한 이익을 가져다 주지는 않습니다. 하지만, 가장 큰 장점은 검색유입의 (꽤 큰) 증가입니다. 잠깐만 생각해보세요. 여러분 웹사이트의 트래픽과 관련한 문제에 두 손 놓고 있을건가요? 여러분들은 약 25% 더 트래픽을 높일 수 있습니다. 단지 지금 올려져 있는 이미지를 최적화하고 새로 업로드 할 이미지를 최적화하는 것만으로 말이죠. 특히 이미지검색으로 큰 효과를 볼 수 있을 것입니다.


국내사정에는 다 맞는다고 할 수는 없지만, 안하는 것보다는 낫다는 생각입니다. 네이버에서 안받아 주더라도 구글에서는 받아주겠죠?(…)

덧) 제목만 보고 번역해봤는데 어째 글이 좀 그렇네요.
덧2) 워드프레스에는 자동으로 Alt태그와 Title태그를 달아주는 플러그인도 있습니다.

신고
tagalt, Blog, Google, html, IMAGE, img, Kohl's, macy's, naver, tag, Title, web, website, 검색, 검색엔진, 검색엔진최적화, 대체, 문구, 방문자, 속성, 영향, 예시, 예외, 유익, 유입, 이익, 장점, 정보, 제목, 최적화
받은 트랙백이 없고 , 댓글2개가 달렸습니다.

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

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, 대표, 원본, 티에디션
트랙백이 하나이고 , 댓글이 없습니다.

Pinterest 깔끔하게 보는 방법

2012.04.23 21:58 in Web/Coding

BeforeAfter

핀터레스트가 여러 이미지들을 구경하는데에는 좋은 사이트이지만, 해상도가 작은 노트북과 같은 경우 표시되는 이미지수가 많지 않아 불편하실텐데요,
이 답답함을 각 컨텐츠에 달린 댓글을 숨기는 것으로 조금이나마 깔끔하게 볼 수 있습니다.

북마클릿 이용하기

먼저, Craig Fifield가 만든 북마클릿을 사용하는 가장 간단한 방법이 있습니다.
IE, 파이어폭스, 크롬, 오페라 모두 가능한 방법입니다.

Toggle Pinterest Comments

드래그해서 북마크바에 올려놓거나 즐겨찾기로 추가해서 핀터레스트에서 사용해주시면 되겠습니다.

User CSS 사용

약간의 수고를 들이지만 한번 적용시키면 메인의 댓글들이 완전 박멸됩니다. 아래 설명은 오페라기준입니다.

  1. 아래 파일을 다운받아 적당한 폴더에 저장합니다.
    invalid-file
  2. 오페라에서 Pinterest에 접속합니다.
  3. 오른쪽버튼 클릭 후 '사이트 환경설정 편집'으로 들어갑니다.
  4. '디스플레이'탭의 '내 스타일시트'에서 [선택]을 눌러 미리 받아놓은 pinterest-hidecomment.css 파일을
    선택
    [확인]을 누릅니다.
  5. 새로고침을 하면 깔끔한 핀터레스트를 만날 수 있습니다.
저작자 표시 비영리 변경 금지
신고
tagBookmarklet, Pinterest, User CSS, 깔끔
받은 트랙백이 없고 , 댓글이 없습니다.

트위터, 페이스북에 나만의 짧은 URL로 블로그 글 보내기(yourls)

2012.01.27 09:30 in Web/Coding

이전글인 무료로 나만의 짧은 URL 서비스 만들기(yourls)에서 URL단축서비스를 설치하는 과정을 다뤘다면, 이번엔 응용해서 사용하는 방법에 대해 알려드리겠습니다.

dlvr.it으로 블로그 글 보내기

트위터나 페이스북에 글을 보내는 서비스들은 엄청 많습니다. 티스토리에서도 플러그인으로 지원하고 있죠. 하지만 티스토리 플러그인은 'durl'를 사용하는 치명적인 단점(?)이 있어 좀 아쉬웠습니다.
그래서 저는 플러그인대신 dlvr.it를 사용하고 있습니다. 트위터와 페이스북을 지원하고 글 갱신도 그렇게 늦은편이 아닌데다 사용자 마음대로(중요합니다!) 짧은 URL설정이 가능하기 때문이죠.
사용하기에 어려운 서비스가 아니기에, 여기서는 간단하게 yourls를 연결하는 방법만 소개하겠습니다.

dlvr.it 로그인Settings - Short Links에서 [Add shortener]버튼을 클릭합니다.

Third party shortener를 선택합니다.

③ 이름을 적당히 작성후 Endpoint에는 아래과 같이 작성한 후, [save shortener]를 눌러 저장합니다.

ⓐ yourls가 공개일때
http://도메인/yourls-api.php?action=shorturl&format=simple&url=@URL@
ⓑ yourls가 비공개일때
http://도메인/yourls-api.php?signature=******&action=shorturl&format=simple&url=@URL@
yourls가 비공개일때 "signature="뒤의 ******에는 설치하신 yourls의 'Tools'페이지에 나와있는 키를 넣어주어야합니다.

④ 저장후 default로 설정해주시면 dlvr.it 설정은 완료되며, 설정 후 트위터나 페이스북으로 보내지는 글들은 설정하신 짧은 URL로 줄여집니다.

twitterfeed로 블로그 글 보내기

트위터피드도 트위터로 글을 보낼때 많이 사용하는 서비스 중 하나죠. 서비스 설명은 내 블로그 글을 트위터로 자동 전송해주는 TwitterFeed 설정방법에 잘 나와있네요:)

twitterfeed 로그인 후 등록한 피드의 Edit버튼을 누릅니다.

Advanced Settings - Post ContentPost Linkcustom으로 바꾸고 endpoint에 아래와 같이 써준 후 저장합니다.

ⓐ yourls가 공개일때
http://도메인/yourls-api.php?action=shorturl&format=simple&url=%@
ⓑ yourls가 비공개일때
http://도메인/yourls-api.php?signature=******&action=shorturl&format=simple&url=%@
yourls가 비공개일때 "signature="뒤의 ******에는 설치하신 yourls의 'Tools'페이지에 나와있는 키를 넣어주어야합니다.

트윗덱에서 기본 URL 단축서비스로 지정하기

트윗덱 Settings에서 위의 twitterfeed와 똑같이 endpoint를 지정해주면 된다고 합니다.

저는 위의 용도로 사용하고 있습니다. 사실 짧은 URL서비스 자체가 트위터때문에 나왔다고 해도 과언은 아니죠.
그래서인지 용도가 그렇게 많지는 않은것 같네요. 다음글에는 yourls의 플러그인에 대해 간단히 다루겠습니다.

신고
tagAPI, dlvr.it, EndPoint, facebook, tweetdeck, Twitter, twitterfeed, url, yourls, 공개, 단축, 비공개
받은 트랙백이 없고 , 댓글이 없습니다.

무료로 나만의 짧은 URL 서비스 만들기(yourls)

2012.01.25 09:30 in Web/Coding

짧은 URL서비스들은 상당히 많습니다. 대표적으로 bit.ly(j.mp), tr.im, ow.ly, tinyurl, durl.me 등이 있지요. 그런데 이런 서비스들로는 자신만의 개성을 뽐내기가 힘듭니다. 그래서 제가 찾아낸것이 yourls입니다.

나만의 Shorten URL, YOURLS 적용기 | Zerstyle : LifeLog

yourls를 이용하면 쉽게 자신만의 URL 줄이기 서비스를 만들 수 있습니다. 단, yourls는 설치형이기때문에 php와 MySQL을 지원하는 호스팅서버가 필요합니다.

yourls의 설치는 크게 4가지 단계로 나누어집니다.

  1. 호스팅 및 도메인 준비
  2. yourls 설정하기
  3. yourls 업로드
  4. yourls 설치 및 이용하기

호스팅 및 도메인 준비

웹사이트나 쇼핑몰을 운영한다면 큰 트래픽과 용량이 필요하겠지만 단순히 단축URL서비스만 사용한다면 그리 큰 용량이 필요하지 않으므로 적당한 무료호스팅으로도 충분할 것이라 생각합니다.

전 개인적으로 무료호스팅 중 000webhost를 추천합니다. 가입은 아래 링크에서 자세히 소개하고 있습니다.

Horec's Blog :: 외국 무료 웹호스팅 www.000webhost.com 살펴보기 (2)

웹호스팅을 장만했다면, 다음은 사용할 주소를 만들 차례입니다. 짧은 URL서비스들은 대부분 .kr, .co, .ly와 같은 1차도메인을 사용합니다. 문제는 1차도메인들은 다 유료라는 점이죠. 근데 딱 하나! 무료가 있더군요. 바로 제가 쓰고있는 '.tk'입니다.

먼저 http://dot.tk 로 접속하여 아래 화면에서 사용할 도메인을 검색합니다.

가능한 도메인을 검색하면 바로 회원가입화면으로 넘어갑니다.(창 끄지 마세요!)

이때 '.tk'는 잠깐 놔두고 000webhost로 돌아가서 새로운 호스팅을 만듭니다.

여기서 호스팅은 아까 만들던 '.tk' 주소를 아까와 같이 넣어줍니다. 1~2분이면 새로운 호스팅이 구성됩니다.

새로운 호스팅이 만들어지면 새로 만든 호스팅의 CPanel에서 'View Accout Setting'로 들어갑니다.

네임서버 IP를 확인하고 다시 '.tk'도메인 가입을 진행합니다.(창 끄지 마세요!)

'Use DNS'에 체크하고 IP주소에는 아까 보았던 000webhost의 네임서버 IP주소를 쓰고 가입을 완료합니다.

yourls 설정하기

이번엔 단축URL서비스에 활용할 DB를 만들어야합니다.
000webhost의 CPanel에서 아래쪽에 있는 MySQL을 클릭합니다.

DB를 적당히 만들어줍니다. 비밀번호는 잘 기억하고 계셔야 합니다.

DB가 만들어지면 아래 목록에 나오게됩니다.(창 끄지 마세요!)

이제는 yourls를 호스팅서버에 올릴 차례입니다. 먼저 yourls를 최신버전으로 다운받습니다. - yourls 다운로드

파일의 압축해제후 includes폴더의 'config-sample.php'파일을 user폴더에 복사하고 파일이름을 'config.php'로 바꿔줍니다. 그 후 메모장으로 파일을 편집합니다.


dbuser에는 MySQL User를, ② dbpassword에는 비밀번호를, ③ yourls에는 MySQL Database를,
localhost에는 MySQL Host를 적어줍니다.


⑤ 짧은 URL을 적용할 사이트를 적습니다. 아까 만든 '.tk'도메인을 적어줍니다.(예:http://luden.tk)
⑥ 시간대를 지정합니다. 한국은 GMT+9이므로 0대신 9를 적습니다.
⑦ 짧은URL서비스를 비공개로 사용한다면 true, 공개로 사용한다면 false를 적습니다.
⑧ 랜덤으로 발행되는 쿠키키(?)입니다. 여기에서 제공하는 키를 복사해서 사용하시면 됩니다.
비공개로 사용시 사용할 ID와 비밀번호입니다. 공개로 사용하신다면 수정하실 필요가 없습니다.

위의 9가지사항을 꼼꼼히 수정하고 저장하셨다면, 이제 호스팅에 FTP로 파일을 올릴 차례입니다.
FTP프로그램은 파일질라를 추천합니다.

yourls 업로드

FTP에 파일을 올리기 전에 다시 000webhost의 CPanel로 접속해서 상단의 경고가 사라졌는지 확인합니다.

위의 경고는 DNS설정이 아직 안되었다는 뜻인데, 저는 반나절정도 걸렸습니다. 늦어도 하루면 됩니다.
DNS설정이 되지 않으면 FTP접속도 불가하기때문에, 기다려야합니다ㅠㅠ

위의 경고가 사라졌다면, FTP접속을 위해 000webhost의 CPanel에서 View FTP Details를 클릭하여 정보를 확인합니다.

첫 접속이라면 Change account password에서 비밀번호를 바꿔줍니다.(창 끄지 마세요!)

파일질라를 실행하고 방금전 확인한 host name, user name, 비밀번호를 적고 접속합니다.

접속 후 yourls파일을 모두 선택하여 접속한 FTP의 public_html폴더에 업로드합니다.(이제 거의 끝나갑니다!)

yourls 설치 및 이용하기

업로드 완료 후 http://주소/admin 으로 접속합니다.(예: http://lude.tk/admin)

아주 깔끔한(...)화면이 나옵니다. Install YOURLS 를 눌러 설치합니다.

눈 깜짝할새 설치가 끝납니다. 설치 후 http://주소/admin/index.php 로 들어가면 관리화면을 볼 수 있습니다.

yourls의 사용은 관리화면에서 직접 URL을 줄이거나 Tools의 북마클릿을 사용하시면 됩니다.

yourls의 더 자세한 응용은 다음 글에 이어집니다.

덧) 오랜만에 정말 긴(?) 포스팅이군요ㄷㄷ 나름대로 자세히 쓴다고 썼는데… 왠지 불친절한 느낌이네요;;
덧2) 저는 http://luden.tk 를 사용하고 있습니다.
덧3) yourls 설치 동영상가이드도 있습니다(영문) - Install a URL shortening service on your own domain.

신고
tag.tk, 000webhost, 1차, bit.ly, Bookmarklet, dns, domain, durl.me, filezilla, FTP, hosting, iP, j.mp, MySQL, Name server, ow.ly, php, TinyURL, Tokelau, tr.im, url, yourls, 개성, 단축, 무료
받은 트랙백이 없고 , 댓글이 없습니다.

TTF웹폰트에 대해서

2009.10.05 18:48 in Web/Coding

웹폰트라고 하면 IE의 eot를 생각하시는 분들이 많을 겁니다. 그도 그럴 것이 '웹폰트'라는 건 IE에서만 eot로 계~속 지원되었으니 말이죠. 그런 웹폰트를 현재는 오페라, 파이어폭스, 크롬, 사파리 최신버전에서 사용할 수 있습니다. eot형식이 아닌 TTF형식으로 말입니다.

제가 처음 TTF웹폰트에 대해 알게 된 건 오페라10 알파버전에서 막 지원되었을 때였습니다. 지원이 된다고 했을 때 저는 믿기지 않았지만 예제를 보고 대충 따라 했더니 실제로 되더군요.
그 뒤부터는 계속 블로그에 TTF웹폰트를 적용시켰습니다. 현재는 렉시굴림을 사용하고 있습니다.

TTF웹폰트를 사용하려면 먼저 폰트를 적당히 어딘가에 올린 뒤 CSS에 아래의 내용을 추가시키면 됩니다.

그냥 eot웹폰트 적용하는것과 거의 같다고 보면 되죠. 이름(렉시굴림)과 경로지정(./images/LEXIGULIM.TTF)만 잘하면 됩니다. 이 이후로는 eot적용과 별반 차이가 없으므로 넘어가겠습니다.

TTF웹폰트를 적용시켜서 다른 브라우저에서는 폰트가 나오지만, IE에서는 나오지 않는 문제가 발생해서 어떻게 하면 될까 하다가 아래와 같이 하니 해결이 되더군요.

간단하게 eot를 아래에 붙여주기만 하면 끝이었습니다. 물론 TTF웹폰트와 eot웹폰트의 이름은 달라야겠죠.

이렇게 TTF와 eot를 사용해봤더니 각각 장단점이 있더군요. 아래 표를 보시면 이해가 빠르실 겁니다.

TTF eot
장점 변환이 필요 없다
많은 웹브라우저에서 지원한다.
파일크기가 매우 작다
원하는 주소에만 적용이 가능하다
단점 파일크기가 크다
암호화되지 않는다
번거로운 변환이 필요하다
IE를 제외하면 지원하는 브라우저가 없다.

TTF는 변환 없이 그냥 웹 상에 업로드 하는 것만으로도 사용준비 완료이지만, eot는 MS의 Weft라는 프로그램을 이용해서 변환시켜야 합니다. 그리고 TTF의 최대강점은 eot와 다르게 여러 브라우저에서 지원한다는 점이죠.

하지만 TTF는 파일크기가 너무 큽니다. 영문폰트는 그나마 작은 편이지만 한글폰트는 영어와 한글을 모두 담아야 하기 때문에 벌어지는 현상이죠. 지금 적용한 렉시굴림도 2메가가 약간 넘는 크기입니다.(이것도 그나마 작은 편이죠ㅠㅠ) 파일크기가 크면 그만큼 웹페이지 접속에 시간이 더 걸리기 때문에 상당한 단점이라고 볼 수 있습니다. 반면에 eot는 변환하면서 크기가 매우 작아지기 때문에 속도는 빠르죠.

그리고 TTF는 암호화 되어있지 않습니다. 지금 인터넷임시파일 폴더를 뒤져보시면 아실 겁니다. 따라서 상용폰트로는 사용 불가능합니다. eot는 변환하는 도중에 사용할 사이트주소를 입력해서 그 이외의 사이트에서는 적용되지 않도록 합니다. 그렇기에 싸이월드에서 판매 할 수 있는 것입니다.

사용자 삽입 이미지오페라에서는 안보이는 eot-_-+ IE점유율이 떨어지면 싸이월드의 수익도 떨어질것이 분명합니다(?)

이렇게 TTF와 eot모두 부족한 점이 많습니다. 아직 웹폰트는 갈 길이 멀죠ㅎㅎ TTF웹폰트에 대해 궁금하신 분들이 꽤 계셔서 일단 제가 아는 내용을 적었는데 의문이 풀리셨는지 궁금하네요:)

신고
tagchrome, eot, firefox, Opera, Safari, TTF, Web font, 렉시굴림
받은 트랙백이 없고 , 댓글8개가 달렸습니다.

블로그에 IE6 경고문구 넣기

2009.08.16 14:26 in Web/Coding

이번에 스킨을 바꾸면서 다른 브라우저는 하나도 고려하지 않고, 제가 쓰는 오페라만 보면서 수정했죠. 그 결과 IE8,파이어폭스,사파리(터치도 포함),크롬 등에서 잘 나온다고 의견을 주셨습니다. 그런데 @projecty님이 IE6로 테스트한 모습을 보고 경악을 금치 못했어요ㅠ

사용자 삽입 이미지리본의 투명처리… 아래엔 치졸한 스크롤바까지… 흑흑ㅠ

도저히 IE6에 맞출 재간은 없어서… IE6로 접속시 경고문 띄우는 방법들을 찾아보았습니다.

IE6 Update

제가 현재 쓰고 있는 방법입니다. 왠지 모르게 ActiveX느낌이 들면서 꼭 깔아야겠다는 강박관념(?)이 느껴지지 않나요? 문구가 영어이고 클릭하면 이동하는 링크도 영어권 IE사이트라 아래와 같이 조금 손봐서 쓰고 있습니다. </body>앞에 넣어주시면 됩니다. 워드프레스용 플러그인도 있습니다.

소스보기

Give IE6 users the message to upgrade or change

코드를 한글로 바꾸고 브라우저링크에 크롬을 추가하고 한국어페이지로 이동하도록 손봤습니다. "<h2><a href="(##_article_rep_link_##)">(##_article_rep_title_##)</a></h2>" 뒤에 넣어주시면 글 제목 바로 아래에 표시됩니다. (찾을때 ()를 []로 바꾸고 찾으세요~)

소스보기

IE 버전 체크


@okgosu님이 알려주신 심플한 방법입니다.

덧)경고창으로 만족하지 못하시는 분들을 위해 준비했습니다. @gaury가 알려준 IE6로 접속하면 다운되는 소스

신고
tagBlog, gaury, Give IE6 users the message to upgrade or change, IE 버전 체크, IE6 Update, Internet Explorer, OkGosu, projecty, Skin, 경고
트랙백3 , 댓글4개가 달렸습니다.

티스토리 툴바