플렉시블 박스 레이아웃을 이용한 최신 표준 반응형 웹 디자인 마스터하기!
이 책은 멀티 디바이스에 대응하는 웹 사이트를 단계적으로 만들어 보면서 최신 표준의 HTML과 CSS를 공부하기 위한 책입니다.
웹 페이지 제작을 둘러싼 환경은 최근 몇 년 동안 크게 변화하고 있습니다. PC보다는 스마트폰, 태블릿 등의 모바일 장치에서 더 많이 접속하고 있으며, 이로 인해 단순한 1단 구조를 가진 웹 페이지를 많이 만들게 되었습니다. 이 책에서는 오래된 웹 브라우저 때문에 사용하지 못하던 기능들을 모두 활용해 간단한 단계를 거쳐 현대적인 웹 페이지를 만드는 방법을 소개합니다.
6단계의 학습 과정을 통해 웹 사이트 제작의 기초부터 웹 페이지 재구성까지 효율적으로 공부할 수 있게 안내하며, 예제 파일을 내려받아 학습하거나 활용할 수 있도록 준비했습니다. 또한 앞으로 웹 페이지 만들기를 배우는 분이나 최신 HTML + CSS에 관심 있는 분들을 위해 웹 페이지 제작과 관련된 기술을 모두 정리해서 책의 뒷부분에 실었습니다.
도서 상세 이미지
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 레퍼런스
예제코드 관련 GitHub 페이지
- GitHub 페이지: https://github.com/wikibook/html-css-design
- ZIP 형식으로 다운로드: https://github.com/wikibook/html-css-design/archive/master.zip
22쪽, 본문 중간의 Android 아이콘 하단의 박스
4.3
이후
==>
4.3
이전
32쪽, 예제 코드에서 7번째 줄
--dark-color: #2B5566;
==>
--dark-main-color: #2B5566;
32쪽, 우측 하단 C 영역의 4번째 줄
어두운 색상을 “--dark-color”라는
==>
어두운 색상을 “--dark-main-color”라는
189쪽, 예제 코드의 밑에서 2번째 줄
padding: 120px 10px 30px;
==>
padding: 30px 10px;
211쪽, 우측 하단 예제의 빨간색으로 표시된 부분
.history th { padding-right: 1rem; text-align: left; word-break: keep-all; }
==>
.history th { padding-right: 1rem; text-align: left; word-break: keep-all; white-space: nowrap; }
235쪽, 우측 하단 예제의 빨간색으로 표시된 부분의 5번째 줄
라요. 이유는 ...</</p>
==>
라요. 이유는 ...</p>
247쪽, 맨 마지막 줄
“r-only”
를 추가합니다. ==>“sr-only”
를 추가합니다.309쪽, 우측 상단 예제 코드의 3번째 줄
align-items: ~ ;
==>
flex-wrap: ~ ;