간편결제, 신용카드 청구할인
네이버페이 1%
(네이버페이 결제 시 적립)
NH(올원페이)카드 12% (23,760원)
(3만원 이상 결제/최대 1만원 할인)
북피니언 롯데카드 30% (18,900원)
(최대할인 3만원 / 3만원 이상 결제)
EBS 롯데카드 20% (21,600원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 NEW 우리V카드 10% (24,300원)
(최대할인 3만원 / 3만원 이상 결제)
인터파크 현대카드 7% (25,110원)
(최대할인 3만원 / 3만원 이상 결제)
Close

반응형 웹 디자인

2013년 9월 9일 이후 누적수치입니다.

판매지수 36
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
정가

30,000원

  • 27,000 (10%할인)

    1,500P (5%적립)

할인혜택
적립혜택자동적립
배송정보
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서(319)

  • 사은품(2)

출판사 서평

요약

최근 웹 페이지에 접근할 수 있는 다양한 모바일 기기가 등장하면서 반응형 웹 디자인이 주목받기 시작했다. 이 책은 기존의 고정폭 기반 디자인을 어떻게 반응형 디자인으로 작성할 수 있는지에 대한 완벽한 가이드를 제공한다. 그리고 HTML5와 CSS3를 사용해 반응형 디자인 방법론을 한층 더 발전시킬 수 있는 방법을 제시한다. 아직까지 반응형 웹 디자인에 대해 다루는 자료가 많지 않은 국내 실정에서, 이 책은 프론트엔드 개발자와 디자이너에게 웹사이트를 어떻게 반응형 웹으로 제작할 수 있는지를 알려주는 좋은 지침서가 될 것이다.

소개

하나의 디자인으로 모든 환경에서 동작하는 웹 사이트 제작!

지금처럼 반응형 웹 디자인의 필요성이 크게 대두된 적이 없었다. 태블릿과 스마트폰 그리고 디지털 TV에 이르기까지 웹에 접근하는 데 사용되는 디바이스의 수가 크게 증가함에 따라, 다양한 스크린 크기와 이와 관련한 사용자 경험에 대해 많은 사항을 고려해야 한다. 반응형으로 제작된 웹 페이지는 현재의 디바이스뿐만 아니라 미래에 등장할 디바이스에도 디바이스에 최적화된 콘텐츠를 제공할 수 있다.

웹사이트가 모든 스크린 크기에서 아름답게 보일 수 있도록 '반응형 디자인' 방법론으로 웹사이트를 디자인하는 방법을 배운다. 그리고 HTML5와 CSS3로 반응형 웹 디자인을 향상시킨다. 이 책은 프론트엔드 웹 개발자에게 미래가 될 새로운 기술과 기법을 이해하는 데 실질적인 도움을 줄 것이다.

이 책에서 다루는 내용

- 웹 디자인에서 가장 인기 있는 주제인 반응형 웹 디자인의 정의와 이를 마스터해야 하는 이유
- 간결하고 빠르며, 풍부한 의미를 지닌 HTML5의 작성 방법과 주요 기능
- CSS3 미디어 쿼리를 사용해 미디어별로 다른 스타일을 적용하고 이를 디자인에 통합하는 방법
- 웹 페이지와 미디어를 유동형으로 만드는 방법
- 이미지 대신 CSS3로 배경색 그레이디언트와 텍스트 섀도, 박스 섀도를 만드는 방법
- 모더나이저로 구형 브라우저의 단점을 수정하는 방법

이 책의 대상 독자

모바일용 웹사이트와 대형 디스플레이용 웹사이트를 따로 제작하고 있는가? 또는 '반응형 디자인'에 대해 들어봤지만 어떻게 HTML5와 CSS3를 반응형 디자인에 적용할 수 있는지 확신하지 못하고 있는가? 그렇다면 이 책은 경쟁자보다 먼저, 반응형 디자인으로 자신의 웹 페이지를 한 단계 발전시키는 데 필요한 모든 것을 제공해줄 것이다.

현재 HTML 4.01과 CSS 2.1로 고정폭 웹사이트를 제작하고 있는 웹 디자이너와 웹 개발자를 대상으로 하는 이 책은 HTML5와 CSS3로 어떻게 모든 스크린 크기에 적용 가능한 반응형 웹사이트를 제작할 수 있는지 설명한다.

이 책의 구성

1장 'HTML5와 CSS3, 반응형 웹 디자인 시작하기'에서는 다양한 예를 통해 반응형 웹 디자인을 정의한다. 또한 HTML5와 CSS3를 사용할 때의 장점을 설명한다.

2장 '미디어 쿼리: 다양한 뷰포트의 지원'에서는 미디어 퀴리가 무엇이고, 어떻게 작성하는지, 또한 디바이스의 성능에 따라 CSS 스타일을 어떻게 적용하는지 설명한다.

3장 '유동형 레이아웃 적용'에서는 유동형 레이아웃의 장점을 설명하고, 어떻게 현재의 고정폭 디자인을 쉽게 유동형 레이아웃으로 변환하는지, 그리고 CSS 프레임워크를 사용해 빠르게 반응형 디자인의 프로토타입을 만드는 방법을 보여준다.

4장 '반응형 디자인을 위한 HTML5'에서는 HTML5로 코딩할 때의 여러 가지 장점(간결한 코드, 시맨틱 요소, 오프라인 캐싱, 보조 기술 사용을 위한 WAI-ARIA)을 살펴본다.

5장 'CSS3: 선택자, 타이포그래피, 컬러 모드'에서는 원하는 요소를 쉽게 선택하고 변환할 수 있는 강력한 CSS3 선택자에 대해 설명한다. 또한 CSS3의 @font-face 규칙을 사용해 아름다운 웹 타이포그래피를 만드는 방법과, RGB(A), HSL(A) 같은 새로운 CSS3 컬러 모드에 대해서도 설명한다.

6장 'CSS3의 멋진 기능'에서는 어떻게 순수하게 CSS3만으로 텍스트 섀도와 박스 섀도 그리고 그레이디언트를 만드는지 보여준다. 또한 여러 개의 배경 이미지를 추가하는 방법과 폰트로 아이콘을 만드는 방법을 다룬다.

7장 'CSS3 트랜지션, 트랜스폼 그리고 애니메이션'에서는 다른 기술의 도움 없이 순수하게 CSS3만으로 화면상의 요소에 애니메이션 효과를 적용하고 트랜스폼하는 방법을 다룬다.

8장 'HTML5와 CSS3로 폼 정복'에서는 최신 스마트폰에서 데스크탑에 이르기까지 모든 브라우저에서 동작하는 크로스 브라우저 폼을 구현하는 방법을 보여준다.

9장 '크로스 브라우저 반응형 도전 과제 해결'에서는 구형 인터넷 익스플로러를 반응형으로 만드는 방법과 모바일 디바이스에서 긴 링크 목록을 메뉴로 변환해 제공하는 방법, 고화질 디스플레이용으로 별도의 콘텐츠를 제공하는 방법, 그리고 모더나이저를 사용해 조건부로 자원을 로드하는 방법에 대해 설명한다.

목차

1장 HTML5와 CSS3, 반응형 웹 디자인 시작하기
왜 스마트폰이 중요한가?(구형 IE가 중요하지 않은 이유)
반응형 디자인이 항상 올바른 선택인가?
반응형 웹 디자인의 정의
반응형 디자인이 전부인가?
반응형 웹 디자인의 예
뷰포트 테스트 툴
영감을 주는 온라인 소스
HTML5가 왜 좋은가?
HTML5 코딩으로 시간 절약하기
새로운 HTML5 시맨틱 태그 요소
반응형 웹 디자인 그 이상을 가능하게 하는 CSS3
결론: CSS3는 아무런 문제도 발생시키지 않는다
어떻게 CSS3로 일상적인 디자인 문제를 해결할 수 있는가?
이미지가 필요 없다
CSS3의 여타 기능
지금 바로 HTML5와 CSS3를 사용할 수 있을까?
반응형 웹 디자인이 마법의 해결책은 아니다
고객에게 웹사이트가 모든 브라우저에서 동일하게 보이지 않는다는 사실을 가르치자
정리

2장 미디어 쿼리: 다양한 뷰포트의 지원
지금 바로 미디어 쿼리를 사용할 수 있다
왜 반응형 디자인에 미디어 쿼리가 필요한가?
미디어 쿼리 구문
미디어 쿼리로 판단할 수 있는 사항
미디어 쿼리로 디자인 변경
반응형 디자인을 위해 미디어 쿼리를 사용하는 가장 좋은 방법
첫 번째 반응형 디자인
당황스럽겠지만, 우리의 디자인은 고정폭으로 되어 있다
반응형 디자인: 이미지를 가능한 한 경제적으로 만들기
작은 뷰포트에서의 콘텐츠 클리핑 문제
최신 브라우저의 페이지 자동 크기 조정 기능 중단하기
다양한 크기의 뷰포트를 지원하기 위한 고정 디자인
반응형 디자인에서는 콘텐츠가 항상 먼저 와야 한다
미디어 쿼리는 솔루션의 일부일 뿐이다
유동형 레이아웃이 필요하다
정리

3장 유동형 레이아웃 적용
고정 레이아웃은 미래 경쟁력이 없다
왜 비례형 레이아웃이 반응형 웹 디자인에 꼭 필요한가?
고정 레이아웃을 비례형 레이아웃으로 수정
기억해야 할 공식
비례 요소를 위한 컨텍스트 설정
항상 컨텍스트를 염두에 두자
타이포그래피를 위해 픽셀보다는 ems를 사용
유동형 이미지
뷰포트에 맞게 이미지 크기 조절하기
특정 이미지를 위한 특정 규칙
유동형 이미지에 제동 장치 추가
다양한 max-width 속성
화면 크기에 따른 다양한 이미지 제공
적응형 이미지 설정
유동형 그리드와 미디어 쿼리를 함께 사용
CSS 그리드 시스템
그리드 시스템으로 빠른 사이트 구축
정리

4장 반응형 디자인을 위한 HTML5
HTML5의 어떤 부분을 지금 바로 사용할 수 있는가?
대부분의 사이트를 HTML5로 작성할 수 있다
폴리필과 심, 그리고 모더나이저
HTML5 페이지 작성 방법
HTML5의 경제성
HTML5 마크업으로의 합리적인 접근 방법
강력한 'a' 태그
더 이상 사용하지 않는 HTML 기능
HTML5의 새로운 시맨틱 요소
'section' 요소
'nav' 요소
'article' 요소
'aside' 요소
'hgroup' 요소
'header' 요소
'footer' 요소
'address' 요소
HTML5 구조적 요소의 실제 사용법
사이트의 메인 콘텐츠는 어떤가?
HTML5 텍스트 레벨 시맨틱
'b' 요소
'em' 요소
'i' 요소
마크업에 텍스트 레벨 시맨틱 적용하기
WAI-ARIA로 사이트에 웹 접근성 추가하기
ARIA의 랜드마크 역할
HTML5의 미디어 삽입
HTML5 방식으로 비디오와 오디오 추가하기
대체 소스 파일 제공
구형 브라우저를 위한 폴백 제공
거의 동일하게 동작하는 오디오와 비디오 태그
반응형 비디오
오프라인 웹 애플리케이션
오프라인 웹 애플리케이션 핵심 요약
웹 페이지를 오프라인에서 동작하게 만들기
매니페스트 파일 이해하기
오프라인 매니페스트 파일에서 자동으로 페이지 로딩하기
버전 주석
오프라인으로 사이트 보기
오프라인 웹 애플리케이션 문제 해결
정리

5장 CSS3: 선택자, 타이포그래피, 컬러 모드
프론트엔드 개발자가 CSS3로 할 수 있는 일
인터넷 익스플로러 버전 6, 7, 8에서의 CSS3 지원
CSS3를 사용한 웹 페이지 설계와 개발
CSS 규칙 분석
벤더 프리픽스의 사용법
빠르고 유용한 CSS3 트릭
반응형 디자인을 위한 CSS3 다중 열
단어 넘김
새로운 CSS3 선택자와 사용법
CSS3 속성 선택자
CSS3 구조 의사클래스
의사엘리먼트 개정
사용자 정의 웹 타이포그래피
@font-face CSS 규칙
@font-face로 웹 폰트 구현
@font-face 제목 문제 해결
사용자 정의 @font-face 타이포그래피와 반응형 디자인
새로운 CSS3의 컬러 포맷과 알파 투명도
RGB 컬러
HSL 컬러
IE6, IE7, IE8을 위한 폴백 컬러
알파 채널
정리

6장 CSS3의 멋진 기능
CSS3 텍스트 섀도
16진수, HSL, RGB 색상
픽셀 또는 em, rem
텍스트 섀도 방지
양각 텍스트 섀도 효과
다중 텍스트 섀도
박스 섀도
인셋 섀도
다중 섀도
배경색 그레이디언트
선형 배경색 그레이디언트
원형 배경색 그레이디언트
그레이디언트 반복
배경색 그레이디언트 패턴
반응형 디자인을 위한 CSS3 고려사항
CSS3 속성 함께 사용하기
다중 배경 이미지
배경 크기
배경 위치
배경 속성을 약식으로 사용하기
그 외의 CSS3 기능
반응형 디자인에 꼭 필요한 크기 조절이 가능한 아이콘
정리

7장 CSS3 트랜지션, 트랜스폼 그리고 애니메이션
CSS3 트랜지션의 정의와 사용법
트랜지션 속성
반응형 웹사이트를 위한 재미있는 트랜지션 효과
CSS3 2D 트랜스폼
트랜스폼할 수 있는 것
CSS3 3D 트랜스폼
3D 효과 분석
3D 트랜스폼은 아직 준비가 되어 있지 않다
CSS3 애니메이션
CSS3 트랜스폼과 애니메이션의 동시 적용
정리

8장 HTML5와 CSS3로 폼 정복
HTML5 폼
HTML5 폼의 구성요소
플레이스홀더
필수
오토포커스
자동완성
리스트와 데이터리스트 요소
HTML5 입력 형식
날짜와 시간 입력
비지원 브라우저를 위한 폴리필
CSS3로 HTML5 폼 스타일링하기
폼에 특화된 CSS3 의사클래스 선택자
정리

9장 크로스 브라우저 반응형 도전 과제 해결
점진적인 향상과 우아한 성능 저하
현실
구형 인터넷 익스플로러를 수정할 것인가?
통계
개인적인 선택
모더나이저: 프론트엔드 개발자의 만능칼
모더나이저로 스타일 문제 해결
모더나이저로 구형 IE에 HTML5 요소 지원 추가
인터넷 익스플로러 6, 7, 8 버전에 min과 max 미디어 쿼리 기능 추가
모더나이저로 조건부 로딩하기
내비게이션 링크를 드롭 메뉴로 변경(조건부)
고해상도 디바이스(미래)
정리

본문중에서

저자 서문

여러분의 웹사이트를 '모바일' 버전으로 만들 필요가 있다고 생각한다면, 다시 한 번 생각해보기 바란다. 반응형 웹 디자인(responsive web design)으로 스마트폰부터 데스크탑에 이르는 모든 디바이스에 잘 어울리는 하나의 디자인을 제공할 수 있다. 반응형 디자인은 추가적인 노력 없이 모든 사용자의 스크린에 적용될 수 있으며, 현재뿐 아니라 미래의 디바이스에 이르기까지 최상의 사용자 경험을 제공할 것이다.

이 책은 기존의 고정폭 기반 디자인을 어떻게 반응형 디자인으로 작성할 수 있는지에 대한 완벽한 가이드를 제공한다. 그리고 반응형 디자인 방법론에, HTML5와 CSS3가 제공하는 가장 최신의 그리고 유용한 기술을 적용해 이전보다 훨씬 더 유지하기 쉽고 간결한 디자인을 만드는 방법을 제시한다. 또한 코드를 작성하고, 이미지와 파일을 배포하는 공통적인 베스트 프랙티스(모범 사례)도 설명한다.

HTML과 CSS만 알고 있다면, 지금 바로 반응형 웹 디자인을 작성할 수 있다.
(/ 저자 서문 중에서)

옮긴이의 말

최근 1, 2년 사이 웹 페이지에 접근할 수 있는 다양한 모바일 기기가 등장하면서 반응형 웹 디자인이 주목을 받기 시작했다. 반응형 웹 디자인이란 데스크탑, 태블릿, 모바일 등 사용자의 다양한 디바이스 환경에 따라 웹이 알아서 반응하도록 디자인하는 것이다. 기존에는 데스크탑용 웹사이트와 모바일용 웹사이트를 따로 제작해야 했지만 반응형 웹을 적용하면 하나의 디자인으로 다양한 크기의 디바이스에 모두 잘 어울리는 웹사이트를 제작할 수 있다. 또한 이로 인해 웹사이트의 운영과 유지보수 비용의 절감 효과를 기대할 수 있다.

아직까지 국내에는 반응형 웹 디자인을 다루는 자료가 많지 않다. 이 책은 반응형 웹 디자인에 관심이 있는 프론트엔드 개발자와 디자이너에게 반응형 웹 디자인이 무엇이고, 웹사이트를 어떻게 반응형 웹으로 제작할 수 있는지를 알려주는 좋은 지침서가 될 것이다.

지식을 갖고 있다는 것과 그것을 남에게 가르친다는 것은 별개의 이야기다. 마찬가지로 책의 내용을 이해하는 것과, 그것을 다른 사람에게 전달하기 위해 글로 표현하는 것에는 큰 차이가 있다. 처음 이 책의 번역을 맡기로 했을 때, 내가 이해한 내용을 단순히 우리말로 옮기면 된다고 쉽게 생각했었다. 그러나 한 장, 한 장 우리말로 옮겨가면서 단어 하나, 조사 하나의 차이가 내용을 얼마나 이해하기 쉽거나 어렵게 만들 수 있는지 깨달았고, 단어 하나를 선택하는 데도 많은 고민을 했다.

꽤 많은 노력을 기울였지만, 저자의 의도를 충분히 전달하지 못하거나 잘못 번역된 부분이 있을지도 모르겠다. 잘못된 부분이나 책의 내용과 관련한 어떠한 의견이든 보내주시면 소중히 받고 오류는 차후에 있을 증쇄 시에 반영하며 의견은 좋은 자료로서 참고하겠다.
(/ 옮긴이의 말 중에서)

저자소개

생년월일 -
출생지 -
출간도서 0종
판매수 0권

1996년부터 웹 디자이너이자 개발자로 일해 왔다. 현재는 bet365에서 수석 프런트엔드 개발자로 일하고 있다. 샐퍼드 대학교에서 미디어와 공연학을 전공했으며, TV 드라마의 무명 연기자 및 기술 저널리스트로 일했다.

잘 알려지지 않은(그의 말에 따르면) 네 편의 시나리오를 집필했으며, 아직도 그 중 하나는 팔릴 것이라 믿고 있다. 일 외적으로는, 체력과 그의 아내가 허락하는 한 계속해서 실내축구를 즐기려 하며, 그의 두 아들과 뛰어 놀기를 좋아한다. 그가 쓴 또 다른 책, ‘디자이너를 위한 사스와 컴파스’도 있다. 홈페이지 www.benfrain.com, 트위터 twit

펼쳐보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

소프트웨어 엔지니어로서 오랫동안 웹 브라우저와 웹 서버를 개발했다. 그 경험을 바탕으로 현재는 W3C 및 다양한 국제 표준화 단체에서 웹 관련 표준화 업무를 담당하고 있다. 최근에는 웹 기술을 PC에서 벗어나 모바일이나 DTV, 디지털 사이니지(Digital Signage), 웨어러블(Wearable), 오토모티브(Automotive) 등 다양한 IoT 디바이스에 접목하는 오픈 웹 플랫폼(Open Web Platform)에 관심을 가지고 관련 기술을 계속 연구 중이다. 아울러 워크숍이나 세미나에서의 강연과 학술 기고 등을 통해 오픈 웹 플랫폼과 웹 기술을 전파하는 데 힘쓰고 있다.
에이콘출판사에서

펼쳐보기

이 상품의 시리즈

acorn+PACKT 시리즈(총 351권 / 현재구매 가능도서 320권)

펼쳐보기

이 책과 내용이 비슷한 책 ? 내용 유사도란? 이 도서가 가진 내용을 분석하여 기준 도서와 얼마나 많이 유사한 콘텐츠를 많이 가지고 있는가에 대한 비율입니다.

    리뷰

    0.0 (총 0건)

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    8.0

    교환/환불

    교환/환불 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

    교환/환불 가능 기간

    고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

    교환/환불 비용

    고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

    교환/환불 불가사유

    반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
    배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

    소비자 피해보상

    소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
    교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

    기타

    도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

    배송안내

    • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

    • 배송비

    도서(중고도서 포함) 구매

    2,000원 (1만원이상 구매 시 무료배송)

    음반/DVD/잡지/만화 구매

    2,000원 (2만원이상 구매 시 무료배송)

    도서와 음반/DVD/잡지/만화/
    중고직배송상품을 함께 구매

    2,000원 (1만원이상 구매 시 무료배송)

    업체직접배송상품 구매

    업체별 상이한 배송비 적용