다양한 예제로 배우는 CSS 설계 실전 가이드

SMACSS, BEM, PRECSS 등 CSS 설계에 관한 다양한 사고 방법 학습! CSS를 보다 깊이 이해할 수 있는 8가지 설계 방법! 많은 개발 현장에서 CSS를 도입해서 사용하고 있지만, 여전히 여러 가지 고민이 남아 있습니다. 프로젝트의 규모나 특성에 따라 적합한 해결책 역시 천차만별인 게 현실입니다. 이 책은 CSS의 다양한 설계 방법을 소개하면서 제반 사고방식은 물론, 실전 포인트까지 짚어 줍니다. 이를 기반으로 버튼, 라벨, 카드, 테이블 등 대표적인 웹 모듈을 전반적으로 다루고, 이 구조들을 조합하는 실전적인 코드도 소개합니다.

Chapter 1 CSS의 역사와 문제점 1 1-1 CSS의 시작 2 1-2 CSS의 문제점 4 1-3 복잡해지는 웹 개발 6 1-4 해결책으로 탄생한 CSS 설계 9 1-5 CSS 설계와 디자인 시스템 연동 11 Chapter 2 CSS 설계 기본 및 실전 17 2-1 CSS 설계에 들어가기 전에: CSS 기본 상세도와 셀렉터 18 2-2 CSS 설계에 들어가기 전에: 리셋 CSS 24 2-3 CSS 설계에 들어가기 전에: 영단어를 결합하는 방식의 이름 28 2-4 좋은 CSS 설계의 네 가지 목표 29 2-5 CSS 설계 실전과 여덟 가지 포인트 31 2-6 모듈의 상세도를 고려한다 74 2-7 CSS 설계의 필요성 78 Chapter 3 다양한 설계 기법 79 3-1 이 장의 설명에 앞서 80 3-2 OOCSS 81 3-3 SMACSS 86 3-4 BEM 103 3-5 PRECSS 134 Chapter 4 레이아웃 설계 159 4-1 4~7장의 코드를 위한 사전 준비 160 4-2 이번 장에서 다루는 샘플 162 4-3 헤더 164 4-4 푸터 167 4-5 콘텐츠 영역 170 Chapter 5 CSS 설계 모듈집 ① 최소 모듈 179 5-1 이번 장 이후의 모듈집 설명 방법 180 5-2 최소 모듈 정의 181 5-3 버튼 182 5-4 아이콘이 붙은 작은 버튼 197 5-5 아이콘 201 5-6 라벨 207 5-7 제목 212 5-8 주석 220 Chapter 6 CSS 설계 모듈집 ② 복합 모듈 223 6-1 복합 모듈 정의 224 6-2 미디어 225 6-3 카드 235 6-4 테이블(수평) 256 6-5 테이블(수직) 263 6-6 테이블(교차) 266 6-7 페이저 270 6-8 내비게이션 276 6-9 CTA 279 6-10 가격표 281 6-11 FAQ 292 6-12 아코디언 298 6-13 점보트론 305 6-14 포스트 목록 312 6-15 순서가 없는 리스트 315 6-16 순서가 있는 리스트 321 Chapter 7 CSS 설계 모듈집 ③ 모듈 재사용 325 7-1 최소 모듈을 사용한 복합 모듈 만들기 326 7-2 최소 모듈과 복합 모듈 조합하기 329 7-3 복합 모듈 간 조합하기 337 Chapter 8 CSS 설계를 보다 잘하기 위한 스타일 가이드 347 8-1 스타일 가이드란 348 8-2 왜 스타일 가이드가 필요한가? 349 8-3 스타일 가이드 만들기 350 8-4 스타일 가이드 만들기를 위한 지침 모음 363 Chapter 9 CSS 개발에 도움이 되는 다양한 기술 365 9-1 CSS 개발 효율화와 실수 줄이기 366 9-2 사람에 따른 편차 없애기 369 9-3 리팩터링 힌트 얻기 373 9-4 CSS 경량화 375 9-5 HTML 개발 효율화하기 381 9-6 개발에 전달할 마스터 자동으로 처리하기 383