제주에서 작은 IT 사업을 하고 있는 유지 아빠가 보고 듣고 느끼는 진솔한 이야기를 나누는 공간입니다.

웹 & IT/웹표준 HTML, CSS & PHOTOSHOP 21

웹에서 사용하는 웹 아이콘 사이트 소개

오래전에 웹에서 사용하는 아이콘들은 전부 비트맵으로 만들어서 사용하고 했습니다. 그때의 개고생이란. ㅠㅠ 하지만 현대 웹에서는 더 이상 그런 비 효율적인 작업을 하지 않죠. 웹 표준 시대와 더불어 아이콘이 웹 폰트 형식으로 세상에 출현한 이후에는 더이상 비트맵 방식의 아이콘은 사용하지 않게 되었습니다. (뭐 지금도 사용하는 경우는 종종 보곤 합니다만.) 특히 부트스트랩의 사용과 더불어 웹폰트 형식의 아이콘이 보편화 되면서 다양하고, 저작권 문제도 없는 웹용 아이콘을 제공하는 사이트들이 있어서 소개합니다. 1. 부트스트랩 아이콘 icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.ge..

웹 페이지의 무게를 줄이는 10가지 빠르고 간단한 방법

지금 블로그에 게시하는 글의 원본은 사이트포인트닷컴의 해당 기사에 있습니다.원본 클릭 2013년에 웹 페이지의 크기는 32퍼센트나 증가했다고 합니다. 거의 모든 사이트의 무게(페이지의 크기) 가 증가한 것인데요. 사실 이렇게 사이트의 무게가 커지면 커질 수록 사용자들과 전체 인터넷에는 악영향을 끼치게 됩니다. 사이트의 무게가 증가함에 따라 전체적인 인터넷의 속도가 느려지게 되고, 사용자들 또한 인터넷이 느려짐에 따라 일 처리를 하거나, 영화를 보거나, 기타 인터넷과 관련된 모든 행위 자체에 영향을 미칠 수 밖에 없습니다. 요즘은 모바일 인터넷 사용자 수 또한 많은데요, 인터넷 사이트의 무게가 커지면 커질 수록 모바일 인터넷 사용자들은 느린 로딩 시간과 트래픽 양이 많아짐에 따른 요즘 증가 등 이런 폐단들..

fixie.js 자동 텍스트 생성기

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

이제 실전이다 HTML5&CSS3 사이트 제작의 모든 것- 판매중

[신간소개] 이제 실전이다 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 사이트 제작의 모든 것" 예약 판매 시작

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

[출간예정] 이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것: 사이트 제작과 리뉴얼, 쇼핑몰, 모바일, 가변길이 사이트까지

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

jQuery 라이트박스 플러그인 소개

요즘 가장 많이 사용하는 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..

47개의 놀라운 CSS3 애니메이션

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

웹표준 그리고 HTML5 & CSS3

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

CSS 박스 모델 이해하기

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

4. CSS 코딩하기

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

오늘의 강좌 | Save for web 옵션 알아보기

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

3. 포토샵 파일을 잘라내자

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

세부 HTML코딩

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

사이트 기본 구조 잡기

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

HTML 코딩하기

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

HTML 과 CSS 웹 표준 알아보기 2

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

HTML 과 CSS 웹 표준 알아보기

웹 표준이란 무엇인가? 웹 표준은 간단하게 정의하면 구조(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..