웹폰트(@font-face) 온라인 서비스

웹폰트를 온라인으로 서비스 해주는 곳들은 알아서! 크로스브라우징을 해주기 때문에 복잡한 CSS의 @font-face 구문을 몰라도 됩니다.가볍게 사용하기엔 안성맞춤 이지요. 각각의 온라인 서비스들은 사용법도 쉽게 설명되어 있으니 그곳을 참고 하도록 합시다. 모빌리스 웹폰트 서비스 국내에선 가장 많은 글꼴 서비스를 하고 있는 곳 같다. 다만 웹폰트의 글꼴 크기는 경우에 따라 5~6Mb에 달하는 것들도 있으니 유념해서 골라야 겠다. 모빌리스 웹폰트 링크 font-face 무료로 나눔고딕 / 나눔명조 / 나눔손글씨를 지원한다.Google WebFont Loader를 사용해 좀 더 옵션을 주무를수 있다. font-face 링크 Google Web Fonts 엄청난 수의 무료 폰트를 제공하는 구글, 한국의 실정과..
웹코딩/CSS 2012. 12. 30. 04:13

웹폰트(@font-face) 적용법 #2 - Cufon 폰트

Cufon 폰트를 실제로 사용하려면 Generator를 거쳐 변환하는 과정을 거쳐야 하는데 번거롭거니와 한글폰트를 사용하는데에는 많은 애로사항이 꽃피웁니다. 첨부된 파일을 사용해서 적용해 봅시다. Cufon 폰트 cufon 폰트는 일반 웹폰트와 달리 캔버스를 이용해 그림을 그리듯 글꼴을 표현하는 방법이다. 우선 첨부된 파일을 다운 받자. 아래와 같은 글꼴이 첨가되어 있다. cufon-yui.js 파일과 사용할 폰트를 계정에 업로드한다. 사이에 아래 소스와 같이 붙여 넣는다. cufon-yui.js 파일은 반드시 포함해야 한다 원하는 폰트를 포함한다 Cufon.replace('아이디명, 클래스명, 태그명', 과 같이 폰트를 사용할 HTML요소를 정해준다 fontFamily : '폰트명'을 적어준다. 이 폰..
웹코딩/CSS 2012. 12. 30. 03:18

웹폰트(@font-face) 적용법

한글 폰트는 아쉽게도 글자 수가 많아 용량이 커지기 때문에 웹폰트 도입이 활발하진 않습니다만 외국에서는 Google Web Fonts 서비스와 Typekit, Cufon등 관련 서비스가 활성화 되어있습니다. 하지만 한글 가독성을 위해 이만한 것도 없으니 미래를 위해 사용법을 배워보도록 합시다. 웹폰트 호환성 @font-face로 웹폰트를 쓸때 가장 유의해야 할 것이 브라우저간의 호환성이다. IE Chrome Firefox Opera Safari WOFF 9.0 부터 지원 6.0 3.5 11.10 5.1 EOT IE6~IE9 지원 미지원 미지원 미지원 미지원 보는 바와 같이 modern-browser들은 woff 파일을 모두 지원하기 때문에 사용하는데 무리가 없다. 언제나 문제인 것이 구버전의 IE의 경우..
웹코딩/CSS 2012. 12. 29. 00:16

CSS로 이미지 대체하기

CSS3가 등장하면서 부터 많은 부분을 이미지대신 사용하고 있습니다. 역효과로 페이지 코드가 좀 더 복잡해질때도 있는데 서버 요청을 줄이고 트래픽을 감소시키는 걸로 만족하는 중이죠. 물론 구형 브라우저및 IE는 원하는 데로 렌더링되지 않습니다. IE9 이하는 색상정보도 부족해서 이제 웹 제작할때 아예 제껴두고 작업하는 실정입니다. 백날 천날 크로스 브로우징하면서 사이트 제작해도 결국 IE 사용자는 바뀌지 않겠지요. 외국에서도 크로스 브라우징을 하지말고 최신의 브라우저로 좀 더 나은 사용자 경험을 얻을 수 있게 하자는 의견이 나오고 있습니다. Stupid 브라우저 (IE 브라우저를 칭하는 말)는 Stupid하게 렌더링되는 게 당연한 것이 아닐까 합니다. 크로스 브라우징에 노동력과 시간을 허비하는 일이 없기..
웹코딩/CSS 2012. 12. 1. 21:59

크롬 추천 부가기능(확장 프로그램) - 관리도구 및 기타

크롬 부가기능을 많이 설치하게 되면 크롬을 실행할때 리소스를 잡아 먹게 됩니다. 자주 사용하지 않는 부가기능들은 꺼두면 되지만 쓸때 마다 다시 설정창에서 켜놓기도 여간 귀찮은게 아니고... 그런 일들을 대신 해 줄 수 있는 크롬 부가기능 관리도구를 소개합니다. 또 기타 잡다한 도구들도... 아래의 소개된 애플리케이션들은 Chorme 웹 스토어에 접속하여 애플리케이션 이름으로 검색하거나 바로가기를 이용하면 됩니다. 관리 도구 및 기타 관리 도구는 설정에 따라 리소스 소모를 확연히 줄일 수 있기 때문에 설치하기를 권장합니다. Context - Konrad Dzwinel Context는 설치된 부가기능을 목록에 따라 그룹화 시킬 수 있으며, 단순히 그룹화후 원하는 그룹만 보여주는 것이 아니라 비활성화된 그룹들..
개발도구/크롬, 개발자도구 2012. 11. 29. 17:50

크롬 추천 부가기능(확장 프로그램) - 데스크 도구

웹 서핑 혹은 일반 데스크 업무를 편리하게 해주는 도구들에 알아봅니다. 아래의 소개된 애플리케이션들은 Chorme 웹 스토어에 접속하여 애플리케이션 이름으로 검색하거나 바로가기를 이용하면 됩니다. 데스크 도구 가벼운 메모장, 다이어리, ToDoList등 많은 애플리케이션이 있습니다. 기호에 맞는 제품을 검색해보시고 사용해 보길 바랍니다. Quick Note - diigo.com 바로가기 가벼운 노트작업을 위한 도구로 간단한 메모장이나 스크래치보드, 클립보드로 사용할 수 있으며, 온라인 메모장으로 동기화 시킬수 있어 저장한 내용을 어디서든 불러 볼 수 있다. Fancy TODO - Daniel Onisoru TODO List의 경우 많은 애플리케이션이 존재하는데 간단한 것 위주로 찾다가 발견한 것이다. 기..
개발도구/크롬, 개발자도구 2012. 11. 29. 02:12

크롬 추천 부가기능(확장 프로그램) - 개발자도구 #2

아래의 소개된 애플리케이션들은 Chorme 웹 스토어에 접속하여 애플리케이션 이름으로 검색하거나 바로가기를 이용하면 됩니다. 개발자 도구 이전 글에 이어 각종 프로그래밍에 유용한 도구들을 소개합니다. All Cheat Sheet - overapi.com 각종 언어들의 명령어를 모아두고 각각의 사용법을 링크해둔 도구로 매일 매일 잊어버리는 개발자에겐 필수! 바로가기 지원 언어는 약 300종의 프로그래밍 언어, Python Cheat Sheet, 제이쿼리 Cheat Sheet, NodeJS Cheat Sheet, PHP Cheat Sheet, Ruby Cheat Sheet, Javascript Cheat Sheet, Java Cheat Sheet, ActionScript Cheat Sheet, CSS Che..
개발도구/크롬, 개발자도구 2012. 11. 28. 23:24

크롬 추천 부가기능(확장 프로그램) - 개발자도구 #1

작년 이 맘때 쯔음에 크롬의 모든 애플리케이션을 살펴본 적이 있었습니다. 지금은 너무 많은 애플리케이션이 추가되어 살펴볼 엄두가 안나지만 유용하게 쓰고 있는 도구들을 소개하고자 합니다. 아래에 소개된 애플리케이션들은 Chorme 웹 스토어에 접속하여 애플리케이션 이름으로 검색하거나 바로가기를 이용하면 됩니다. 개발자 도구 개발자 도구들에는 각종 프로그래밍 언어를 다룰때 유용한 도구들이 많다. 여러 작업 환경에서 테스트 시간을 줄여주는데 큰 몫을 하곤 한다. WEB DEVELOPER - chrispederick.com 다양한 도구들을 포함하고 있는 애플리케이션으로 크롬과 파폭에서 유명한 도구이며 크로스 플랫폼을 지원한다. 바로가기 각종 요소들을 비활성화 시키거나 Javascript, CSS, img등을 비..
개발도구/크롬, 개발자도구 2012. 11. 28. 03:10

크롬(chrome) 브라우저

최근 브라우저 선택의 가장 큰 이슈는 HTML5/CSS3 의 지원 여부와 편리한 부가기능들의 사용 여부가 아닐까 합니다. 게다가 간편한 북마크 관리까지 가능하다면 금상첨화가 아닐련지요? 크롬(Chrome)은 구글에서 서비스하는 웹브라우저이다. 무엇보다 많은 애플리케이션을 지원하기에 여러 작업에 유용한 도구들을 쉽게 사용할 수 있다. 발빠른 업데이트로 HTML5/CSS3에 대한 지원이 높으며 브라우저의 핵심코어 또한 IE의 구형엔진보다 빠른 속도를 보여준다. 자바스크립트나 각종 라이브러리를 사용하다보면 그 속도감이 눈에 뛴다(IE도 진화하여 IE10버전 이후론 속도면은 비슷해졌다). [크롬 다운로드 링크] 동기화 구글계정이 있다면 북마크및 애플리케이션들을 언제 어디서든 동기화 시킬수 있다. 집이든 사무실이..
개발도구/크롬, 개발자도구 2012. 11. 27. 17:21

관용모드와 표준모드 - Quirks mode & Standard mode

웹 페이지의 렌더링 방식에는 표준 모드(Standards mode)와 관용 모드(Quirks mode)라는 두 가지 렌더링 방식이 있습니다. 이를 이해하고 DOCTYPE의 중요성을 깨닭게 되길 바랍니다. 표준모드 - 모든 표준이 엄격하게 지켜진다. 관용모드 - 브라우저가 구버전 브라우저의 렌더링을 흉내냄으로써 기존의 비표준 기능도 허용된다. 표준 모드 선택 DOCTYPE이 지정된 모든 HTML 문서는 윈도우용 IE6 이상 버전을 포함한 모든 브라우저에서 표준 모드로 렌더링됩니다. 극 소수의 예외적인 경우를 제외하고는 표준 모드를 사용해야 합니다. IE6 이상 버전에서 관용모드를 사용하면 사실 윈도우용 IE5.5와 똑같이 렌더링되는데 이는 기술적으로 엄청난 퇴보입니다. 나머지 브라우저에서는 관용 모드를 사..
웹코딩/HTML 2012. 11. 27. 00:40

문자셋 UTF-8과 EUC-KR

우리나라의 경우 웹페이지에 사용되는 문자셋은 크게 euc-kr 과 utf-8 정도가 있습니다. EUC-KR은 2350개의 한글문자, 한국에서 통용되는 한자 그리고 영문을 표현할 수 있습니다. 문서를 작성할때 한정된 범위내의 문자만을 사용할 경우 사용합니다. 한글 한 자를 2Byte로 처리합니다. UTF-8은 유니코드입니다. 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩입니다. 한글이라고는 구경해 본 적도 없는 세계 방방 곳곳의 어느 컴퓨터에서도 우리가 작성한 한글을 문제 없이 표현할 수 있다는 것입니다. 다만 한글 한 자를 3Byte로 처리하기 때문에 문서가 다소 커질수가 있으나, 공백이나 영문 한 자는 1Byte로 처리하는 유연함을 보여 줍니다. 문자셋을 UTF-8로 작성한다면 HTML 파일을..
웹코딩/HTML 2012. 11. 26. 03:20

X-UA-Compatible, IE=edge, 호환성 보기

Internet Explorer 8 버전이 등장하면서 새로운 기능 한 가지를 추가했습니다. 바로 호환성 보기 버튼인데, 이미 주소 표시줄 옆에 있는 종이 모양의 아이콘을 눌러 보신 분도 계실꺼라 생각합니다. 호환성 보기의 이해 호환성 보기 버튼은 IE8이 웹페이지에 접근했을때, 어떤 렌더링 엔진을 사용할 것인지를 선택하게 하는 용도의 버튼입니다. 웹 개발자 및 디자이너 분들은 구형 IE 브라우저에서 표준에 맞지 않는 수많은 오류와 싸우실텐데, IE의 브라우저 버전이 올라가면서 해당 오류들을 웹표준에 맞게 수정하면서 기존의 구형 브라우저와는 다르게 해석되는 부분이 발생하게 됩니다. 과거 IE6과 IE7이 브라우저 점유율의 대부분을 차지하고 있던 암흑기에 제작된 웹페이지들은 이러한 오류들을 우회하면서 제작되..
웹코딩/HTML 2012. 11. 26. 03:12

XHTML 기본구조

XHTML을 작성할때 기본 템플릿을 만들어 두면 편하다. 에디터를 사용할때 기본적으로 제공되는 것들이 있지만 거기에 좀더 추가한 것. XHTML 기본 구조(템플릿) 원하는데로 추가해서 작성하면 됩니다. 사이트 네임 슬로건 메뉴1 메뉴2 메뉴3 내용 copyright 프롤로그(선언문) - 생략가능 모든 XML 문서는 XML 해석 방법을 브라우저에게 말하는 선언문에서 시작합니다. XML 선언문은 DOCTYPE 과 네임스페이스 선언, 마크업 랭귀지를 정의하는 것에 앞서서 정의되야 합니다. 몇몇 옛 버전의 브라우저들은
웹코딩/HTML 2012. 11. 26. 02:53

XHTML 1.0

자유분방한 기존의 문법과는 달리 기계들이 정형화된 형식속에서 이해하기 쉬운 구조를 만들어 확장성을 넓히는데에 중점을 둔 버전입니다. XHTML 특징 현재에는 HTML5가 주요 버전으로 자리매김하고 있으므로 잘 사용되진 않지만 이런게 있었다 라는 정도만 이해하고 넘어갑시다. 기존의 모든 문서를 XHTML은 XML과 HTML 기반의 브라우저와 상호 교환성을 가지고 있다. XHTML의 논리적인 구조는 다른 플랫폼에서 콘텐츠를 좀 더 쉽게 재사용할 수 있다. XHTML 문서는 네임 스페이스와 함께 새로운 태그를 추가하기 위해 확장될 수 있다. 또는 XHTML이 XML이기 때문에 네임 스페이스 없이 새로운 태그를 추가할 수있다. 이러한 태그는 브라우저에 의해 무시되지만, 데이터를 교환하기 위한 XML 툴에 의해 ..
웹코딩/HTML 2012. 11. 26. 02:17