유지아빠가 살아가는 세상

adobe kuler를 아시나요? adobe에서 서비스 하는 kuler 라는 사이트는 컬러 팔레트를 제공해 주는 사이트입니다. 컬러 팔레트가 뭐 하는거냐구요? 사이트를 만들거나, 디자인 인쇄물을 만들때 기본적인 색상을 지정해 주는 역할을 합니다. 디자인 작업을 할 때는 어느정도 한정된 색상을 사용하는 것이 좋습니다. 너무 많은 색상을 사용하는 것은 오히려 사용자의 눈에 피로감을 증가해 주기 때문에 되도록 이면 연관성이 높은 또는 보색대비가 확실한 색상을 이용해서 어느 정도 한정된 색상을 사용해야 하는데, kuler 에서는 그런 색상 조합을 제공해 주는 역할을 합니다. 어도비 회원인 경우 컬러 팔레트 를 다운 받을 수 있으며, 포토샵 또는 일러스트레이터에서 해당 컬러 팔레트를 기본으로 디자인 작업을 하면 ..

IE9 까지 지원하던 conditional comments 를 IE10 부터는 지원하지 않는다고 합니다.conditional comments는 인터넷 익스플로러가 완벽한 웹 표준을 지원하지 않다보니, MS에서 약간의 편법의 길을 제시한 것입니다. 웹 개발자 분들은 아래의 코드를 알 고 계십니다. 이런 conditional comments를 적용할 수 밖에 없는 이유는 다른 브라우저들이 거의 반 강제적으로 업데이트를 실시하는 반면, IE는 사용자들이 브라우저 업데이트를 미루는 경향이 있고, 또한 윈도우 버전에 따라 업데이트 할 수 있는 브라우저가 정해져 있기 때문입니다.윈도우 XP 인 경우 IE 8까지만 업그레이드 할 수 있고, 윈도우 비스타는 IE 9까지 그리고 나머지 윈도우 7은 IE 10 또는 그 이..

하나의 페이지만으로 웹 사이트를 만드는 원 페이지 ( One Page ) 웹 사이트 입니다.사실 작은 규모의 웹 사이트를 만들때, 이런 식으로 개발하는 것이 가장 좋은 방법일 수 있습니다.낭비가 없고, 하나의 페이지에서 모든게 다 가능하고, 인터렉티브함이 크고, 디자인적인 요소도 뛰어나기 때문이죠.다만 이런 식의 웹 사이트는 내용이 거의 고정이 되어 있는 제품 홍보 사이트 또는 소규모 회사 웹 사이트에 아주 적합한 사이트입니다. 지금 여기 소개하는 두개의 사이트를 한번 확인해 보시죠. http://www.injectdesign.co.nz/ http://adamscreation.com/

myownbike 멋진 커스텀 바이크 사이트 http://www.myownbike.de/

3번째 책의 예제 사이트는 http://css3.zerois.net/wordpress/ 에서 확인할 수 있습니다. 3번째 책에서는 일단 HTML5와 CSS3을 이용하여 사이트를 만드는 방법을 알려준 후 워드프레스로 포팅하는 법을 익히게 됩니다.워드프레스 초보자인 경우에도 책에서 알려준 내용 그대로 따라하시면 쉽게 일반 웹 사이트를 워드프레스로 변환할 수 있습니다. 워드프레스는 기본적으로 MySQL 이라는 DB와 PHP 코드를 이용하여 데이터 베이스를 구축하기 때문에, 웹 프로그래밍을 할 줄 모르는 웹 디자이너분들까지도 쉽게 데이터베이스를 활용할 수 있습니다. 시중에 나온 다른 책과는 접근 방법이 상당히 다르며, 쉽게 응용할 수 있게 책이 쓰여져 있기 때문에, 이 책만 잘 이용하게되면, 누구라도 손 쉽게 ..

이번에 쓴 3번째 책 예약 판매 시작되었습니다. 아마 주문하시면 담 주 중에 받지 않을까 보입니다. http://www.yes24.com/24/goods/8141484

http://www.vectorworldmap.com/ 여기서 찾으세요.벡터 형식으로 전세계 지도를 제공하며, 모든 국가가 레이어로 처리되어 있어, 한 국가만 필요할때도 요긴하게 사용할 수 있겠네요. 제공되는 형식은 AI, CDR, EPS, PNG, JPG, GIF 형식입니다.

