자료검색

실제 반응형 웹 사이트를 디자인하고 개발하는 모든 과정을 한 권에 담았다!

서비스 기획, 웹 디자인, 개발까지 1인 3역을 해내는 멀티플레이형 웹 퍼블리셔인 저자가 가장 효율적으로 반응형 웹 사이트를 제작할 수 있는 노하우를 이 책에 집대성해 놓았다. 이 책은 헷갈리기 쉬운 반응형 웹의 기본 개념부터 최신 기술인 플렉서블 박스에 대한 내용까지 직접 예제로 실습해 보며 쉽게 배울 수 있다.

뿐만 아니라 실제 웹사이트 메인 페이지의 구조 잡는 것부터 콘텐츠를 배치하는 레이아웃 디자인, HTML5와 CSS3 코드를 통한 개발까지 모든 과정을 자세히 소개한다. 이 책을 마스터하고 나면 평범했던 웹 사이트도 다양한 화면 크기에 대해 유연하게 대응할 수 있으며, 유지 보수 비용 감소, 검색 엔진 최적화까지 노릴 수 있다.

왜 《Do it! 반응형 웹 만들기》인가?
다양한 화면 크기의 모바일 기기에 최신 기술로 대응하기 위한 해답!
다양한 디바이스가 가지는 각각의 화면 크기에 대응할 수 있고 검색 엔진에 최적화까지 가능한 ‘반응형 웹’은 기본이 되었다. HTML5, CSS3와 함께 웹 퍼블리싱의 필수 요소가 된 반응형 웹 기술을 이 책을 통해 마스터해 보자! 다양한 디바이스 시장을 목표로 웹 퍼블리싱을 고려하고 있는 개발자, 디자이너, 기획자 그리고 퍼블리셔라면 《Do it! 반응형 웹 만들기》에서 해답을 얻을 수 있을 것이다.

반드시 익혀야 할 반응형 웹 기술인 가변 그리드, 미디어 쿼리, 뷰포트부터
최신 웹 기술 ‘플렉서블 박스’까지!
이 책은 헷갈리기 쉬운 반응형 웹의 기본 개념부터 가변 그리드, 미디어 쿼리, 뷰포트 그리고 최신 기술인 플렉서블 박스에 대한 내용까지 실습을 해보며 쉽게 배울 수 있다. 특히 ‘플렉서블 박스’는 기존의 웹 기술로는 해결하기 어려웠던 콘텐츠의 순서, 배치, 높이 등 레이아웃 설정 문제를 해결할 수 있는 새로운 웹 기술로, 실무에서의 작업 시간을 반으로 줄여줄 것이다.

단순한 예제 NO, 완벽한 실무 지향의 예제 YES!
실제 웹 사이트를 디자인하고 개발하는 모든 과정을 담았다!
《Do it! 반응형 웹 만들기》에 수록된 예제는 단순히 웹 페이지만을 만드는 것이 아니다. 콘텐츠를 배치하는 레이아웃 디자인부터 실제 HTML5과 CSS3 코드를 통한 개발까지 모든 과정을 실습할 수 있다. 둘째마당에서는 플랫 디자인의 웹 사이트를, 셋째마당에서는 기업 소개 페이지를 직접 만들어 본다. 실제 실무에 적용해도 손색이 없을 정도의 예제를 수록했으며, 책을 따라 하다 보면 어느새 최신 경향의 프런트엔드 웹 개발을 하고 있는 자신을 발견할 수 있을 것이다. 실제 완성 예제는 다음의 URL을 통해 확인해 볼 수 있다.

- 플랫 디자인 웹 사이트 : https://goo.gl/w9eng6
- 기업 소개 웹 페이지 : https://goo.gl/ZTeBhW

반응형 웹을 제작하며 한번쯤 부딪히는 문제해결 노하우 공개!
HTML5 요소를 지원하지 않는 브라우저에 대응하는 방법, 고해상도 기기에서 이미지가 깨지거나 뭉개지는 현상을 막을 수 있는 최신 기술 등 문제해결을 위한 도움말과 노하우를 모두 담았다. 반응형 웹을 제작하는 도중에 부딪힐 수 있는 문제를 해결할 수 있게 도와줄 것이다. 완성된 반응형 웹사이트를 테스트하는 다섯 가지 방법도 소개한다.

저자의 완성 파일은 물론, 동영상 강의까지 제공!
모든 예제 파일은 이지스퍼블리싱 홈페이지의 [자료실]에서 무료로 다운로드할 수 있다. 실습을 진행하며 웹 브라우저의 [검사] 기능을 통해 완성된 예제를 확인하며 실습을 진행할 수 있도록 완성 파일을 준비했다. 또한 무료로 제공되는 저자 직강 동영상 강의도 놓치지 말고 활용하자! 스마트폰으로도 볼 수 있어 이동 중에도 예습 ㆍ 복습할 수 있다.

- 예제 파일 다운로드 : www.easyspub.com ▶ [자료실] 게시판
- 동영상 강의 : www.easyspub.com ▶ [동영상 강의] 게시판

함께 공부할 사람들을 만나는 곳,
‘Do it! 스터디룸’에서 함께 공부하자!
혼자 공부하기 부담스러울 때는 스터디 카페인 ‘Do it! 스터디룸(cafe.naver.com/doitstudyroom)’을 이용해 보자. 이곳에서 함께 공부할 스터디 멤버를 찾을 수 있다. 그 외에도 이 책에 대한 질문이나 의견은 이지스퍼블리싱 홈페이지의 [질문 답변] 게시판에 올리면 답변을 얻을 수 있다.
- 함께 공부할 스터디 멤버를 찾고 싶을 때 : cafe.naver.com/doitstudyroom ▶ Do it! 스터디룸
- 책에 대한 질문이나 의견이 있을 때 : www.easyspub.com ▶ [질문 답변] 게시판

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

01 반응형 웹 기본 개념 이해하기

01-1 반응형 웹이란?
반응형 웹이 세상에 나온 이유
반응형 웹이란?

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

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

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

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

02 px을 %로 바꾸기 - 가변 그리드

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-1 CSS 파일로 분리하기
스타일 코드를 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-1 CSS 파일로 분리하기
스타일 코드를 CSS 파일로 분리하기

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

[스페셜] 실무자들이 꼭 알아야 할 반응형 웹 문제해결 노하우

01 반응형 웹 사이트 테스트하기
02 하위 브라우저에 대응하기
03 고해상도 기기 이미지 대응하기
[도전★ Quiz!]