새로운 CSS 레이아웃

chapter 1
우리가 지나온 길
한계 벗어나기
플롯의 문제
플롯 문제 해결

chapter 2
레이아웃 제작의 현재
CSS 아키텍처
전처리기와 후처리기
컴포넌트 우선 디자인
프레임워크
성능
접근성
자동으로 업데이트되는 브라우저
CSS 학습의 외주화

chapter 3
새로운 레이아웃
CSS의 양식화 문맥
플롯
위치 정하기
멀티 칼럼 레이아웃
플렉스박스
CSS 그리드 레이아웃

chapter 4
배치와 정렬
플렉스 아이템 배치
그리드 아이템 배치
그리드 아이템 정렬
플렉스 아이템 정렬
그리드 트랙의 배치와 정렬
자동 마진을 사용한 배치
논리적 속성과 물리적 속성

chapter 5
반응형 디자인
auto-fill 대 auto-fit
flex 속성을 사용한 크기 조절

chapter 6
소스 순서와 표현 순서
플렉스 박스의 흐름 방향
그리드 레이아웃의 흐름 방향

chapter 7
준비하는 미래
가설을 데이터로 확인하라
CSS 피처 쿼리를 통한 점진적 개선
그리드 자동 배치
플렉스박스와 그리드의 order 속성
마크업 ‘구조 단순화’의 위험성
브라우저 지원에 관한 마지막 당부

chapter 8
앞으로의 여정
CSS 버전 이해하기
명세를 따르라
브라우저 지원 요구와 버그 기록
곧 등장할 새 기능
독자 여러분과 웹의 미래

지난 25년간 웹 디자인 역사에서 그래픽 디자인 분야는 눈부신 발전을 이루었습니다. 예전에는 화면의 픽셀이 무척 컸지만 지금은 육안으로 구분이 되지 않을 정도로 작습니다. 컬러 화면이 등장한 초반에는 216 색상만 사용했습니다. 지금은 다른 어떤 기기에서도 전부 다 표현하지 못할 수준의 색 공간을 사용하죠. 겨우 몇 개의 타이포그래피로 근근이 작업하던 일이 몇 해나 이어지던 때가 있었지만 오늘날에는 금속 활자 식자공들이 꿈꾸었던 것보다 더 많은 글꼴을 다룹니다. 그렇지만 레이아웃은 CSS가 처음 등장하던 때에 비해 큰 발전이 없었습니다. 블로그 게시물을 위한 레이아웃을 만들고 이에 대해 서로 가르치는 것 이상으로 도통 더 나아가지 못한 시간이 15년이나 됩니다. 부트스트랩과 같은 프레임워크 덕분에 몇 가지
옵션이 더 생겼지만 반응형 웹 디자인이 등장한 후에도 기술적 제한 때문에 할 수 있는 일은 별로 없었습니다.
이제 크게 도약할 때입니다. 드디어 페이지 레이아웃도 빛을 낼 때가 됐습니다. 2017년 3월 CSS 그리드가 공개되면서 기술은 급변하기 시작했습니다. 마침내 레이아웃에 마음껏 창의력을 발휘할 수 있게 해줄 강력한 기술이 등장한 것이죠. 그래픽 디자인을 활용해 각 프로젝트, 섹션, 콘텐츠 유형, 페이지에 따라 독특한 레이아웃을 적용함으로써 레이아웃이 의미를 전달하는 매개체 역할도 할 수 있는 시대가 열린 것입니다. 새로운 기술이 등장했는 데도 예전과 똑같은 레이아웃을 그대로 답습하지 마세요. 사용자가 쓰는 기기가 어떻게 변했는지 탐구하세요. 웹이 어떻게 변화할 것인지 이미 안다고 자신하지 마세요. 웹 디자이너나 개발자가 웹의 레이아웃을 완벽히 통달했을 거라고 섣불리 믿는 것도 금물입니다. 레이아웃을 디자인할 ‘올바른 방법’은 더 이상 존재하지 않습니다.