장바구니 담기 close

장바구니에 상품을 담았습니다.

장바구니로 계속쇼핑하기
Do it 반응형 웹 페이지 만들기
미리보기

Do it 반응형 웹 페이지 만들기

  • 김운아
  • |
  • 이지스퍼블리싱
  • |
  • 2021-03-26 출간
  • |
  • 344페이지
  • |
  • 188 X 257 mm
  • |
  • ISBN 9791163032380
판매가

20,000원

즉시할인가

18,000 원

배송비

무료배송

(제주/도서산간 배송 추가비용:3,000원)

추가상품
상품선택
독서대 7,900원 독서대 선택안함 0원
수량
+ -
총주문금액
18,000원
장바구니 구매하기

※ 스프링제본 상품은 반품/교환/환불이 불가능하므로 신중하게 선택하여 주시기 바랍니다.

북스크린영상으로 만나보는 한 권의 책 이야기

출판사서평




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

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

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

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

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

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

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


목차


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

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!]
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!]
추천포스트

교환 및 환불안내

도서교환 및 환불
  • ㆍ배송기간은 평일 기준 1~3일 정도 소요됩니다.(스프링 분철은 1일 정도 시간이 더 소요됩니다.)
  • ㆍ상품불량 및 오배송등의 이유로 반품하실 경우, 반품배송비는 무료입니다.
  • ㆍ고객님의 변심에 의한 반품,환불,교환시 택배비는 본인 부담입니다.
  • ㆍ상담원과의 상담없이 교환 및 반품으로 반송된 물품은 책임지지 않습니다.
  • ㆍ이미 발송된 상품의 취소 및 반품, 교환요청시 배송비가 발생할 수 있습니다.
  • ㆍ반품신청시 반송된 상품의 수령후 환불처리됩니다.(카드사 사정에 따라 카드취소는 시일이 3~5일이 소요될 수 있습니다.)
  • ㆍ주문하신 상품의 반품,교환은 상품수령일로 부터 7일이내에 신청하실 수 있습니다.
  • ㆍ상품이 훼손된 경우 반품 및 교환,환불이 불가능합니다.
  • ㆍ반품/교환시 고객님 귀책사유로 인해 수거가 지연될 경우에는 반품이 제한될 수 있습니다.
  • ㆍ스프링제본 상품은 교환 및 환불이 불가능 합니다.
  • ㆍ군부대(사서함) 및 해외배송은 불가능합니다.
  • ㆍ오후 3시 이후 상담원과 통화되지 않은 취소건에 대해서는 고객 반품비용이 발생할 수 있습니다.
반품안내
  • 마이페이지 > 나의상담 > 1 : 1 문의하기 게시판 또는 고객센터 1800-7327
교환/반품주소
  • 경기도 파주시 문발로 211 1층 / (주)북채널 / 전화 : 1800-7327
  • 택배안내 : CJ대한통운(1588-1255)
  • 고객님 변심으로 인한 교환 또는 반품시 왕복 배송비 5,000원을 부담하셔야 하며, 제품 불량 또는 오 배송시에는 전액을 당사에서부담 합니다.