Do it! 반응형 웹 페이지 만들기 (실무자가 꼭 알아야 할 반응형 웹 기술의 모든 것! | 개정판)

김운아

저자는서비스기획부터웹디자인,개발까지1인3역을해내는멀티플레이형디자이너겸풀스택엔지니어다.계원예술대학교에서디자인을전공하고플래시초창기시절부터웹의변화과정을모두경험했다.UI/UX,프런트엔드,백엔드까지웹전반에걸쳐두루섭렵한기술을바탕으로플렉서블디지털에이전시인래디클래식을창업했다.
그동안의노하우를집대성하여만든《Doit!반응형웹페이지만들기》는반응형웹디자인을더욱효과적으로구현하고,미래를이끌어갈새로운웹디자인의방향까지명쾌하게설명한다.현재저자는HTML5+CSS3강의와수많은홈페이지를제작하면서쌓은풍부한경험을바탕으로기획자와디자이너,개발자가웹사이트를가장효율적으로만들수있는방법을공유하고있다.

첫째마당반응형웹을위한기본기술들

01반응형웹기본개념이해하기
01-1반응형웹이란?
반응형웹이세상에나온이유
반응형웹이란?

01-2왜반응형웹으로만들어야하나?
유지보수가간편하다!
모바일점유율의증가!
마케팅에유리하다!
검색엔진최적화가가능하다!
미래지향적기술이다!

01-3사례로알아보는반응형웹
세계가주목하는반응형웹!
해외의반응형웹사례
국내의반응형웹사례

01-4반응형웹학습과제작을위한준비작업
웹브라우저준비하기
코드편집기준비하기
예제파일준비하기
호스팅서버준비하기
FTP프로그램준비하기

01-5반응형웹제작을위한핵심기술맛보기
픽셀은한계가있다!-가변그리드
|코딩해보세요!|고정크기의박스를가변크기의박스로변환하기
미디어쿼리와뷰포트
|코딩해보세요!|뷰포트비교하기
|코딩해보세요!|미디어쿼리사용하기
떠오르고있는기술-플렉서블박스
[도전★Quiz!]

02px을%로바꾸기-가변그리드
02-1본격적으로가변그리드배우기
가변그리드공식이해하기
|코딩해보세요!|서로다른크기의박스를가변크기로변환하기

02-2가변마진과가변패딩이해하기
간격을자유자재로!가변마진설정하기
|코딩해보세요!|고정마진을가변마진으로변환하기
가변패딩을적용하는두가지방법
고정크기의마진과패딩을위해calc함수이용하기
|코딩해보세요!|가변패딩직접적용하기

02-3폰트도자유자재로!가변폰트이용하기
글자를가변적이게만들어주는가변폰트
em단위의상속문제를해결해주는rem단위
진정한가변폰트-vw,vh,vmin,vmax단위

02-4멀티미디어요소가변적으로만들기-가변이미지와가변동영상
비율에상관없이가변적인멀티미디어요소만들기
유튜브나비메오같은멀티미디어요소를가변적으로만들기
[도전★Quiz!]

03미디어쿼리와뷰포트
03-1화면의크기나환경에따라웹사이트를변경하는기술,미디어쿼리
미디어쿼리의기본문법
미디어쿼리를적용하려면?-링크방식
미디어쿼리사용시주의사항
|코딩해보세요!|미디어쿼리사용해웹사이트구조변경하기

03-2화면의보이는영역을다루는기술,뷰포트
뷰포트영역확인하기
[도전★Quiz!]

04새로운웹기술,플렉서블박스
04-1플렉서블박스기본개념이해하기
플렉서블박스의기본개념

04-2플렉서블박스기술익히기
플렉서블박스로작동시키기위한기본설정
플렉스아이템의배치방향설정하기
플렉스아이템을여러줄로배치하기
플렉스아이템의배치방향과여러줄배치를한번에설정하기
주축방향으로다양하게플렉스아이템배치하기
교차축방향으로다양하게플렉스아이템배치하기
교차축방향으로플렉스아이템을개별적으로배치하기
여러줄인플렉스아이템을교차축방향으로다양하게배치하기
플렉스아이템의배치순서바꾸기
플렉스아이템의크기늘이고줄이기
|코딩해보세요!|플렉서블박스이용해목업웹사이트만들기
[도전★Quiz!]

