유지아빠가 살아가는 세상

현재 웹에서 가장 많이 사용하는 CSS 프레임워크이자 대표주자인 부트스트랩이 5.0 베타 버전이 출시되었습니다. 6년만에 블로그를 다시 시작하면서 부트스트랩으로 다시 글을 시작하게 되었습니다. 사실 필자는 부트스트랩에 대한 책도 하나 저술했고, 그 책이 사실 부트스트랩을 다룬 한국내 첫 책이자 가장 잘 팔린(?) 책이었습니다. 그 책은 부트스트랩 3.X 버전 이었고 부트스트랩에 대해서 나름 잘 설명한 책이었습니다. 라고 자찬하고 싶습니다. 사실 부트스트랩을 알고 나서는 필자가 제작하는 모든 웹 사이트는 부트스트랩을 기초로 만들고 있습니다. 부트스트랩 이후에 상당히 많은 CSS 프레임워크들이 세상에 출현했고, 나름 의미 있는 사용자 층을 이루고 있지만, 실상 부트스트랩 만한 CSS 프레임워크도 없습니다. ..

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

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

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

최근의 모든 웹 사이트들은 CSS 기반으로 웹 사이트를 제작합니다. 즉 웹 표준을 이용하여 웹 사이트를 개발하는 것입니다. CSS 기반으로 웹 사이트를 제작하게 되면, 개발자에게 편리한 점이 많습니다. 또한 사용자에게도 편리한 점이 많습니다. 사용자들이 HTML 코드를 보고 필요없다고 생각하는 선택자를 제거할 수 도 있고, 자기가 원하는 글꼴로 모든 웹사이트를 바꿔 버릴 수 도 있습니다. 맥 사용자들은 예전 부터 맥의 기본 브라우저인 사파리에서 제공되는 글꼴을 별로 맘에 안 들어해서, 자기만의 스타일 시트를 만들어 적용해 주기도 했습니다. 그렇다면 보기 싫은 컨텐츠인 경우에도 블럭 시킬 수 있을까요? 물론 입니다. 제가 자주 방문하는 카메라 장비 사이트인 SLR 클럽에 보면 오늘의 사진(그날의 사진) 이..

아래의 내용은 로드북 출판사 블로그에서 발췌한 내용입니다. l저자: 양용석 l 페이지: 448 l 판형: 4x6배변형(190x244) l 도수: 2도 l 정가: 25,000원 l 발행일: 2011년 10월 4일 l ISBN: 978-89-966598-3-9 구매하기 ☞ [강컴] [교보] [리브로] [11번가] [알라딘] [예스24] [인터파크] _도서 내용 이 책은 HTML5와 CSS3의 새로운 점에 포커스를 맞추고 있지는 않습니다. 웹 표준의 핵심 철학인 "구조와 디자인의 분리"라는 관점에 맞게 달라진 웹 개발 방식을 제대로 배울 수 있도록 하는 것이 이 책의 주목적입니다. 이 책으로 학습하는 독자가 HTML5로 구조를 제대로 설계할 수 있고 CSS3로 정밀하고 자유자재로 디자인을 컨트롤할 수 있는 정..

오늘부터 예약 판매 합니다. 예스24 와 인터파크에서 예약판매 시작합니다. 많은 관심과 구입(?) 과 성원 부탁드립니다. 검색창에 HTML5 라고 입력하시면 됩니다.

많은 관심과 격려 부탁드립다. 책이 나오면 자세한 목차와 내용에 대한 이야기를 드리도록 하겠습니다.

8월에 출간 예정입니다. 저희 경험과 노하우를 바탕으로 HTML 5와 CSS3을 이용한 웹 사이트 제작 실무에 대한 내용을 넣었습니다. 이 책으로는 HTML5 을 이용하여 사이트를 제작하는 방법과 CSS3을 통한 디자인 노하우를 배울 수 있습니다. 많은 관심과 성원 부탁드립니다.

