반응형 랜딩 페이지

디자인 시안을 받아 반응형 페이지로 옮기는 CSS 과제였다. 창 너비를 줄이면 두 칸 레이아웃이 한 칸으로 바뀐다.

작업 순서

1. 디자인 시안 준비
2. 폰트, 이미지, Bootstrap 임포트
3. *, body, 반응형 사이즈 CSS 작성
4. Reset CSS

새롭게 안 사실

1. CSS 에서 @import 로 폰트를 불러오면 FOUT 가 생긴다. 기본 글꼴로 먼저 그려지고 폰트가 받아지면 깜빡이며 다시 그리기 때문에, 폰트는 head 의 link 로 넣는다.
2. Google Fonts 가 주는 link 태그는 세 개인데 위 두 개는 CDN 연결을 미리 열어 두는 최적화 코드고, 실제로 폰트를 연결하는 것은 마지막 하나다.
3. Bootstrap 은 거대한 CSS 프레임워크라 필요한 그리드 파일(grid.min.css)만 가져온다.