옮긴이 머리말 x 베타리더 후기 xii 들어가며 xiii 이 책을 읽는 방법 xv 각 파트의 학습 포인트 xvi 이 책에서 만들 사이트 xvii 실습용 데이터 다운로드 xxi 4개의 부록을 다운로드하자 xxii 프롤로그 만화 xxvi PART 1 HTML 작성하기 CHAPTER 1 시작하기 전에 SECTION 1 학습을 시작하기 전에 2 SECTION 2 웹사이트의 구조 이해하기 3 SECTION 3 필요한 애플리케이션 설치하기 4 SECTION 4 효율적으로 학습하기 9 SECTION 5 초간단 예제로 워밍업하기 12 CHAPTER 2 HTML의 기본 SECTION 1 마크업이 중요한 이유 14 SECTION 2 러브레터 내용 정리하기 16 SECTION 3 HTML 첫발 딛기 20 SECTION 4 러브레터 마크업하기 24 SECTION 5 읽기 쉬운 코드 작성하기 38 PART 2 SNS 링크 모음 페이지 만들기 이 파트에서 만들 사이트 ▶ SNS 링크 모음 사이트 42 CHAPTER 3 CSS의 기본 SECTION 1 CSS 첫발 딛기 44 SECTION 2 개발자 도구 사용하기 46 SECTION 3 HTML과 CSS 연결하기 48 SECTION 4 브라우저 기본 스타일 리셋하기 52 SECTION 5 박스 모델 이해하기 54 CHAPTER 4 SNS 링크 모음 CSS 작성하기 SECTION 1 CSS 작성하기 56 PART 3 2칼럼 페이지 만들기 이 파트에서 만들 사이트 ▶ 2칼럼 레이아웃 디자인 74 CHAPTER 5 블로그 사이트 HTML 작성하기 SECTION 1 웹사이트의 영역 구분하기 76 SECTION 2 블로그의 문서 구조 마크업하기 78 SECTION 3 아웃라인과 섹션 알아보기 83 SECTION 4 그 외에 새로운 HTML 태그 배우기 86 CHAPTER 6 블로그 사이트 CSS 작성하기 SECTION 1 Flexbox 레이아웃 알아보기 90 SECTION 2 페이지 전체와 헤더의 CSS 작성하기 94 SECTION 3 메인 영역과 사이드바의 CSS 작성하기 100 SECTION 4 아티클 영역과 푸터의 CSS 작성하기 110 PART 4 1칼럼 페이지 만들기 이 파트에서 만들 사이트 ▶ 1칼럼 레이아웃 디자인 120 CHAPTER 7 웹 초대장 사이트 HTML 작성하기 SECTION 1 HTML 구조 파악하기 122 SECTION 2 페이지 내부 링크 넣기 124 SECTION 3 폼 마크업하기 125 CHAPTER 8 웹 초대장 사이트 CSS 작성하기 SECTION 1 CSS 작성 순서 132 SECTION 2 웹 폰트를 사용하는 방법 134 SECTION 3 글꼴 관련 CSS 작성하기 136 SECTION 4 레이아웃 관련 CSS 작성하기 137 SECTION 5 공통 디자인 CSS 작성하기 139 SECTION 6 헤더 CSS 작성하기 140 SECTION 7 msg 섹션 CSS 작성하기 149 SECTION 8 date 섹션 CSS 작성하기 153 SECTION 9 form 섹션 CSS 작성하기 157 SECTION 10 footer와 패럴랙스 효과 CSS 작성하기 162 CHAPTER 9 CSS 애니메이션 추가하기 SECTION 1 CSS 애니메이션의 기초 164 CHAPTER 10 반응형 웹 디자인 지원하기 SECTION 1 멀티 디바이스 지원의 기본 170 SECTION 2 반응형 웹 디자인 준비하기 172 SECTION 3 각 파트를 화면 안에 넣기 177 SECTION 4 각 파트의 디자인 조정하기 180 SECTION 5 고해상도 디스플레이 지원 이미지 만들기 184 PART 5 멀티 페이지 사이트 만들기 이 파트에서 만들 사이트 ▶ 멀티 페이지 사이트 188 CHAPTER 11 사이트 제작과 웹 디자인의 기본 SECTION 1 웹사이트 제작의 흐름 190 SECTION 2 웹 디자인 개요 193 SECTION 3 웹 디자인의 기본 194 CHAPTER 12 레스토랑 사이트 CSS 작성하기(모바일) SECTION 1 멀티 페이지 사이트 제작의 포인트 198 SECTION 2 TOP 페이지 CSS 작성하기 200 SECTION 3 CONCEPT 페이지 CSS 작성하기 208 SECTION 4 MENU 페이지 CSS 작성하기 220 SECTION 5 INFO 페이지 CSS 작성하기 224 CHAPTER 13 레스토랑 사이트 CSS 작성하기(PC) SECTION 1 TOP 페이지 CSS 작성하기(PC) 234 SECTION 2 CONCEPT 페이지 CSS 작성하기(PC) 240 SECTION 3 MENU 페이지 CSS 작성하기(PC) 246 SECTION 4 INFO 페이지 CSS 작성하기(PC) 248 CHAPTER 14 참고 사이트 활용 방법 배우기 SECTION 1 웹상의 정보 활용하기 250 SECTION 2 샘플 코드를 사이트에 끼워 넣기 252 CHAPTER 15 웹사이트 공개 준비하기 SECTION 1 파비콘 설정하기 254 SECTION 2 OGP 설정하기 256 이 책을 읽은 후의 공부 방법 258