내가 가장 많이 사용하는 브라우저는 IE, 사파리, 파이어폭스 이다. 비율이 약 50% 30% 20% 이렇게 사용한다. 한국에서도 이젠 웹표준이 대세로 잡혀가고, 브라우저 호환성 문제에 대해서는 많이 해결된 상황이다. 하지만 유독 롯데 계열사들은 정말 엉망진창이 사이트가 많다. 오늘은 롯데월드 를 한번 살펴보자. 우선 아래의 그림은 IE8 에서의 그림이다. 메뉴가 전체적으로 다 보이고, 그래픽적인 요소도 좋다. 네이게이션 부분도 플래시를 사용했지만 나쁜 편은 아니다. 이제 파이어폭스에서 한번 살펴 보자 배경이 흰색이다. 그리고 사이트도 중앙정렬이 아니고 왼쪽으로 치우져져 있다. 배경이 하얗게 변해 있어서 상단에 있는 메뉴들은 보이지도 않는다. 이젠 사파리에서 한번 보자. 허걱!! 메인 메뉴 자체가 안보인..

음.... 꼭 웹표준을 이용하여 완벽하게 CSS 만으로 사이트를 구축한다.!! 고민해야 하는 문제네요. 웹의 초기에는 사이트들이 정말 간단했습니다. 그 후 1990년대 후반에서 2000년대에 급격하게 웹의 기술이 발달되고, 여러가지 기술들이 많이 나오면서 웹사이트를 구축하는것이 기능적인 것도 중요하지만, 웹사이트의 디자인이 더욱 많이 부각되었습니다. 그러다 보니, 사이트를 만들때 원래의 의도와는 달리 Table 태그를 많이 쓰게 되었습니다. 원래 Table 태그의 용도는 데이터를 보여주는 용도였습니다. 간단하게 말하자면, 엑셀과 같이 데이터를 정렬해서 보여주는 것이 Table 태그의 역할이었습니다. 하지만 웹디자이너들이 Table 태그의 새로운 용도를 발견하게 됩니다. 바로 사이트의 레이아웃을 잡는데, ..

인터넷 서점 알라딘에 이어서 예스24에서도 IE 를 사용하지 않고도 결제가 가능하게 되었다. 구글 크롭이나, 파이어폭스에서도 결제가 가능하다니, 드디어 한국 웹사이트들이 정신을 차리나 보다. 예전 같으면 상상도 하지 못할 일들이 벌어지는 것과 같은 것이다. 인터넷의 갈라파고스와 같은 한국에서 점점 세계의 웹표준을 준수 하려는 노력이 이젠 결실을 볼때가 되었다. 말이 나와서 말이지 지금까지 무슨 결제 사이트 들어가거나, 정부기관 사이트 하나 들어갈려면, 들어가기 전부터 뭐를 설치하라는 메시지가 최소 5번 이상은 나온다. 특히 nProtect 같은 허접 쓰레기 액티브 엑스는 어느 사이트에나 다 들어가 있다. 왜 설치해야 하는지도 모르면서 사용자들은 무조건 설치를 누른다. 왜냐고??? 설치하지 않으면 작동을 ..

가끔 이런 말을 들을 때가 있습니다. 웹 표준을 한다는 것은 테이블 태그를 사용하지 않는다는 건가요? 라는 질문을 가끔 받는데, 웹 표준이라고 해서 테이블 태그를 사용하지 말라는 것은 아닙니다. 하지만 테이블 테그는 테이블이 반드시 필요한 테이블에만 적용을 해야지, 사이트의 레이아웃을 잡을 때 쓰는 것은 좋지 않다는 겁니다. (권장하지 않는 다는 말이지요.) 테이블 태그를 사용해서 사이트를 개발하다 보면 정말 골치 아픈게, 또는 가 어디서 시작되고 어디서 끝나는지 몰라 가끔 헤맬때도 많고 무엇보다 태그가 무지 많이 생성된다는 겁니다. 그러면 개발자의 입장에서도 코드 수가 많아짐으로 인해 복잡해지고 코드가 많으면 사이트 렌더링 시 시간도 좀 더 많이 소요되고, 무엇보다 네트웍 트래픽이 증가하게 됩니다. “..

흠.. 요즘 오픈 예정중인 사이트가 하나 있는데, 이게 IE8에서만 약간의 문제가 발생하는 부분이 있었다. 물론 IE8 에서만 발생하는 문제였다. 무지 무지 고민을 하던 중 마이크로소프트 정기 메일에서 온 정보를 보고 문제를 해결했다. 즉 호환성 문제가 발생하게 되면 아래와 같이 처리하면 된다고 한다. " Internet Explorer 8 웹표준 모드와 호환성 확보를 위한 웹사이트 메타태그 적용 가이드 웹 전체의 상호 운용성을 높이기 위한 노력의 하나로Internet Explorer 8은 웹 표준을 철저히 준수하는 표준 렌더링 모드를 기본설정으로 사용할 것입니다. 이에 따라 웹 개발자들과 설계자들은 “Write once, run anywhere: 한번 작성하면 어디에서나 실행이 가능하다”라는 웹 표준의..

