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

실전 예제로 배우는 반응형 웹 디자인 : 부트스트랩, 스켈레톤, 파운데이션 반응형 프레임워크

원제 : Responsive Web Design by Example

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

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

30,000원

  • 27,000 (10%할인)

    1,500P (5%적립)

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

  • 연관도서(321)

  • 사은품(1)

출판사 서평

반응형 웹 디자인은 다양한 크기와 해상도의 디바이스가 증가함에 따라 폭발적으로 성장하고 있는 최신 웹 개발 분야이다. 이 책에서는 실전 예제를 통해 가장 인기 있고 강력한 세 가지 반응형 프레임워크(부트스트랩(Bootstrap), 스켈레톤(Skeleton), 저브 파운데이션(ZURB Foundation))를 설명한다. 또한 궁극적으로 어떤 프레임워크가 프로젝트에 적합하며, 요구사항에 맞게 각각의 프레임워크를 어떻게 효율적으로 사용하고 커스터마이즈 할 수 있는지 이해할 수 있다. 이 책은 이러한 반응형 프레임워크를 통해 프론트 엔드 개발자들이 실제 반응형 웹 사이트를 쉽고 빠르게 구축할 수 있도록 도움을 줄 것이다.

이 책에서 다루는 내용
- 오늘날 가장 강력한 세 가지 반응형 프레임워크인 부트스트랩(Bootstrap), 스켈레톤(Skeleton), 저브 파운데이션(ZURB Foundation) 설명
- 프로젝트에 적합한 반응형 프레임워크를 결정하는 방법
- 부트스트랩으로 손쉽게 멋진 제품 출시 페이지 구축
- 스켈레톤의 유연성을 활용해 독특한 포트폴리오 구축
- 저브 파운데이션으로 모든 디바이스에서 동작하는 온라인 비즈니스 사이트 구축
- CSS의 잠재력을 최대한 활용해 반응형 웹사이트를 개선하는 방법

이 책의 대상 독자
이 책은 HTML과 CSS에 대해 잘 알고 있으면서, 자신의 기술을 확장하여 모든 스크린 크기에 잘 맞는 반응형 웹사이트를 개발하려는 초보자들을 대상으로 한다.

이 책의 구성
1장, '반응형 웹 디자인'은 반응형 웹 디자인의 기초와 이를 구축하는 데 필요한 개발 도구를 알아보고, 반응형 웹사이트의 좋은 예들을 살펴본다.

2장, '스켈레톤으로 반응형 포트폴리오 페이지 구축'은 반응형 그리드 사용법에 대해 설명하고, HTML5로 웹 페이지를 구성하여 첫 번째 프로젝트를 시작한다.

3장, 'CSS3로 포트폴리오 웹사이트 향상시키기'는 트랜스폼과 트랜지션 같은 CSS3의 몇 가지 기능을 소개하고, 이들 기능으로 반응형 포트폴리오 웹사이트를 향상시키는 방법을 설명한다.

4장, '부트스트랩으로 제품 출시 사이트 개발'은 부트스트랩 프레임워크를 소개하고, 반응형 웹사이트를 구축하는 데 필요한 컴포넌트들를 알아본다.

5장, 'CSS3와 LESS로 제품 출시 사이트 향상시키기'는 CSS3를 작성하는 LESS 함수를 설명하고 이 함수들로 어떻게 반응형 제품 출시 사이트를 유지보수가 쉬우면서도 멋져 보이게 만들 수 있는지 알아본다.

6장, '파운데이션 프레임워크로 반응형 비즈니스 웹사이트 구축'은 파운데이션 프레임워크를 소개하고 주요 기능을 알아본다. 또한 비즈니스 목적의 반응형 웹사이트를 구축하는 세 번째 프로젝트를 시작한다.

7장, '파운데이션 확장'은 CSS 전처리기인 Sass와 SCSS, 컴파스에 대해 알아본다. 그리고 파운데이션 프레임워크 변수로 웹사이트의 모양을 확장하는 방법을 설명한다.

목차

