검색

북큐브서점

마이페이지

로그아웃
  • 북캐시

    0원

  • 적립금

    0원

  • 쿠폰/상품권

    0장

  • 무료이용권

    0장

자동완성 기능이 꺼져 있습니다.

자동완성 끄기

네이버 인증이 완료되었습니다.

이미 북큐브 회원인 경우북큐브 ID로 로그인하시면, SNS계정이 자동으로 연결됩니다.

SNS 계정으로 신규 가입하기SNS계정으로 로그인 시 해당 SNS 계정으로 북큐브에 자동 가입되며 간편하게 로그인이 가능합니다.

비밀번호 찾기

북큐브 고객센터 : 1588-1925

아이디 찾기

북큐브 고객센터 : 1588-1925

아이디 조회 결과

비밀번호 조회 결과

으로
비밀번호를 발송했습니다.

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

실무자가 꼭 알아야 할 반응형 웹 기술의 모든 것!

도서 이미지 - Do it! 반응형 웹 페이지 만들기

김운아

이지스퍼블리싱 (주) 출판|2021.03.26

0.0(0명)

서평(0)

시리즈 가격정보
전자책 정가 13,000원
구매 13,000원+3% 적립
출간정보 2021.03.26|PDF|77.15MB
소득공제 여부 가능 (대여는 제외)

10년소장 안내

10년소장은 장기대여 상품으로 구매 상품과는 달리 다양한 프로모션 및 폭넓은 할인 혜택 제공이 가능합니다.

프로모션이 없는 경우 구매 상품과 가격이 동일하지만 프로모션이 진행되게 되면 큰 폭의 할인 및 적립이 제공됩니다.

close

지원 단말기 : IOS 11.0 이상, Android 4.1 이상, PC Window 7 OS 이상 지원 듣기, 스크랩 (형광펜, 메모), 본문 검색 불가

책 소개 이미지

책소개

개발자는 물론 기획자, 디자이너도 알아야 하는 반응형 웹의 필수 기술!
실제 웹 페이지를 반응형 웹으로 변환하는 과정 대공개!

서비스 기획, 웹 디자인, 개발까지 1인 3역을 해내는 저자가 가장 효율적으로 반응형 웹사이트를 제작할 수 있는 방법과 노하우를 알려 준다. 헷갈리기 쉬운 반응형 웹의 기본 개념부터 플렉서블 박스, 가변 그리드, 미디어 쿼리, 뷰포트와 같은 핵심 기술까지 예제로 실습하는 전 과정을 담았다.
또한 실제 웹사이트의 구조를 잡고 콘텐츠를 배치하는 레이아웃 디자인과 HTML5, CSS3로 제작하는 과정도 자세히 들어 있다. 이 과정을 모두 완료하면 평범했던 기존 웹사이트도 다양한 화면 크기에 대응하는 반응형 웹사이트로 전환하고, 웹사이트의 유지 보수와 비용 감소, 검색 엔진 최적화까지 가능하다.

(※ 이 책은 2017년에 출간된《Do it! 반응형 웹 만들기》의 전면 개정판으로 최신 자료와 독자 의견을 반영하여 만들었습니다.)

목차

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

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

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

저자소개

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

서평(0)

별점으로 평가해주세요.

서평쓰기

스포일러가 포함되어 있습니다.

0.0

(0명)

ebook 이용안내

  • 구매 후 배송이 필요 없이 다운로드를 통해 이용 가능한 전자책 상품입니다.
  • 전자책 1회 구매로 PC, 스마트폰, 태블릿 PC에서 이용하실 수 있습니다.
    (도서 특성에 따라 이용 가능한 기기의 제한이 있을 수 있습니다.)
  • 책파일 내 판권정보 정가와 북큐브 사이트 정가 표시가 다를 수 있으며, 실제 정가는 사이트에 표시된 정가를 기준으로 합니다.
  • 적립금 지급은 적립금 및 북큐브 상품권으로 결제한 금액을 뺀 나머지가 적립금으로 지급됩니다.
    (적립금 유효기간은 마이페이지>북캐시/적립금/상품권>적립금 적립내역에서 확인 가능합니다.)
  • 저작권 보호를 위해 인쇄/출력 기능은 지원하지 않습니다.
  • 구매하신 전자책은 “마이페이지 > 구매목록” 또는 “북큐브 내서재 프로그램 > 구매목록”에서 다운로드할 수 있습니다.
  • 스마트폰, 태블릿PC의 경우 북큐브 어플리케이션을 설치하여 이용할 수 있습니다. (모바일 페이지 바로가기)
  • PC에서는 PC용 내서재 프로그램을 통해 도서를 이용하실 수 있습니다.
  • ID 계정 당 총 5대의 기기에서 횟수 제한 없이 이용하실 수 있습니다.
TOP