CSS는 Cascading Style Sheets의 머리글자로 된 약자입니다. ‘Cascading’은 계단 모양의 폭포를 뜻하는 단어로, 그 모양처럼 위에서 아래로 흐른다(상속된다)는 의미가 생겼습니다. / 앞에서 HTML은 요소의 중첩 구조로 이루어진다고 설명했습니다(23쪽). 상속이란 부모 요소에 지정된 CSS를 자식 요소가 이어받는 특성을 말합니다. / 모든 CSS가 상속되는 것은 아니지만, 부모 요소에 지정한 CSS는 기본적으로 자식 요소에도 적용된다는 점을 기억해둡시다. (44쪽) HTML 문서는 의미에 대한 정보를 담고 있을뿐, 원래 글자 크기를 바꾸거나 줄바꿈을 하는 등의 시각적인 효과를 지시하지는 않습니다. / 제목으로 마크업한 글자가 브라우저상에서 크기가 커지고 줄바꿈이 되는 것은 브라우저가 제목 요소에 자체적인 스타일을 적용했기 때문입니다. / 이러한 스타일을 ‘브라우저 기본 스타일’이라고 합니다. 정식 명칭으로는 User Agent Stylesheet(사용자 에이전트 스타일시트)입니다. 기본 CSS는 통일된 사양이 없기 때문에 브라우저에 따라 다른 스타일이 적용되기도 합니다. (52쪽) STEP1에서 지정한 margin-bottom:40px;과 STEP2에서 지정한 margin-top:80px;은 같은 영역에 margin을 지정했지만, 40px+80px=120px의 margin이 되는 것은 아닙니다. / 이는 인접한 요소의 상하 방향 margin을 지정할 때 일어나는 현상으로 마진 상쇄(margin collapsing)라고 부릅니다. / 마진 상쇄가 발생할 때는 더 큰 값의 마진이 적용됩니다. (151쪽) 모바일 퍼스트(Mobile First)란 사이트를 설계할 때 모바일 디바이스의 특성에 최적화하는 사고방식입니다. 예를 들어, 화면 사이즈가 작다, 통신 데이터 양이 제한될 때가 있다, 이동 중에 중간중간 열람된다 등의 특성에 대해 생각합니다. / 단순히 ‘모바일 버전부터 만든다’라는 작업 순서를 말하는 것이 아니므로 주의해주세요. (191쪽) 디자인은 외관을 아름답게 하는 것이라고 이해될 때가 많은데 design이라는 단어의 어원(designare)에는 설계하다라는 의미가 담겨 있습니다. / 제작 흐름에서 본 것처럼 디자인 시안을 제작하기까지 여러 과정이 있고, 웹 디자인은 그 모든 과정을 계승한 후에 성립됩니다. / 즉, 웹 디자인은 외관을 아름답게 하는 것만이 아니라 타깃 사용자나 사이트 목적에 맞게 설계된 것이라고 할 수 있습니다. / 타깃이나 목적이 달라지면 좋은 디자인의 정의도 달라집니다. (193쪽) 화면이 가로로 긴 PC와 세로로 긴 스마트폰에서 사용하는 이미지의 가로·세로 비율이 다를 때가 있습니다. 여러 개의 이미지를 준비해서 디바이스에 따라 이미지를 교체하는 방법도 있지만, object-fit 속성을 사용하면 1장의 이미지로 다양한 디바이스를 지원할 수 있습니다. / object-fit 속성은 요소가 차지하는 영역 안에 이미지를 어떻게 표시할지를 지정합니다. objectposition을 같이 사용하면 이미지의 어느 부분을 표시할지도 지정할 수 있습니다. (218쪽)