1장 반응형 웹 디자인
반응형 웹 디자인의 기본
뷰포트 메타 태그와 CSS3 미디어 쿼리
반응형 디자인의 한계
picture 요소로 반응형 이미지 만들기
HTML5와 CSS3의 이해
반응형 웹 디자인 프레임워크 소개
왜 프레임워크를 사용하는가?
스켈레톤
부트스트랩
파운데이션
누가 반응형 프레임워크를 사용하는가?
하이브마인드
Living.js
스위즐
단점
반응형 웹사이트 구축에 필요한 도구들
웹 브라우저
코드 편집기
반응형 북마클릿
CSS 전처리기 소개
CSS 전처리기 컴파일러 도구
LESS
중첩 규칙
변수
믹스인
파라메트릭 믹스인
연산
Sass
변수
믹스인
중첩 규칙
선택자 상속
CSS 전처리기에 대한 추가 학습
LESS 학습
Sass 학습
이 책을 통해 무엇을 제작하려고 하는가?
정리

2장 스켈레톤으로 반응형 포트폴리오 페이지 구축
스켈레톤 시작
실습 예제- 작업 디렉토리 생성과 스켈레톤 설치하기
스켈레톤 내용 살펴보기
HTML 시작 문서
뷰포트 메타 태그
HTML5 심
반응형 그리드
스타일 삭제
미디어쿼리
타이포그래피 스타일
버튼 스타일
폼 스타일
애플 아이콘 장치
포토샵 템플릿
웹사이트 구성
웹사이트 내비게이션
썸네일 호버 효과
스켈레톤 문서 설정
실습 예제- CSS 파일 추가
사용자정의 폰트 추가
실습 예제- 구글 웹 폰트 사용하기
이미지 준비
소셜 미디어 아이콘
실습 예제- 스프라이트 이미지
연락처 아이콘
HTML5 요소
HTML5 사용자정의 데이터 속성
실습 예제- HTML 문서 구조화
정리

3장 CSS3로 포트폴리오 웹사이트 향상시키기
CSS 박스 모델
CSS3 box-sizing 속성 소개
실습 예제- box-sizing 지정
CSS 측정 단위
픽셀 단위
고 DPI 스크린에서의 픽셀 단위
em 단위
px을 em으로 전환하기
em 단위의 수동 계산
브라우저에서 em 단위를 처리하는 차이
퍼센트 단위
폰트 패밀리 설정
실습 예제- 헤딩 폰트 패밀리 설정
헤더 스타일
실습 예제- 헤더 스타일 추가
CSS3 선택자 사용
직접 자식 선택자
인접한 형제 선택자
일반적인 형제 선택자
CSS3 의사 클래스
CSS3 체크 의사 클래스
CSS3 nth-child 의사 클래스
포트폴리오 썸네일과 캡션의 스타일
실습 예제- 썸네일과 캡션의 스타일 추가
CSS3 2D 트랜스폼
translate() 함수
벤더 프리픽스
CSS3 트랜지션
CSS3 트랜지션 값
실습 예제- 썸네일 호버 효과 만들기
웹사이트 내비게이션을 통한 포트폴리오 필터링
실습 예제- 포트폴리오 필터 만들기
푸터 영역
실습 예제- 푸터 영역에 스타일 추가
작은 뷰포트를 위한 웹사이트 스타일 조정
은 뷰포트를 위한 웹사이트 스타일 조정
실습 예제- 960픽셀보다 작은 뷰포트 크기
실습 예제- 767픽셀과 480픽셀 사이의 뷰포트 크기
실습 예제- 480픽셀보다 작은 뷰포트 크기
다양한 뷰포트 크기에서 웹사이트를 테스트
다양한 뷰포트 크기에서 웹사이트를 테스트
정리

4장 부트스트랩으로 제품 출시 사이트 개발
부트스트랩 시작하기
실습 예제- 부트스트랩 설정
웹사이트에 사용할 이미지 준비
LESS 애플리케이션 소개
실습 예제- 크런치앱 설치
새로운 LESS 파일 생성하기
실습 예제- 크런치앱으로 새로운 LESS 파일 생성하기
LESS 구문을 표준 CSS로 컴파일
실습 예제- 크런치앱에 LESS 파일 추가하고 표준 CSS로 컴파일하기
사용자 폰트 패밀리 추가를 위한 @font-face 규칙 소개
무료 사용 가능한 임베딩 폰트
@font-face 규칙 작성
크로스 브라우저 호환을 위한 폰트 포맷
실습 예제- @face-font로 새로운 폰트 추가하기
부트스트랩의 반응형 기능
부트스트랩 그리드 시스템
부트스트랩에서의 CSS3 미디어쿼리
실습 예제- CSS3 미디어쿼리를 저장할 새로운 LESS 파일 생성
부트스트랩으로 내비게이션 만들기
HTML 문서 작성
실습 예제- 기본 HTML5 문서 작성
홈페이지 콘텐츠
실습 예제- 홈페이지의 HTML 콘텐츠 구조 추가
HTML5 플레이스홀더 속성
HTML5의 새로운 입력 타입
갤러리 페이지 콘텐츠 작성
실습 예제- 갤러리 페이지에 HTML 콘텐츠 구조 추가
문의 페이지 콘텐츠 작성
실습 예제- 문의 페이지에 HTML 구조 추가
어바웃 페이지 콘텐츠 작성
실습 예제- 어바웃 페이지에 HTML 콘텐츠 구조 추가
정책 페이지
실습 예제- 개인정보보호와 정책 페이지의 HTML 콘텐츠 구조 추가
정리

