본문내용 바로가기
MD의선택 무료배송 이벤트 사은품 소득공제

Do it! 반응형 웹 만들기 실무자가 꼭 알아야 할 최신 반응형 웹 기술을 한 권에!

김운아 지음 | 이지스퍼블리싱 | 2017년 06월 04일 출간 (1쇄 2017년 05월 25일)
클로버 리뷰쓰기

이 책의 다른 상품 정보

  • 정가 : 20,000원
    판매가 : 18,000 [10%↓ 2,000원 할인]
  • 통합포인트 :
    [기본적립] 1,000원 적립 [5% 적립] [추가적립] 5만원 이상 구매 시 2천원 추가적립 안내 [회원혜택] 실버등급 이상, 3만원 이상 구매 시 2~4% 추가적립 안내
  • 추가혜택 : 포인트 안내 도서소득공제 안내 추가혜택 더보기
  • 배송비 : 무료 배송비 안내
  • 배송일정 : 서울특별시 종로구 세종대로 기준 지역변경
    지금 주문하면 내일(26일,토) 도착 예정 배송일정 안내
  • 바로드림 : 인터넷으로 주문하고 매장에서 직접 수령 안내 바로드림 혜택
    휴일에는 바로드림 픽업으로 더 빨리 받아 보세요. 바로드림 혜택받고 이용하기

이 책의 이벤트 해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.

  • 이지스퍼블리싱 <된다! 오늘의 할일> To-do 리스..
    2019.06.19 ~ 2020.10.31
  • 프론트엔드 개발을 위한 약간의 가이드
    2018.02.02 ~ 2020.12.31
  • Do it~! 이지스퍼블리싱의 도서를 편리하게 모아 보세요
    2017.11.22 ~ 2020.12.31
  • 책을 통해 성장해나가는 개발자를 응원합니다.
    2017.06.22 ~ 2025.07.31
상품상세정보
ISBN 9791187370888(1187370886)
쪽수 344쪽
크기 189 * 259 * 17 mm /730g 판형알림

책소개

이 책이 속한 분야

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

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

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

상세이미지

반응형 웹 만들기(Do it!) 도서 상세이미지

저자소개

저자 : 김운아

저자 김운아는 계원예대에서 디자인을 전공한 저자는 서비스 기획, 웹 디자인, 개발까지 1인 3역을 해내는 멀티플레이형 웹 퍼블리셔이다. 플래시 초창기 시절부터 웹의 변화 과정을 하나씩 경험하며 UI/UX, 프론트 엔드, 백 엔드까지 웹 전반에 걸쳐 두루 섭렵하며 디지털 에이전시를 창업하기도 했다.
이제 그동안의 노하우를 집대성해 더욱 효과적으로 구현할 수 있는 반응형 웹 디자인 방법, 그리고 미래를 이끌어갈 새로운 방향의 반응형 웹 디자인 방법까지 이 책을 통해 명쾌하게 설명하고 있다.
전공이나 경력에 상관없이 누구나 웹 퍼블리셔가 될 수 있다고 자신있게 말하는 저자는 ‘HTML5 + CSS3’ 강의와 수많은 홈페이지 제작 경험을 통해 쌓은 풍부한 감각을 토대로 기획자와 디자이너 그리고 개발자가 가장 효율적으로 웹 사이트를 제작할 수 있는 방법을 공유하고 있다.

목차

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

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!]

추천사

정은경(교수)

저자의 웹 퍼블리싱 실무 경험이 통째로 압축되어 녹아 있는 책!
저자는 디지털 미디어 전반에 걸쳐 다양한 실무 경험을 가지고 있습니다. 풍부한 반응형 웹 개발 경험을 통해 쌓은 노하우를 매우 현실적이면서도 유익한 기술과 이... 더보기

이민수(NHN 픽셀큐브 게임기획)

모바일 게임 업계에서도 반응형 웹은 꼭 필요합니다
너무나 빠르게 변하는 모바일 분야에서 가장 화두가 되고 있는 것은 단연 멀티 플랫폼(Multi-Flatform)일 것입니다. 게임 업계 또한 예외가 아닙니다. 모바일 게임에... 더보기

이철희(인픽스 UI/UX 디자인)

낯설기만 했던 플렉서블 박스 기술이 간단 명료하게 정리되어 있어 감탄이 절로 났습니다
웹 관련 직종에 종사하고 있는 사람이라면 누구나 한 번쯤은 해상도 문제로 골치가 아팠던 경험이 있을 겁니다. 또한 다양한 기기와 OS, ... 더보기

출판사 서평

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

반드시 ... 더보기

Klover 리뷰 (0)

북로그 리뷰 (3) 전체보기 쓰러가기

도서 구매 후 리뷰를 작성하시면
결제 90일 이내 300원, 발송 후 5일 이내 400원, 이 상품의 첫 리뷰 500원의 포인트를 드립니다.

