해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.
패키지
북카드
키워드 Pick
키워드 Pick 안내
관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.
작가정보
저자(글) EBISUCOM
저자 EBISUCOM (エビスコム)은 다양한 미디어와 관련된 기획/제작을 하고 있다. 컴퓨터와 관련해서 서적/디지털 영상/CG/소프트웨어의 기획과 제작, 시스템 구축 등을 하고 있다.
역자 윤인성은 출근하는 게 싫어서 책을 집필/번역하기 시작했다. 일본어는 픽시브에서 웹 코믹을 읽다가 배웠다고 전해진다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하는 성격이기도 하다. 홍차와 커피를 좋아하며 요리, 음악, 그림, 스컬핑 등이 취미다. 『모던 웹을 위한 JavaScript+jQuery 입문』 『모던 웹을 위한 Node.js 프로그래밍』 『모던 웹 디자인을 위한 HTML5+CSS3 입문』 등을 저술하였으며, 『파이썬을 이용한 머신러닝, 딥러닝 실전 개발 입문』 『스위프트로 시작하는 아이폰 앱 개발 교과서』 『모던 웹사이트 디자인의 정석』 『유니티 게임 이펙트 입문』(이상 위키북스), 『실전 게임 제작으로 배우는 언리얼 엔진 4』 『TopCoder 알고리즘 트레이닝』 『Nature of Code』(이상 한빛미디어), 『소셜 코딩으로 이끄는 GitHub 실천 기술』(제이펍) 등을 번역했다.
목차
- [1장] 사전 준비
1-1 1단 구성 웹 페이지를 최신 HTML과 CSS로 만들기
1-1-1 1단 구성 웹 페이지란?
__반응형 웹 디자인
__시맨틱
1-1-2 최신 HTML과 CSS
__오래된 브라우저 지원
1-2 구축할 페이지와 사이트
1-2-1 페이지 구조와 만드는 순서
1-2-2 페이지의 배색
1-3 웹 페이지 준비하기
1-3-1 HTML 파일 설정하기
1-3-2 CSS 파일 설정하기
__HTML과 CSS 수정에 사용할 텍스트 에디터
__페이지 출력 확인에 사용할 브라우저
__다양한 화면 크기에서 출력 결과를 간단하게 확인하는 방법
[2장] 최상위 페이지 만들기 - 콘텐츠
2-1 CONTENTS A: 히어로 이미지
2-1-1 이미지 위에 글자 출력하기
2-1-2 웹 폰트로 출력할 글자 간격 조정하기
2-1-3 브라우저 화면을 꽉 채우도록 이미지 출력하기
2-1-4 SVG로 로고 이미지 출력하기
2-1-5 링크 박스 출력하기
2-2 CONTENTS B: 개요(아이콘 + 글자)
2-2-1 개요 글자 출력하기
2-2-2 아이콘 출력
2-2-3 3개의 개요를 가로로 정렬하기
2-3 CONTENTS C: 개요(이미지 + 글자)
2-3-1 이미지와 글자 출력하기
2-3-2 이미지와 글자를 가로로 정렬하기
2-4 CONTENTS D: 개요(이미지 + 글자: 반대로 배치하기)
2-4-1 콘텐츠 C를 기반으로 새로운 블록 만들기
2-4-2 이미지의 너비를 고정하고 정렬 순서 변경하기
[3장] 최상위 페이지 만들기 - 내비게이션
3-1 FOOTER A: 사이트 정보
3-1-1 사이트 정보 출력하기
3-1-2 푸터 디자인 지정하기
3-2 FOOTER B: 푸터 메뉴
3-2-1 푸터 메뉴 만들기
3-2-2 3개의 메뉴를 가로로 정렬하기
3-3 FOOTER C: 저작권
3-3-1 저작권 출력하기
3-3-2 푸터 내부의 요소 레이아웃 조정하기
3-4 FOOTER D: SNS 메뉴
3-4-1 SNS 메뉴 출력하기
3-4-2 SNS 메뉴의 디자인 지정하기
3-5 HEADER A : 헤더의 사이트 이름
3-6 HEADER B : 내비게이션 메뉴
3-6-1 내비게이션 메뉴 만들기
3-6-2 큰 화면에서는 내비게이션 메뉴를 가로로 정렬하기
3-7 HEADER C : 토글 버튼
3-7-1 토글 버튼 만들기
3-7-2 토글 버튼으로 내비게이션 메뉴 열고 닫기
[4장] 콘텐츠 페이지 만들기 - 콘텐츠 / 소개 / 문의
4-1 콘텐츠 페이지
4-1-1 콘텐츠 페이지 만들기
4-1-2 기사의 디자인 지정하기
4-1-3 빵 부스러기 리스트 출력하기
4-2 소개 페이지
4-2-1 소개 페이지 만들기
4-2-2 이미지와 연혁 출력하기
4-3 문의 페이지
4-3-1 문의 페이지 만들기
4-3-2 지도 출력하기
[5장] 기사 목록 페이지 만들기 - 카드 형태 / 썸네일 형태
5-1 기사 목록 A : 카드 형태(이미지 + 글자를 위아래에 배치)
5-1-1 기사 목록 A 페이지 만들기
5-1-2 기사 개요 출력하기
5-1-3 브라우저 화면의 너비에 따라 개요의 정렬 상태 바꾸기
5-2 기사 목록 B : 카드 형태(이미지 + 글자를 왼쪽 오른쪽에 배치)
5-3 기사 목록 C : 썸네일 형태(이미지 + 글자를 중첩해서 배치)
[6장] 디자인 재구성
6-1 헤더 색 재구성하기
6-2 헤더와 히어로 이미지를 하나로 디자인하기
6-3 헤더를 화면 위에 고정하기
6-4 연관 기사 메뉴 추가하기
6-5 메타데이터 추가하기
6-6 페이지의 기본색 재구성하기
[부록]
HTML 레퍼런스
__기본 문법
__HTML 기본 설정
__메타데이터
__섹션
__콘텐츠
CSS 레퍼런스
__CSS 기본 문법
__선택자
__미디어쿼리
박스 모델
__박스의 기본 설정
__박스의 종류
__플렉시블 박스 레이아웃
__포지션 레이아웃
__박스 내부의 콘텐츠 디자인
__단위
__색
__변수
최적화
주요 장치의 화면 크기
오래된 브라우저 전용 설정
출판사 서평
플렉시블 박스 레이아웃을 이용한 최신 표준 반응형 웹 디자인 마스터하기!
이 책은 멀티 디바이스에 대응하는 웹 사이트를 단계적으로 만들어 보면서 최신 표준의 HTML과 CSS를 공부하기 위한 책입니다.
웹 페이지 제작을 둘러싼 환경은 최근 몇 년 동안 크게 변화하고 있습니다. PC보다는 스마트폰, 태블릿 등의 모바일 장치에서 더 많이 접속하고 있으며, 이로 인해 단순한 1단 구조를 가진 웹 페이지를 많이 만들게 되었습니다. 이 책에서는 오래된 웹 브라우저 때문에 사용하지 못하던 기능들을 모두 활용해 간단한 단계를 거쳐 현대적인 웹 페이지를 만드는 방법을 소개합니다.
6단계의 학습 과정을 통해 웹 사이트 제작의 기초부터 웹 페이지 재구성까지 효율적으로 공부할 수 있게 안내하며, 예제 파일을 내려받아 학습하거나 활용할 수 있도록 준비했습니다. 또한 앞으로 웹 페이지 만들기를 배우는 분이나 최신 HTML + CSS에 관심 있는 분들을 위해 웹 페이지 제작과 관련된 기술을 모두 정리해서 책의 뒷부분에 실었습니다.
기본정보
ISBN | 9791158390686 | ||
---|---|---|---|
발행(출시)일자 | 2017년 08월 17일 | ||
쪽수 | 320쪽 | ||
크기 |
188 * 241
* 20
mm
/ 769 g
|
||
총권수 | 1권 | ||
시리즈명 |
위키북스 오픈소스 & 웹 시리즈
|
Klover
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
- 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
- 도서와 무관한 내용의 리뷰
- 인신공격이나 욕설, 비속어, 혐오발언이 개재된 리뷰
- 의성어나 의태어 등 내용의 의미가 없는 리뷰
리뷰는 1인이 중복으로 작성하실 수는 있지만, 평점계산은 가장 최근에 남긴 1건의 리뷰만 반영됩니다.
구매 후 리뷰 작성 시, e교환권 200원 적립
문장수집
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
구매 후 리뷰 작성 시, e교환권 100원 적립