요즘 워드프레스가 대세이긴 한가 봅니다.현재 제가 이용하는 블로그는 티스토리인데요.뭐 과히 부족한 기능이 없기 때문에 티스토리를 사용하기 합니다만, 워드프레스 만큼의 유연성을 보여주지 못하고, 맘대로 커스터마이징화 할 수 있는 부분이 확실히 워드프레스 대비 떨어지긴 합니다. 아래 사이트는 워드프레스 기반으로 만든 소반 레스토랑 사이트 입니다. 물론 제가 개발한 사이트입니다. ^^ http://www.sobahndubai.com/ 워드프레스는 지금까지 사용해 본 CMS 중에서 익히기 쉽고, 확장성이 뛰어나며, 많은 플러그인들이 제공되기 때문에, 누구나 쉽게 사이트를 멋지게 만들어 주는 정말 멋있는 툴입니다. 현재 12월 중에 출간 예정인 "처음부터 배우는 CSS & 워드프레스" 란 책에 이와 비슷한 사이트..

제가 아무래도 웹쪽 일을 하다 보니, 사용자들이 어떤 브라우저를 사용하는지 궁금해 할때가 많습니다.웹 사이트 개발을 하다 보니, 저는 기본적으로 모든 브라우저를 설치해서 사이트가 개발 될 때 마다 모든 브라우저에서 테스트 해 보곤 합니다. 그나마 현재는 웹 표준으로 개발하다 보니, 상대적으로 모든 브라우저에서 테스트를 덜 하긴 합니다만, 그래도 특정 브라우저에서 오류가 발생할 수 있기 때문에, 일단 기본적으로 IE 최신 버전에서 테스트해보고, 크롬과 파이어 폭스는 반드시 테스트 해 봅니다. 그리고 나서 하위 IE 브라우저에서 사이트가 어떻게 보이는 지 살펴보곤 합니다. 또한 가끔 브라우저 통계를 보기 위해 브라우저 사용에 대한 통계를 제공하는 사이트도 방문을 하는데, 상당히 흥미로운 결과가 나와서 여러분..

9월 1일 개발을 완료한 사이트입니다.HTML5와 CSS3을 기반으로 했으며, jQuery 가 적용된 사이트 입니다.또한 미디어쿼리를 적용하여 모바일 환경에서도 문제없이 사이트가 구동됩니다. 전체적으로 깔금함으로 추구했으며, 특히 PRODUCTS 부분에 좀 더 신경을 써서 개발했습니다.특히 글꼴은 CSS3에 새롭된 도입된 @font-face 를 적용하여, 글꼴을 비트맵 처리하지 않았습니다. SEO 최적화를 하기 위해 반드시 이미지로 처리해야 하는 부분 또한 백그라운드 이미지로 처리하고, 내용은 HTML 내부에 포함하여, 검색엔진의 로봇이 전체 검색을 하더라도, 내용을 전부 파악할 수 있게 하였습니다. 신시웨이는 국내 DB 보안 솔루션회사 중 가장 뛰어난 기술을 보유하고 있으며, 공공기관 및 금융기관 및 ..

여러 가지 jQuery 효과가 집합되어 있는 Vanity toolset 을 소개합니다. 요즘 많이 사용하는 슬라이더 효과, 탭 효과 , 말풍선 효과 등 여러 가지 효과를 구현할 수 있습니다. 효과들은 개별적으로 작동하며, 아주 아주 가볍습니다. 8kb 정도 밖에 안됩니다. 강력하게 추천하는 효과 모음집입니다. http://vanity.enavu.com/

가끔 작업 때문에 기업의 로고가 필요할 때가 있습니다. 하지만 인터넷에서 기업의 로고를 찾는 것은 참 고역입니다. 특히나 AI 파일 또는 EPS 파일로 찾는 것은 더욱 힘듭니다. 그런 고민을 한번에 날려 보낼 수 있는 사이트가 있어 소개해 드립니다. 사이트는 다름 아닌 http://www.seeklogo.com/ 입니다. 사이트 제목에서부터 로고를 찾는 것을 알 수 있죠. 여기서 유명한 기업의 로고는 아주 다양하게 찾아 낼 수 있습니다. oracle 이라는 검색어를 입력해 보면 아래와 같은 결과를 얻을 수 있습니다. 단순히 oracle 로고 뿐만 아닌 이전에 사용했던 다양한 형태의 로고들을 발견할 수 있습니다. 하지만 서버가 네덜란드에 있어서 그런지, 검색 속도는 조금 안습입니다. ㅠㅠ 이제부터 로고를 ..