포인트는 작성 후 다음 날 적립되며, 도서 발송 전 작성 시에는 발송 후 익일에 적립됩니다.
북로그 리뷰는 본인인증을 거친 회원만 작성 가능합니다.
(※ 외서/eBook/음반/DVD/GIFT 및 잡지 상품 제외) 안내
  • 책을 공부하기에 앞서 HTML5/CSS에 대한 기본적인 개념을 알고 있어야됩니다.   반응형 웹의 개념과 왜 만들어야 하는지에 대한 내용이 잘 서술되어있고 어떻게 만들어야 하는지에 대한 내용도 순서대로 잘 구성되어있습니다.  그리고 예제 소스가 풍부하고 도움이 되는 코드가 많이 있습니다. 사이드 프로젝트할때 예제를 참고해가면서 만들면 많은 도움이 될 것 같습니다. 더보기
  • 반응형 웹 만들기 su**aud | 2019-11-26 | 추천: 0 | 5점 만점에 5점
    이 책을 시작하신분은 먼저 HTML태그와 자바스크립트에 대해 어느 정도 알고 오셔야 할 듯합니다. 태그들의 설명 보다는 사용방법이나 새로 나온 용어등에 대한 설명 위주가 많아서 입니다. 그리고 5장까지는 태그들 사용방법이 나오고 6장부터는 실습 위주로 나옵니다. 아마 이 정도로 만드시면 웹 사이트 하나는 거뜬하게 만드실 것 같네요~ 더보기
  • 반응형 웹 만들기 du**s1001 | 2017-06-22 | 추천: 0 | 5점 만점에 5점
    요즘에는 휴대용 IT 기기들이 다양하게 쏟아지고 있다.평균적으로 스마트폰과 피씨는 다 가지고 있고,태블릿피씨등을 이용하는 사람들도 많다. 그런 다양한 기기들을 통해웹사이트를 보는데기기와 호환이 되지 않는 웹사이트들을 볼 때면뒤로가기를 눌러버리고 싶을때가 많다. 그렇다고 해서 피씨와 휴대폰용의 웹사이트를 별개로 만들 수도 없는 일!반응형 웹은 PC나 휴대폰, TV등 기기마다 다른 환경에도최적화 된 웹사이트를 제공해주는 것을 말한다.어떤 기기를 사용하건간에 화면이나 환경에 맞게 자유자재로 변하는 웹이 반응형웹인것이다. 그런 반응형... 더보기

문장수집 (0) 문장수집 쓰기 나의 독서기록 보기
※구매도서의 문장수집을 기록하면 통합포인트 적립 안내

교환/반품/품절안내

※ 상품 설명에 반품/교환 관련한 안내가 있는 경우 그 내용을 우선으로 합니다. (업체 사정에 따라 달라질 수 있습니다.)

교환/반품/품절안내
반품/교환방법 마이룸 > 주문관리 > 주문/배송내역 > 주문조회 > 반품/교환신청 ,
[1:1상담>반품/교환/환불] 또는 고객센터 (1544-1900)

※ 오픈마켓, 해외배송주문, 기프트 주문시 [1:1상담>반품/교환/환불]
    또는 고객센터 (1544-1900)
반품/교환가능 기간 변심반품의 경우 수령 후 7일 이내,
상품의 결함 및 계약내용과 다를 경우 문제점 발견 후 30일 이내
반품/교환비용 변심 혹은 구매착오로 인한 반품/교환은 반송료 고객 부담
반품/교환 불가 사유
  • 소비자의 책임 있는 사유로 상품 등이 손실 또는 훼손된 경우
    (단지 확인을 위한 포장 훼손은 제외)
  • 소비자의 사용, 포장 개봉에 의해 상품 등의 가치가 현저히 감소한 경우
    예) 화장품, 식품, 가전제품(악세서리 포함) 등
  • 복제가 가능한 상품 등의 포장을 훼손한 경우
    예) 음반/DVD/비디오, 소프트웨어, 만화책, 잡지, 영상 화보집
  • 소비자의 요청에 따라 개별적으로 주문 제작되는 상품의 경우 ((1)해외주문도서)
  • 디지털 컨텐츠인 eBook, 오디오북 등을 1회 이상 다운로드를 받았을 경우
  • 시간의 경과에 의해 재판매가 곤란한 정도로 가치가 현저히 감소한 경우
  • 전자상거래 등에서의 소비자보호에 관한 법률이 정하는 소비자 청약철회 제한 내용에
    해당되는 경우
(1) 해외주문도서 : 이용자의 요청에 의한 개인주문상품으로 단순변심 및 착오로 인한 취소/교환/반품 시 ‘해외주문 반품/취소 수수료’ 고객 부담 (해외주문 반품/취소 수수료 : ①서양도서-판매정가의 12%, ②일본도서-판매정가의 7%를 적용)
상품 품절 공급사(출판사) 재고 사정에 의해 품절/지연될 수 있으며, 품절 시 관련 사항에 대해서는
이메일과 문자로 안내드리겠습니다.
소비자 피해보상
환불지연에 따른 배상
  • 상품의 불량에 의한 교환, A/S, 환불, 품질보증 및 피해보상 등에 관한 사항은
    소비자분쟁해결 기준 (공정거래위원회 고시)에 준하여 처리됨
  • 대금 환불 및 환불지연에 따른 배상금 지급 조건, 절차 등은 전자상거래 등에서의
    소비자 보호에 관한 법률에 따라 처리함

바로가기

  • 우측 확장형 배너 2
  • 우측 확장형 배너 2

최근 본 상품