어제는 기본적으로 레이아웃을 어떻게 잡는지에 대한 내용을 봤습니다. 오늘은 구조화된 문서에 속성을 효과적으로 적용하기 위해서는 선택자에 대한 내용을 보겠습니다. CSS에는 많은 속성들이 있습니다. 각각의 속성들에 대해서는 계속적으로 언급할 일이 있으므로 자세한 이야기를 다루진 않겠습니다. 하지만 속성을 정확하게 적용하기 위해서는 선택자를 정확히 사용하는 방법을 알아야 합니다. 선택자를 정확하게 사용하게 되면 구조화된 문서를 제작하는데 도움을 줄 수 있습니다. 선택자의 종류에는 4개가 있습니다. ---------------------------------------------------------------- 공용선택자 * 모든 태그를 지정 타입선택자 A 태그 A를 지정 클래스선택자 .A 클래스가 A인 태..

웹표준에 대해서 2개의 글만 쓰고 바로 실전으로 들어갑니다. 왜 바로 실전으로 들어가는가? 기초적인 내용은 실전에서 바로 바로 적용해 보면서 어떻게 나타나는지 그때 확인해도 늦지 않을 뿐더러, 기초에서 이 방식은 이럴때 쓰이고 저 방식은 저럴때 쓰인다는 것을 직접 아는 것이 실무에서 적용할때도 훨씬 빠르게 다가오기 때문이죠. 하지만 들어가지 전에 몇가지 짚고 넘어갈 사항이 있습니다. 바로 div 와 span 입니다. CSS작업시 제일 많이 보이는 부분이 div 하고 span이기 때문에 이 둘의 차이는 반드시 짚고 넘어가야 합니다. 결론적으로 말하면 div 는 block이고 span은 inline 이다 라는 차이점 입니다. 무슨 말인고 하니 하나의 블럭을 감쌀때는 div 를 쓰고 그 줄만 적용할때는 spa..

현재 많은 웹사이트를 디자인 한 웹디자이너들은 흔히 table 태그를 이용해서 디자인을 해 왔으며, 그렇게 배워 왔습니다. 하지만 table 태그의 원래 목적은 디자인을 위해서 만들어진 태그가 아닙니다. 우리가 문서를 작성할때, 레이아웃을 지정할때 table 를 사용해서 레이아웃을 만들지 않습니다. 마찬가지로 웹페이지를 만들때도 데이터를 보여주거나 테이블이 반드시 필요한 요소 이외에는 테이블 태그를 이용해서 디자인을 하게 되면, 추후 웹페이를 수정하기 위해서 하나 하나의 테이블을 분석해야 하고, 프로그래머도 복잡한 테이블로 인하여 프로그램에 집중하기 어렵습니다. 테이블을 이용한 웹페이지를 콘크리트로 만든 건물이라고 비유할 수 있습니다. 그에 반하여 웹표준에 의해서 만들어진 건물은 일종의 조립식 건물입니다..

웹기획과 더불어 웹표준도 오늘부터 시작하도록 하겠습니다. 최근들어 웹표준 웹표준하는 소리를 많이 들어 봤을겁니다. 왜 웹표준이라는것이 중요한데, 라는 소리들도 많이 있고, 일반 사용자에게는 웹표준의 의미가 무의미 할 수도 있습니다. 도태체 왜 이런것을 만들어서 웹개발자들 머리만 아프게 만드는지 원... 지금까지 사용했던 방법들을 사용해서 웹사이트를 개발해도 전혀 문제가 없잖아? 근데 왜 굳이 웹표준을 지켜야 하는거야? 라는 말들도 많습니다. 처음에는 저도 그렇게 생각했습니다. 하지만 웹표준이라는 것이 대세이고, 또한 방법을 익히다 보면, 기존의 방식보다 훨씬 편하고, 더 능률적이며, 추후 웹사이트 수정시 엄청 편하게 전체 사이트를 전부 수정 할 수도 있다는 것, 그리고 하나의 폼( form) 또는 템플릿..