지금 아래에 소개하는 사이트들은 포토샵 원본 파일인 PSD 파일을 얻을 수 있습니다. 다양한 PSD 소스 파일을 얻을 수 있으며, 포토샵 초보들은 원본 파일을 보면서 어떻게 포토샵 결과물이 나오는지 알 수 있는 소중한 정보가 될 것입니다.이 정보의 출처는 http://speckyboy.com/2008/05/10/14-amazing-free-photoshop-psd-resource-sites/ 입니다. 1. .PSD Files on deviantART 2. FreePSD.com3. Official PSDs4. PhotoshopCandy5. Photoshop Cafe6. Free Photo Clips | Background-Free Photo Objects7. PSDTUTS8. 20+ Free Adobe P..

http://www.zdnet.co.kr/news/news_view.asp?artice_id=20120518180333 오늘 ZDNet 기사 중 흥미로운 기사를 하나 봤다.제목이 “한국 웹, 미중일보다 전력소모 커“…왜? 라는 기사인데 기사의 핵심은 다음과 같다. 정부가 지난해보다 여름맞이 전력난 대비 시점을 앞당긴 가운데 국내 웹 환경이 해외보다 많은 전기를 쓰게 한다는 연구 결과가 나와 주목된다. 주요 원인은 어도비의 인터넷 멀티미디어 기술 '플래시'가 많은 탓으로 분석됐다.즉 한국의 웹은 지금도 플래시 사용량이 많다는 것이다.한국의 웹은 아주 화려한 것을 좋아하는 경향이 많아, 사이트의 메인 메뉴를 만들때도 플래시를 사용하고, 초기 화면의 이미지인 경우에도 플래시를 이용하는데, 왠만하면 플래시 사용..

프라하에 거주하는 UI 및 아이콘 디자이너 인 Martin Karásek 가 제공하는 무료 아이콘입니다. 다운로드는 http://karimartin.cz/#freshy 에서 받을 수 있습니다. 이런 분들 때문에 웹이 더욱 아름다운 것 같습니다. ^^

웹 사이트 개발할때 아주 유용하게 사용할 수 있는 자바스크립트 하나 소개해 드리겠습니다. minjs라는 jQuery 기반 자바스크립트 컴포넌트인데, 많이 사용되는 3가지 기능이 포함되어 있습니다. 기본적으로 3가지 기능이 있습니다. 폼, 테이블 그리고 달력 기능이죠. 특히 폼과 테이블은 회원 가입 폼이나, 게시판에서 유용하게 사용가능하며, 특히 테이블은 정말 유용하게 사용가능 할것 같습니다. 웹 사이트 주소는 http://www.minjs.com/ 이며 방문하셔서 보시면 어렵지 않게 적용 가능할 수 있습니다.

보통 영문 사이트인 경우 컨텐츠의 내용이 없을 경우 lorem Ipsum 으로 시작하는 문구를 집어 넣는 경우가 많습니다. 내용은 거의 무의미 하지만, 전체적인 인쇄 모양 또는 웹 사이트의 모양을 가늠 할 수 있기 때문에 보통 레이아웃을 잡는 용도로 많이 사용합니다. 제가 쓴 2개의 책에도 lorem Ipsum 이라는 문구를 이용해서 샘플 사이트를 만들곤 했으며, 현재도 만들고 있는 사이트의 내용이 없어 lorem Ipsum 문구를 일단 채워 놓고, 웹 사이트의 내용이 완성되면 변경하곤 합니다. 근데 간단한 자바스크립만으로 문구를 일일이 입력하지 않아도 lorem Ipsum과 동일한 효과를 주는 Fixie.js라는 것이 출현했습니다. 아래는 해당 사이트에서 발췌한 제목입니다. 간단하게 해석하면, " Fi..

HTML5는 이제 대세가 되어 가고 있습니다. 특히 외국에서 제작되는 거의 모든 사이트들은 HTML5로 속속 전환되고 있는데요, HTML5의 여러 특징 중 하나인 Video 태그를 정말 잘 이용하는 것을 볼 수 있는 사이트들이 몇가지 있어 소개해 드리겠습니다. http://quentinmosimann.com/ 배경 전체를 비디오 영상으로 처리했습니다. 전체적인 메뉴 구성 또한 매우 다이나믹합니다. 각 서브 페이지들 구서 또한 각각의 비디오 영상으로 처리되어 매우 역동적인 모습을 볼 수 있습니다. http://slanteddoor.com/ 레스토랑 사이트 입니다. 사이트 구성이 너무 맘에 듭니다. 심플하면서 동영상 파일의 크기도 크긴 않지만, 딱 필요한 요소만 핵심적으로 보여주는 사이트입니다. 이 사이트는..