5장 CSS3와 LESS로 제품 출시 사이트 향상시키기
LESS 사용자정의 변수
실습 예제- 사용자정의 변수 설정
사용자정의 LESS 믹스인
실습 예제- 사용자정의 LESS 믹스인 정의
LESS 색상 함수
범위 개념 소개
일반 스타일 규칙
실습 예제- 일반 스타일 규칙 추가
벤더 프리픽스 제거
버튼 스타일
실습 예제- 부트스트랩의 버튼 스타일 재정의
왜 버튼이 이렇게 큰가?
헤더 스타일
실습 예제- 웹사이트 헤더 스타일 추가
푸터 스타일
실습 예제- 푸터 스타일 추가
홈페이지 작업
히어로 영역
실습 예제- 히어로 영역에 스타일 추가
콜투액션 영역
실습 예제- 콜투액션 영역에 스타일 추가
갤러리 영역
실습 예제- 갤러리 영역 스타일 추가
추천 영역
실습 예제- 추천 영역 스타일 추가
구독 폼
실습 예제- 이메일 입력 스타일 추가
갤러리 페이지
실습 예제- 페이지 제목 스타일 조정
연락 페이지
실습 예제- 연락 페이지 스타일 추가
어바웃 페이지
개인정보보호 정책 페이지
웹사이트를 반응형으로 만들기
실습 예제- 767px 이하 뷰포트 크기의 웹사이트 향상시키기
실습 예제- 480px 이하 뷰포트 크기에 대한 웹사이트 향상시키기
불필요한 스타일 규칙의 제외
웹사이트 테스트
정리

6장 파운데이션 프레임워크로 반응형 비즈니스 웹사이트 구축
루비 기반 프레임워크
파운데이션 젬
실습 예제- 파운데이션 프레임워크 설치와 새로운 프로젝트 설정
Sass와 SCSS 구문
Sass와 SCSS 코드 편집기
실습 예제- 서브라임 텍스트를 설치하고 SCSS 구문을 하이라이트시키기
SCSS 스타일시트 사용자정의
실습 예제- 유지보수를 위해 새로운 SCSS 스타일시트 만들기
컴퍼스 소개
컴퍼스 헬퍼 함수
컴퍼스 프로젝트 설정
실습 예제- config.rb로 프로젝트 경로 설정
SCSS를 CSS로 컴파일하기
실습 예제- SCSS 스타일시트 변경 감시
웹사이트 이미지 준비
파운데이션 프레임워크 컴포넌트
그리드
CSS3 미디어쿼리
사용자 인터페이스 스타일
오빗
HTML 문서 작성
기본 HTML 문서
실습 예제- 기본 HTML 문서 구성
웹사이트 홈페이지
실습 예제- 홈페이지 콘텐츠 구성
서비스 페이지
실습 예제- 서비스 페이지 콘텐츠 마크업 작성
가격 페이지
실습 예제- 가격 페이지 콘텐츠 마크업 작성
회사소개 페이지
실습 예제- 회사소개 페이지 콘텐츠 마크업 작성
연락처 페이지
실습 예제- 연락처 페이지 작성
정리