둘째마당실전!반응형웹사이트만들기
-플렉서블박스

05반응형웹사이트준비작업하기
05-1웹사이트구조다지기
1단계:웹사이트구조살펴보기
2단계:폴더와기본파일구성하기
3단계:기본구조와기본스타일작업하기

06메인페이지작업하기
06-1메인페이지구조작업하기
1.인포메이션영역의구조작업하기
2.헤더영역의구조작업하기
3.슬라이더영역의구조작업하기
4.최근글영역,인기글영역의구조작업하기
5.갤러리영역의구조작업하기
6.인기검색어영역의구조작업하기
7.배너영역의구조작업하기
8.소셜네트워크영역의구조작업하기
9.푸터영역의구조작업하기

06-2메인페이지반응형웹작업하기
1.인포메이션영역의반응형웹작업하기
2.헤더영역의반응형웹작업하기
3.슬라이더영역의반응형웹작업하기
4.최근글영역,인기글영역의반응형웹작업하기
5.갤러리영역의반응형웹작업하기
6.인기검색어영역의반응형웹작업하기
7.배너영역의반응형웹작업하기
8.소셜네트워크영역의반응형웹작업하기
9.푸터영역의반응형웹작업하기

07서브페이지작업하기
07-1서브페이지구조작업하기
1.기본구조작업하기
2.소개페이지의구조작업하기
3.갤러리페이지의구조작업하기
4.게시판페이지의구조작업하기

07-2서브페이지반응형웹작업하기
1.기본스타일작성하기
2.소개페이지의반응형웹작업하기
3.갤러리페이지의반응형웹작업하기
4.게시판페이지의반응형웹작업하기

08마무리작업하기
08-1CSS파일로분리하기
스타일코드를CSS파일로분리하기

08-2자바스크립트이용해메뉴영역작업하기
메뉴가나타나거나감춰지는토글버튼만들기

셋째마당실전!기존의속성으로반응형웹사이트만들기
-가변그리드,미디어쿼리,뷰포트

09반응형웹사이트준비작업하기
09-1웹사이트구조다지기
1단계:웹사이트구조살펴보기
2단계:폴더와기본파일구성하기
3단계:기본구조와기본스타일작업하기

10반응형웹페이지작업하기
10-1반응형웹구조작업하기
1.헤더영역구조작업하기
2.슬라이더영역의구조작업하기
3.디스플레이영역의구조작업하기
4.프로모션영역의구조작업하기
5.구분선영역의구조작업하기
6.최근작업영역의구조작업하기
7.구분선영역작업하기
8.최근글영역의구조작업하기
9.연락처영역의구조작업하기
10.푸터영역의구조작업하기

10-2반응형웹페이지작업하기
1.헤더영역의반응형웹작업하기
2.슬라이더영역의반응형웹작업하기
3.디스플레이영역의반응형웹작업하기
4.프로모션영역의반응형웹작업하기
5.최근작업영역의반응형웹작업하기
6.최근글영역의반응형웹작업하기
7.연락처영역의반응형웹작업하기
8.푸터영역의반응형웹작업하기

11마무리작업하기
11-1CSS파일로분리하기
스타일코드를CSS파일로분리하기

11-2자바스크립트이용해메뉴영역작업하기
메뉴가나타나거나감춰지는토글버튼만들기

[스페셜]실무자들이꼭알아야할반응형웹문제해결노하우
01반응형웹사이트테스트하기
02하위브라우저에대응하기
03고해상도기기이미지대응하기
[도전★Quiz!]
09반응형웹사이트준비작업하기
09-1웹사이트구조다지기
1단계:웹사이트구조살펴보기
2단계:폴더와기본파일구성하기
3단계:기본구조와기본스타일작업하기

10반응형웹페이지작업하기
10-1반응형웹구조작업하기
1.헤더영역구조작업하기
2.슬라이더영역의구조작업하기
3.디스플레이영역의구조작업하기
4.프로모션영역의구조작업하기
5.구분선영역의구조작업하기
6.최근작업영역의구조작업하기
7.구분선영역작업하기
8.최근글영역의구조작업하기
9.연락처영역의구조작업하기
10.푸터영역의구조작업하기