[신간소개] 이제 실전이다 HTML5&CSS3 사이트 제작의 모든 것  ● 저자: 양용석  ● 페이지: 464  ● 판형: 4X배 변형(190 x 244)  ● 도수: 2도  ● 정가: 25,000원  ● 발행일: 2012년 4월 20일  ● ISBN: 978-89-966598-9-1 93560[강컴] [교보] [리브로] [반디] [11번가] [알라딘] [예스24] [인터파크] sample.pdf_도서 내용HTML5와 CSS3로 다양한 레이아웃 디자인을 해보는 것부터 시작합니다. 실전 첫 단계로 레스토랑 체인점 사이트를 제작해보고 바로 리뉴얼까지 해보면서 CSS의 강력한 기능을 체험할 수 있습니다.쇼핑몰 웹사이트 디자인은 이 책의 하이라이트입니다. 쇼핑몰은 수많은 디자인 기법들이 적용되기 때문에 아주 많..

도서 [예약판매] 이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것 : 사이트 개발과 리뉴얼, 쇼핑몰, 모바일, 가변길이 사이트까지2012/04/27 이후 배송 가능 양용석 저 | 로드북 저의 두번째 책입니다. 예약 판매 실시 중에 있습니다.여러분의 많은 관심과 사랑 부탁드립니다. 책을 쓸 때 마다 느끼는 것이지만, 책을 쓰는 작업은 정말 어렵다는 것입니다. 하지만, 책이 완성되고, 출판 되면, 그만큼 기분 좋은 일도 없습니다. 이번 책도 많은 정성과 노력이 들어 갔습니다.여러분의 많은 관심 부탁 드리겠습니다. 아래는 Yes24에서 가져온 책 소개입니다. 국내도서 > 컴퓨터와 인터넷 > IT 전문서 > 웹개발 > HTML/CSS국내도서 > 컴퓨터와 인터넷 > 웹/컴퓨터/쇼핑몰/게임 > 홈페이지/..

저의 두번째 책입니다. ^^ 표지는 두개 중 하나가 되겠죠? ^^;; 내용은 다음과 같습니다. 의 실전편으로 준비하였습니다. 구구절절 설명보다는 짧은 제목과 관련 이미지만 포스팅하겠습니다. HTML5로 사이트 구조 설계를 어떻게 하고 CSS로 디자인을 어떻게 제어하는지 확실하게 연습할 수 있습니다. 기존의 사이트는 어떻게 리뉴얼을 할까요? CSS만 바꾸어도 사이트는 확실하게 달라질 수 있습니다. 쇼핑몰 디자인? 어렵지 않아요~~~. 복잡해보이지만, 사실 아주아주 간단합니다. 스티키 윈도우도 한번 구현해볼까요? 쇼핑몰 사이트 디자인을 잘 배워두면 어떤 복잡한 웹 디자인도 거뜬히 해낼 수 있을 것 같은데요~~~. 모바일에서는 어떤 다른 모양의 디바이스에서건 웹사이트가 잘 보여야겠죠? 가변길이 사이트도 아주 ..

http://www.jigsoaricons.com/ 에서 60개의 아이콘을 무료로 제공하고 있습니다. 무료로 사용 가능하며, 벡터와 PNG 파일 두가지로 제공하고 있습니다. 특히 웹용으로 사용하기 아주 좋은 아이콘들입니다. 아래는 아이콘의 스냅 샷입니다. 벡터용으로는 AI 파일 하나를 제공하고 있으며, PNG 파일로는 dark 과 light 두가지 버전으로 제공합니다. 특히 PNG 파일은 16, 24, 48, 64 픽셀의 다양한 크기로 제공되고 있습니다. 웹 디자인시 아주 유용하겠습니다.

전세계 브라우저 사용 현황 IE는 꾸준한 하락세를 기록중이며, 크롬이 선전하고 있습니다. 파이어폭스도 하락하고 있으며, 나머지 브라우저는 점유율이 미미하군요. 저도 맥에서 한동안 사파리를 사용하다, 주 메인 브라우저를 크롬으로 변경했습니다. 이유는 간단합니다. 크롬을 사용하면, 맥에서 사용하던, PC에서 사용하던지, 환경 설정을 동일하게 할 수 있습니다. 계정에 로그인을 하게 되면 말이죠. 일종의 크라우드 서비스입니다. 그리고 크롬이 가장 가벼운 브라우저입니다. 환경 설정도 간편하고, 브라우저의 업데이트도 빠릅니다. 그리고 PC에서는 IE tab이란 플러그인을 사용하면, Active X까지 작동하기 때문에, 굳이 IE을 사용할 필요도 없습니다. 크롬은 웹 표준과 HTML5 그리고 CSS3의 모든 기능을 ..