7장 파운데이션 확장
프로젝트 모니터링
실습 예제- 커맨드 라인 명령으로 프로젝트 모니터링하기
Sass 색상 함수 소개
Sass 변수
실습 예제- 파운데이션 프레임워크 Sass 색상 변수를 사용자정의하기
사용자정의 폰트 패밀리
컴퍼스 폰트 페이스 믹스인
실습 예제- 컴퍼스 믹스인으로 사용자정의 폰트 패밀리 추가
웹사이트 내비게이션
실습 예제- 헤더 영역 스타일링
컴퍼스 스프라이트 헬퍼 소개
웹사이트 푸터 영역
실습 예제- 푸터 영역에 스타일 추가
CSS3 구조적 선택자 소개
홈페이지
실습 예제- 홈페이지 스타일 추가
서비스 페이지
실습 예제- 서비스 페이지 스타일 추가
가격 페이지
실습 예제- 가격 페이지 스타일 추가
소개 페이지와 연락처 페이지
실습 예제- 소개 페이지와 연락처 페이지에 스타일 추가
실습 예제- 웹사이트 작성 마무리
웹사이트 테스트
요약

본문중에서

반응형 웹 디자인은 소비자가 선택할 수 있는 다양한 크기와 해상도의 디바이스가 증가함에 따라 폭발적으로 성장하고 있는 최신 웹 개발 분야다. 이제 인터넷에 접속하는 모든 디바이스에서 잘 동작하는 자신의 웹사이트를 제작하는 방법을 배울 수 있다.

이 책은 실전 예제를 통해 전 세계 전문가들이 사용하고 있는 주요 반응형 프레임워크(부트스트랩과 스켈레톤, 저브 파운데이션)를 설명한다. 궁극적으로 어떤 프레임워크가 프로젝트에 적합하며, 또한 요구사항에 맞게 각각의 프레임워크를 어떻게 효율적으로 사용하고 커스터마이즈 할 수 있는지 이해하게 될 것이다.
(/ 저자 서문 중에서)

에이콘 출판사와의 인연으로 '반응형 웹 디자인(HTML5와 CSS3로 작성하는)'이라는 좋은 책을 만난 것이 정확히 2년 전의 일이었다. 처음 반응형 웹 디자인에 대한 책을 펴냈을 때만 해도 반응형 웹 디자인은 국내에서 익숙한 용어가 아니었으며 관련 자료도 많지 않은 실정이었다. 그사이 관련 책도 많이 출간되었고, 국내에서도 반응형 웹 디자인을 적용한 웹사이트들이 많이 늘어났다. 또한 책을 읽은 독자들로부터 책을 통해 반응형 웹 디자인이 무엇인지에 대한 궁금증을 해소할 수 있었다는 감사의 말씀도 많이 전해 들었다. 하지만 여전히 반응형 웹 디자인으로 웹사이트를 구축하는데 있어 많은 개발자들이 어려움을 겪고 있는 것이 현실이다.

그런 의미에서 만 2년 만에 다시 접하게 된 이 책은 많은 프론트 엔드 개발자들이 현실적으로 당면하고 있는 구현 문제를 해결하는 데 큰 도움이 될 것으로 기대한다. 실제 웹사이트 구축에 바로 적용할 수 있는 다양한 예제와 충분한 설명, 그리고 이 책에서 소개하고 있는 가장 인기 있고 강력한 세 가지 반응형 프레임워크(부트스트랩과 스켈레톤, 저브 파운데이션)를 활용하면 누구나 쉽고 빠르게 반응형 웹 사이트를 구축할 수 있을 것이라고 확신한다.
(/ 옮긴이의 말 중에서)

저자소개

또리끄 피르다우스(Thoriq Firdaus) [저] 신작알림 SMS신청 작가DB보기
생년월일 -
출생지 -
출간도서 0종
판매수 0권

그래픽 및 웹 디자이너이며 인도네시아에 살고 있다. 지난 5년 동안 신생 벤처회사부터 유명 기업, 세계적인 기관에 이르는 다양한 고객들과 웹 디자인 프로젝트를 수행해 왔다. HTML5와 CSS3에 대한 열렬한 옹호자로, 이 주제로 http://www.hongkiat.com/과 자신의 블로그인 http://creatiface.com/에 정기적으로 글을 게재하고 있다. 또한 지역 대학과 기관에서 웹 디자인에 대한 강의를 진행하고 있다.

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

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

펼쳐보기

이 상품의 시리즈

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

펼쳐보기

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

    리뷰

    0.0 (총 0건)

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    0.0

    교환/환불

    교환/환불 방법

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

    교환/환불 가능 기간

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

    교환/환불 비용

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

    교환/환불 불가사유

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

    소비자 피해보상

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

    기타

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

    배송안내

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

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

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

    • 배송비

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

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

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

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

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

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

    업체직접배송상품 구매

    업체별 상이한 배송비 적용