• 컴퓨터/IT > 홈페이지/웹디자인 > 홈페이지 만들기

2015/10 컴퓨터/IT 62위 | 현재 컴퓨터/IT 62위 |

출판사 리뷰

출판사 서평 ★ 요약 ★ 반응형 웹 디자인은 다양한 크기와 해상도의 디바이스가 증가함에 따라 폭발적으로 성장하고 있는 최신 웹 개발 분야이다. 이 책에서는 실전 예제를 통해 가장 인기 있고 강력한 세 가지 반?응형 프레임워크(부트스트랩(Bootstrap), 스켈레톤(Skeleton), 저브 파운데이션(ZURB Foundation))를 설명한다. 또한 궁극적으로 어떤 프레임워크가 프로젝트에 적합하며, 요구사항에 맞게 각각의 프레임워크를 어떻게 효율적으로 사용하고 커스터마이즈 할 수 있는지 이해할 수 있다. 이 책은 이러한 반응형 프레임워크를 통해... ★ 요약 ★ 반응형 웹 디자인은 다양한 크기와 해상도의 디바이스가 증가함에 따라 폭발적으로 성장하고 있는 최신 웹 개발 분야이다. 이 책에서는 실전 예제를 통해 가장 인기 있고 강력한 세 가지 반응형 프레임워크(부트스트랩(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, 컴파스에 대해 알아본다. 그리고 파운데이션 프레임워크 변수로 웹사이트의 모양을 확장하는 방법을 설명한다.

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

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

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

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

목차
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 변수
실습 예제 | 파