아이폰 및 아이패드에서 사용하는 아이콘 모음집입니다. http://blog.twg.ca/2009/09/free-iphone-toolbar-icons/ 에서 가져 왔으며, 자유롭게 사용 가능합니다. 아이폰에서 사용하는 아이콘이지만, 웹에서 사용할때도 유용하게 사용할 수 있습니다. 아이콘의 모양은 다음과 같습니다. 다운 받으실 분은 다운 받으시고 위의 URL 클릭하셔서 보시면 고해상도(레티나 디스플레이용) 아이콘 또한 다운 받을 수 있습니다.

이번에 새롭게 보라카이 나이트클럽 사이트를 리뉴얼 했다. 두바이에서 가장 규모가 큰 나이트클럽이다. 이전 웹 사이트는 XHTML 1.0 + CSS2 그리고 약간의 플래시를 이용해서 개발되었는데, 리뉴얼된 사이트는 HTML5 + CSS3 그리고 jQuery 만으로 개발되었다. 앞으로 사이트 만들땐 플래시 사용할 일이 점점 없어질 것 같다. 비교적 많은 양의 컨텐츠는 없었지만, 디자인과 구성에 많은 고민을 한 사이트 중 하나이다. 사이트 URL은 http://www.boracayclub.com

유튜브 동영상이 끊기거나 느릴때가 많죠. 그럴때는 http://www.youtube.com/testtube 여기 가서 테스트 를 눌러서 Feather 베타 가입을 클릭해 주세요. 그러면 유튜브 컨텐츠를 딜레이 없이 조금이나마 빨리 보실 수 있습니다. 그리고 testtube에는 다음과 같은 기능들이 테스트 중입니다. 관심있는 분들은 해당 사항을 클릭해서 자세한 내용을 보시면 도움이 되실 겁니다. ^^

요즘 가장 많이 사용하는 Javascripts Framework가 jQuery 입니다. 이중에서 가장 많이 사용하는 효과가 라이트박스라고 하는 모달 윈도우를 들 수 있겠는데요. 누구나 쉽게 jQuery를 효과를 줄 수 있는 플러그인들이 있어 소개합니다. 이 기사의 출처는 http://graphicalerts.com/20-awesome-best-jquery-lightbox-plugins/ 입니다. 여기서 주목할만 한 것은 Fancybox입니다. ^^ 가장 깔끔하네요. jQuery Lightbox Plugin (balupton edition) More Information on jQuery Lightbox Plugin (balupton edition) Lightbox2 More Information on L..

web designer wall에 있는 article을 기반으로 작성하였습니다. 따라서 이 article에 소개된 예제의 저작권은 web designer wall 에 있습니다. CSS3 기능 중에서 가장 놀라운 기능 중 하나가 CSS3 애니메이션 속성입니다. 하지만 CSS3 애니메이션은 최신 버전의 IE9에서도 지원하지 않습니다. 이 페이지에 있는 예제들은 사파리 또는 구글 크롬과 같은 webkit 계열 브라우저에서 완벽하게 지원합니다.

책을 쓴다는 것은 쉬운일은 아니다. 특히 내가 하는 일에 대한 책은 전문 분야이기 때문에 신경이 많이 쓰인다. 하지만 원고를 마감한 후 인쇄 바로 직전 편집된 PDF파일만 봐도 참 신기하고, 뿌듯해 진다. 그리고 출판되어, 내 이름이 박힌 책을 손에 쥐면 만족감은 이루 말할 수 없게 된다. 그래서 사람들이 책을 쓰나 보다, 내 생각과 지식이 함축되어 있는 나만의 책! 책쓰는 거 이거 은근히 중독성이 있다. ^^

드디어 IE6에서 벗어나는 길이 열리나 봅니다. MS에서 XP에서 IE 6와 7은 IE8로 강제 업그레이드 하고, 윈도우 비스타와 윈도우 7에서는 IE 8을 IE 9으로 강제 업그레이드 한다고 합니다. 저와 같은 웹 표준 개발자는 "와~~~~" 하는 탄성을 질러도 됩니다. 웹 개발을 할때, 웹 표준으로 만든 후 IE6와 EI7 과 같은 멍청한 브라우저에 맞춰서 CSS 코드 개발하는 거 정말 지옥같은 경험입니다. 제발 이세상에서 IE6와 IE7은 영원히 사라졌으면 좋겠습니다. 뭐가 좋다고 보안에도 좋지 않은 IE6와 같은 구닥다리 브라우저를 좋아들 하는지 ㅉㅉㅉ 난 IE6가 좋아 다른 브라우저는 영 나에겐 맞지 않아서 말야! 하는 분들은 자기 집 열쇠가 녹슬고 망가진 줄도 모르고 이 열쇠가 좋아 하는 것과..