10-2반응형웹페이지작업하기
1.헤더영역의반응형웹작업하기
2.슬라이더영역의반응형웹작업하기
3.디스플레이영역의반응형웹작업하기
4.프로모션영역의반응형웹작업하기
5.최근작업영역의반응형웹작업하기
6.최근글영역의반응형웹작업하기
7.연락처영역의반응형웹작업하기
8.푸터영역의반응형웹작업하기

11마무리작업하기
11-1CSS파일로분리하기
스타일코드를CSS파일로분리하기

11-2자바스크립트이용해메뉴영역작업하기
메뉴가나타나거나감춰지는토글버튼만들기

[스페셜]실무자들이꼭알아야할반응형웹문제해결노하우
01반응형웹사이트테스트하기
02하위브라우저에대응하기
03고해상도기기이미지대응하기
[도전★Quiz!]

왜『Doit!반응형웹페이지만들기』인가?
다양한모바일화면크기에대응하기위한해결책!
‘반응형웹’은다양한디바이스화면크기에대응할수있고,검색엔진최적화까지가능하여많은웹퍼블리셔가선호하는기술이다.HTML5,CSS3뿐만아니라웹의필수요소가된반응형웹기술을알아야최신웹퍼블리싱을할수있다.반응형웹퍼블리싱을고려하는웹퍼블리셔,개발자,디자이너라면『Doit!반응형웹페이지만들기』에서해답을얻을수있다.

반응형웹의핵심기술인플렉서블박스,가변그리드,미디어쿼리,뷰포트를Doit!실습으로따라하며확실하게익히자!
이책은반응형웹에서놓치지말아야할플렉서블박스,가변그리드,미디어쿼리,뷰포트를여러번실습하면서확실하게알려준다.특히플렉서블박스는기존의웹기술로해결하기어려웠던콘텐츠의순서,배치,높이등레이아웃설정문제를해결할때꼭필요하다.이과정을잘따라하고익힌다면실무에서반응형웹을자유자재로다룰수있을것이다.

단순한예제가아닌,실무를위한검증된예제를담았다!
『Doit!반응형웹페이지만들기』에수록된실습예제는단순히웹페이지를만드는것이아니다.콘텐츠를배치하는레이아웃디자인부터실제HTML5과CSS3작성까지모든과정을다룬다.첫째마당에서는이론을쉽게설명하며,둘째마당에서는플랫디자인의웹사이트를만들고,셋째마당에서는기업소개페이지를직접만드는것으로마무리한다.실제실무에적용해도손색이없을정도의예제를수록했으며,이책을따라하다보면어느새최신웹퍼블리싱을다루는자신을발견할수있을것이다.

실무에서발생할수있는반응형웹의문제를꼼꼼하게정리!
이책은반응형웹을제작한다면분명히만날수있는다양한문제와그해결방법까지친절하게알려준다.‘HTML5요소를지원하지않는브라우저를대응하는방법’,‘고해상도기기에서이미지가깨지는현상을막을수있는방법’등저자의10년치노하우를모두담았다.또한완성된반응형웹사이트를쉽고빠르게테스트하는4가지방법도들어있으니끝까지책을읽기바란다.

완성된예제소스는물론,저자유튜브채널제공!
이책의모든예제파일은이지스퍼블리싱홈페이지의[자료실]에서무료로내려받을수있다.독자의학습을돕기위해예제소스를직접코딩해볼수있는‘실습파일’과‘전체완성파일’로나누어제공한다.또한이번에새롭게개설한저자의유튜브채널에서는저자와소통하고책과관련된다양한정보를얻을수있다.
-예제파일:www.easyspub.co.kr▶[자료실]게시판
-저자유튜브채널:http://bit.ly/3cmmhU2

함께배우고,나누고,성장하는‘Doit!스터디룸’에서만나요!
혼자공부하다가궁금한내용이생기거나공부를포기하고싶을때는‘Doit!스터디룸’을활용해보자.이책을공부하는다른독자를만나서로도움을주고받으며나누다보면목표를완성할수있다.스터디하면서성장하는뿌듯함을느낄뿐아니라이책을끝까지포기하지않고마칠수있다.
-Doit!스터디룸:cafe.naver.com/doitstudyroom

★이책의대상독자★
-프런트엔드웹개발에관심있는대학생
-기존홈페이지를반응형으로바꾸고싶은웹퍼블리셔
-반응형웹디자인을공부하려는웹디자이너
-최신웹기술을알고싶은웹기획자