유지아빠가 살아가는 세상

블로그를 꾸미거나, 웹 사이트 제작시 멋있는 패턴은 작은 사이즈의 이미지만으로도 굉장히 큰 효과를 낼 수 있습니다. 특히 웹 표준으로 제작된 사이트인 경우 HTML문서 내부에 이미지를 삽입하는 것 보다, CSS를 이용해서 배경이미지를 넣는 것을 선호하는데, 그 이유는 간단한 CSS 코드만으로 자유자재로 웹사이트의 색과 배경을 변경할 수 있기 때문입니다. 제가 사용하는 현재의 티 스토리도 사용자가 배경이미지를 변경하기 쉽게 제작이 되어 있는데, 이럴때 유용한 패턴 배경사이트 정보 알려드리겠습니다. ( 원 정보는 http://speckyboy.com/2008/01/19/top-10-free-resources-for-background-patterns-and-textures-for-web-designers/ ..

최근에 HTML5의 열풍이 심상치 않다. 모든 언론 매체에서 HTML5가 마치 새롭게 나온 웹 기술 처럼 소개하기도 한다. 하지만 HTML5는 기존 HTML 버전의 가장 진화된 버전일 뿐 그 이상도 그 이하도 아니다. 특히 HTML5는 기존 HTML 문법구조와 틀린 점이 새로운 태그가 도입되었다는 것이다. 물론 여러 기술적인 요소들을 대거 포함하였기 때문에 개발자들은 그쪽으로 더 많은 포커스를 둘 수 도 있다. 하지만 기술적인 관점에서 HTML5의 기능들은 현재로서도 충분히 구현 가능한 기술들이다. 다만, HTML5을 사용하게되면, 표준 기술이지만, 현재 구현 가능한 기술들은 표준 기술이 아니라, 어도비 플래시를 이용하거나, IE에서 Active-X 와 같은 기술을 사용해야만 구현가능하다는 차이점이 있다..

최근의 모든 웹 사이트들은 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 라고 입력하시면 됩니다.

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

HTML 5 와 CSS3의 모든 기능을 완벽하게 지원하는 오페라가 버전업되었습니다. 사용하기도 편리하고 속도도 상당히 빠른 브라우저입니다. 특히 다른 브라우저에서는 지원하지 않는 CSS3의 기능과 HTML 5의 모든 태그가 지원되는 유일한 브라우저입니다. 여러분도 한번 설치해 보세요. ^^

저는 검색 엔진으로 구글을 참 좋아합니다. 깔끔한 인터페이스와 특히 제가 원하는 검색 결과가 바로 나와서 가장 많이 사용하게 되죠. 가장 사용하지 않는 검색 엔진은 네이버입니다. 네이버는 가장 먼저 네이버 내부의 결과를 먼저 보여주기 때문입니다. 구글이 열린 검색이라면, 네이버는 거의 닫힌 검색이죠. 제가 이 블로그에서도 대한민국의 인터넷이 발전하려면 네이버가 없어지면 된다고 항상 주장했습니다. 뭐 이런 이야기는 나중에 더 자세히 하고, 이번에 구글이 새로운 UI를 선보였습니다. 이전 UI도 깔끔 그 자체였지만, 이번에는 깔끔하면서, 세련되게 변경되었네요. 눈치 못 채신 분도 있겠지만, 많은 분들이 눈치를 채셨으리라 믿습니다. 구글도 요즘 들어 욕을 많이 먹고 있습니다. 뭐든지 과하면 안 좋은 것 같습니..

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

CSS 박스 모델 이해하기 CSS의 기능은 단순하게 텍스트, 이미지 그리고 다른 부분의 형식을 정의하는데 사용하는 것보단 웹 페이지의 레이아웃을 잡는데 더 강력한 힘을 발휘합니다. CSS를 이용해서 HTML 코드를 작성하다 보면 라는 태그를 쉽게 보실 수 있습니다. 태그는 자체 의미는 전혀 없다고 보시면 됩니다. 즉 이 태그는 형식정의를 위해서 사용하는 것이 아니라, 엘리먼트의 논리적 구분이나 경계를 나타나는 데 사용된다고 보시면 됩니다. 또한 div 태그와 유사한 태그가 span 이라는 태그입니다. div 태그가 하나의 큰 틀을 잡을 때 사용한다고 보면 span 태그는 인라인 태그입니다. 한 줄에 위치한 특정 엘리먼트에 속성을 부여할 때 사용한다고 보시면 됩니다. div 태그를 사용하게 되면 태그를 사..

4. CSS 코딩하기 이전장에서는 HTML 과 포토샵을 이용해서 문서에 대한 구조를 갖췄습니다. 이번장은 CSS을 이용하여, 지금까지 만들어진 HTML 문서에 디자인을 입히는 작업을 해보도록 하겠습니다. 먼저 CSS 초기화 작업을 하겠습니다. CSS 초기화 작업이 중요한 이유는 몇 가지가 있습니다. 우선 브라우저마다 조금씩 CSS 처리하는 방식에서 차이가 있습니다. 그래서 모든 브라우저에서 동일한 값을 적용시키는 것이 디자이너와 프로그래머들이 여간 힘든 일이 아닙니다. 특히 CSS 초기화는 IE6을 위한 사이트 제작 시 반드시 필요한 일이라고 할 수 있습니다. 이렇게 초기화를 한 후에도 한국에서 많이 사용하는 IE6을 위해서는 좀 더 많은 트릭(Hack 이라고 합니다.)을 사용해야 하는 경우도 많습니다...

HTML 코딩 다시 확인하기 이전 장에서 작업했던 HTML 코딩을 다시 한번 자세하게 살펴보도록 하겠습니다. è 여기를 보시면 헤더 부분에 DOC Type 을 정의해 준 것을 볼 수 있습니다. XHTML 1.0 Transitional 버전으로 작업하는 것을 볼 수 있습니다.

오늘은 조금 깁니다. ^^ Save for web 옵션 알아보기 이전 장에서 보신 Save for web & devices 란 옵션에 대해서 이번 장에 더 자세하게 알아 보도록 하겠습니다. Save for Web 이란 옵션은 포토샵이 웹이 대세인 시대가 도래하면서 새롭게 추가된 메뉴 중 하나입니다. 일반 프린트 물이나 기타 일반적인 그래픽 파일 포맷은 아주 다양하게 존재하고, 각각의 프로그램에 따라서도 확장자가 다릅니다. 하지만 웹에서 사용할 수 있는 그래픽 포맷은 한정되어 있습니다. 현재까지 웹에서 사용할 수 있는 그래픽 포맷은 GIF 파일 , JPG 파일 그리고 PNG 파일이 있습니다. PNG 파일인 경우 오래전에 발표된 포맷이지만 공식적으로 사용한지는 얼마 되지 않아서 IE6 같은 브라우저에서는 이..

동일한 내용이 http://ugpapa.springnote.com/ 여기서도 공개됩니다. 많은 이용바랍니다. 웹디자인을 하거나 인쇄 디자인을 하거나, 사진작업을 할 때 가장 많이 사용하는 도구는 포토샵입니다. 전세계에서 가장 많이 사용되고 있으며, 컴퓨터를 사용하는 대한민국의 모든 사용자들도 한번쯤은 포토샵이라는 말을 들어 봤을 겁니다. 포토샵의 가장 최신 버전은 Photoshop CS5 입니다. 정확하게 버전으로 따지면 12 버전이죠. 벌써 12번째 판올림이 되었다는 것입니다. 포토샵도 스탠다드 버전과 익스텐디드버전이 있습니다. 일반인들이 사용하기에는 스탠다드 버전이라고 해서 사용상에 지장이 있는 것은 아닙니다. 오히려 스탠다드 버전이 사용하기 더 가볍다고 할 수 있습니다. 익스텐디드 버전은 추가적인 ..

이제 전체적인 HTML 소스를 한번 보겠습니다.

일단 1번 구조를 다시 한번 보도록 하겠습니다. 상단에 헤더가 위치해 있고, 왼쪽으로 서브메뉴, 오른쪽으로는 메인 콘텐츠 그리고 아래쪽으로는 푸터가 위치해 있습니다. 웹 표준을 적용하지 않을 경우에는 이 사이트 구조를 전부 테이블 태그를 이용해서 작업을 했습니다. 상당히 코드 량이 많아지고, 테이블 태그를 많이 사용하다 보니, 어떨때는 테이블 태그내에서 중복되거나 생략된 태그로 인해 사이트 구조가 무너져서 버그가 생기고, 그 버그를 잡기 위해 정말 눈 빠지게 코딩 작업을 했었습니다. 하지만 웹 표준을 적용하게 되면 간단하게 사이트 구조를 정리해 줄 수 있습니다. : 헤더부분 : 왼쪽서브메뉴 부분 : 메인 콘텐츠 부분 : 푸터 부분 이렇게 HTML 에선 4개의 영역을 표시해 주는 역할만 하고 CSS 에서 ..

사이트 기본 구조 잡기 웹 표준을 이용한 사이트 디자인에서 HTML이 해주는 정확한 역할은 사이트의 구조를 잡아주는 것입니다. 즉 구조는 HTML이 잡고, 디자인은 CSS가 해준다고 보시면 됩니다. 일반적으로 사이트의 구조는 생각보다 많지 않은 기본구조로 이루어져 있습니다. 가장 기본적은 사이트의 구조는 위와 같습니다. 상단은 메인 메뉴와 로고들이 배치되는 자리이고, 하단은 보통 저작권 표시나 기타 사이트 소개, 저작권 안내 등이 들어가며, 왼쪽 혹은 오른쪽 메뉴에는 서브메뉴들이 들어가게 됩니다. 하지만 사이트에 따라서는 많은 변형이 존재하게 되며 그림에서와 같이 상단, 하단, 가운데 콘텐츠 부분만으로도 이루어진 사이트들도 상당히 많이 있습니다. 또한 아주 단순하게 왼쪽과 오른쪽 이렇게 사이트의 구조가 ..

HTML 코딩의 기초 HTML 코딩은 일반적으로 많이 알려져 있고, 많은 개발도구들이 나와서 어렵지 않게 익힐 수 있습니다. 기본적인 HTML의 구조는 다음과 같습니다. HTML 코드는 사이에서 작성을 하게 됩니다. 사이에는 필요한 정보를 넣거나 자바스크립트와 CSS 구문들이 들어가게 됩니다. HTML 의 문법 구조는 아주 단순하며, 누구나 익힐 수 있습니다. 인터넷에서 HTML 태그라고 검색하셔도 많은 사이트들이 있고, 하루 정도만 시간투자를 하시면 대충 이해할 수 있습니다. 심지어 요즘 나오는 WISWIG 에디터를 사용하게 되면 아무런 문법적 지식이 없더라도 누구나 사이트를 만들 수 있습니다. 여기서는 HTML의 구문을 하나씩 설명하진 않겠습니다. 일단 HTML의 기본적인 문법은 알고 있다는 전재로 ..

Doc type 정의하기 웹 표준에서 웹 페이지를 제대로 표현하기 위해서는 올바른 문서형태를 정의해 줘야 합니다. 올바른 문서 형식을 선언해 주는 것은 다양한 웹 브라우저에 따른 렌더링 차이를 최소화 할 수 있기 때문에 매우 중요하다고 할 수 있습니다. HTML 버전에 따라 해석되는 방식이 브라우저에 따라서 차이가 날 수 있기 때문입니다. HTML 4.01 표준 문서 양식 XHTML 1.0 표준 문서 양식 XHTML 1.1 표준문서 양식 HTML 5 표준 문서 양식 표준 문서구조에 기반한 웹 페이지의 정확한 사용법은 다음과 같습니다. 태그 상단에 올바른 DOC Type 을 정의해 줍니다. 위에 열거한 문서 양식을 보면 대표적으로 Strict 와 Transitional 로 나누어 지는데, 차이점은 다음과 ..

웹 표준이란 무엇인가? 웹 표준은 간단하게 정의하면 구조(HTML, XHTML) 와 표현(CSS), 양식(자바스크립트)을 분리해서 개발하는 것이라고 할 수 있습니다. 즉 HTML으로 구조를 정의하고 표현(디자인적 요소)는 CSS 을 이용해서 배치하고 동적 기능은 자바스크립트를 이용해서 동작하게 하는 것을 웹 표준이라고 할 수 있습니다. 웹 표준 이전 방식에서는 HTML만을 이용해서 구조와 표현을 했었는데, 이 방식은 표현을 하기 위해서 과도한 HTML 태그들을 생겨나고, 구조 또한 복잡해지기 때문에 개발하는 당시와 향후 유지 보수 시 엄청나게 많은 시간과 인력이 낭비되는 단점이 있습니다. 웹 표준을 적용하게 되면 웹 기획자, 디자이너, 개발자 이렇게 3분야의 핵심 멤버들이 각각 맡은 분야에 대한 큰 그림..

원래 책으로 출간할 목적으로 작성을 하다, 그냥 제 블로그에 공개해 버리는 것이 좋게다고 판단하여 블로그에 공개합니다. 이 내용은 다른 곳에 절대 퍼 가실 수 없고, 내용의 일부를 원하실 경우 저에게 반드시 연락해 주시면 감사하겠습니다. 제목은 HTML + CSS + Photoshop 이렇게 지어봤습니다. 목차는 다음과 같습니다. 목 차 1. HTML 과 CSS 웹 표준 알아보기 - 웹 표준이란 - 웹 표준 스펙 - DOC type 정의하기 2. HTML 코딩하기 - HTML 코딩 기초 - 사이트 기본구조 잡기 - 세부 HTML 코딩 - HTML 코딩 완성하기 3. 포토샵 파일을 잘라내자 - 디자인된 포토샵 파일 잘라내기 - Save for web 옵션 알아보기 - HTML 코딩 다시 확인하기 4. CS..

결론: 8개의 같은 스크립을 넣었는데, 화면에 표시되는 것은 3개 밖에 표시되지 않는군요 구글 애드센스에서도 최대 3개밖에 표시가 되지 않는다고 써있네요. ^^ 그리고 각기 다른 광고가 나오진 않는 것 같습니다. 3개가 틀린 광고가 나오거나, 2개는 적어도 동일한 광고가 나오네요. 스크립을 조금씩 바꿔서 테스트 해보겠습니다. 추가 : 구글 광고는 한 페이지에 최대 6개까지 나타낼 수 있습니다. 박스형 광고 3개 텍스트형 광고 3개 이렇게 6개까지 나타낼 수 있다고 하네요. 현재 이 페이지에서는 5개가 보여지고 있습니다.

예전에 파이어폭스용 광고 차단 프로그램인 Ad Block Plus 란 플로그인을 소개했었습니다. 근데 한국에서는 가장 많은 사용자를 가지고 있는 인터넷 익스플로러용은 없냐? 이런 질문을 받았습니다. 그래서 찾아봤더니, 있었습니다. "Simple AdBlock" 이라는 플러그인 입니다. 이름은 Simple 이지만 기능은 막강합니다. http://simple-adblock.com/ 여기 가셔서 다운로드를 받아서 설치합니다. 설치가 되면 브라우저 하단에 아이콘이 생성됩니다. 아이콘을 클릭하시면 설정이라는 곳이 나옵니다. 설정을 클릭하시면 아래와 같은 사이트로 가게 됩니다. 그곳에서 Korea를 선택해주시고 Update Setting 을 해주면 끝입니다. 그럼 효과를 한번 볼까요? 설치 전입니다. 설치 후 어떻..

인터넷은 정보의 바다이기도 하지만, 정말 어마 어마한 광고의 바다이기도 합니다. 특히 뉴스사이트들 인 경우에는 수익을 위해서 사이트 전반에 광고로 도배를 하기도 합니다. 근데 사용자 입장에서는 그게 여간 번거로운게 아닙니다. 광고가 기사를 뒤덥고 있는 경우엔 잘못 클릭 했을때 해당 사이트로 넘어가 버리기도 하기 때문입니다. 이 플러그인은 파이어폭스에만 해당하는 플러그인입니다. 이와 유사한 플러그인이 사파리에도 존재하는 것으로 알고 있습니다. 플러그인의 이름은 AD Block Plus 입니다. 이것만 설치되어 있으면 지긋 지긋한 광고들은 영영 바이~~ 입니다. 일단 설치 방법은 다음과 같습니다. 메뉴에 보시면 도구 > 부가 기능을 클릭합니다. 여기서 확장기능을 선택하고 AD Block plus 를 사용을 ..

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

CSS Lounge라는 사이트를 소개합니다. 사이트에 있는 About us 를 보시면 아래와 같습니다. CSS Lounge is a constantly growing project focused on providing you with a database of the best designed CSS based websites from around the world. Its purpose is to showcase designers’ work and to act as a small portal to the CSS design community. 매끄럽지 않는 번역입니다만, 대략의 내용은 아래와 같습니다. 전세계에 있는 CSS기반의 베스트 웹사이트들의 데이터베이스를 디자이너들에게 제공하는 초점을 맞춘 지속적으..

정말 대단한 DB를 가진 사이트 입니다. 자기만의 리스트를 만들 수 있고, 모든 팝송 및 락, 재즈, 클래식 음악의 듣기를 무제한 할 수 있습니다. 곡은 직접 구입할 수 없지만, 굳이 구입하지 않더라도, 원하는 음악을 찾아서 리스트를 만들어 놓으면 언제든지 들을 수 있습니다. 이 사이트에선 곡에 대한 저작권 문제를 어떻게 해결하는지는 모르겠지만, 암튼 대단한 사이트임에 틀림 없습니다. 전체 사이트가 RIA기반인 Flex를 통해서 만들어진 것 같습니다. 암튼 사용자 UI 부터 자신만의 사이트를 위젯을 통해서 변경할 수 있고, 정말 대단한 사이트입니다. 이젠 웹의 세상이 온것 같습니다. 왠만한 것들은 브라우저 하나만 있으면 전부 해결됩니다. 굳이 어플리케이션을 컴퓨터에 설치 할 필요가 없네요. 이 사이트의 ..

요즘 많은 사람들이 블로그를 사용하고 있습니다. 자기만의 주제를 가지고 다양한 이야기들과 화제를 올려놓고 수많은 방문자를 맞이하는 블로거들이 적지 않습니다. 저의 블로그는 하루 평균 100여명 정도만 들어오는 아주 아주 적은 방문자를 기록하는 블로그이긴 하지만, 제가 좋아서 쓰는 것이기 때문에 방문객에 대해서는 연연하지 않습니다. 그리고 내가 정보를 스크랩하는 기능으로도 사용하기 때문에 오히려 제 블로그는 저에게 더 유용한 툴이기도 하지요. 블로그가 확대되면서 블로거들을 상대로한 설치형 광고시스템들이 많이 선보이고 있습니다. 가장 유명한 것이 구글의 애드센스 입니다. 요즘에는 다음에서도 ViewAD 라는 광고툴을 선보이더라구요. 올블로그 도 있고, 기타 등등의 여러가지 설치형 광고들이 많고, 몇몇 블로거..

하하.. 일종의 미국식 유머인가요? 트위터가 트래픽이 초과 되면 아래와 같은 화면을 보여주네요. 새들이 고래를 들어 올리는 이미지... 트위터는 여러모로 재치가 넘치네요. ^^ 아이디어를 참조할만 하네요. 으음.. 그러고보니 새들도 고래를 들어올릴 수 있겠네요. 그쵸???

웹개발을 할때 가장 고민되는 부분 중 하나가 크로스 웹브라우징 테스트 입니다. 요즘은 정말 브라우저 전쟁인것 처럼 각종 브라우저가 다양하게 쏟아져 나오고 있습니다. 한국도 이제 IE6가 대세인 시대는 지난것 처럼 보입니다. 지금도 IE6 가 70%정도의 점유율을 지니고 있지만, 점차 점유율이 떨어지고, 향후 5년 이내에는 거의 없어질지도 모릅니다. 이유는 윈도우 XP 가 종말을 고하게 되면 더 이상 기본적인 브라우저로 IE6가 설치되지 않기 때문입니다. 물론 윈도우 XP 를 고집하시는 분들도 계시겠지만, 대세가 대세인지라, 윈도우 XP 에서도 IE8 설치가 가능하죠. ^^ 웹개발시 웹기획자나 웹디자이너 및 웹프로그래머들은 항상 기본적인 몇가지 브라우저는 테스트를 반드시 해야 합니다. 기본적으로 현재 시장..