Do it! HTML + CSS 웹 표준의 정석 - 겨울 방학 맞이 기초 언어 스터디(4)

#지난주에 이어서...

3주차에서 Flexbox와 반응형 개념을 익혔다면,
4주차는 CSS 레이아웃과 선택자의 ‘완성 단계’라고 느껴지는 구간이었다.

# CSS 그리드 레이아웃으로 배치하기

Flexbox가 한 방향 정렬이라면,
Grid는 화면 전체를 설계하는 레이아웃 도구라는 느낌이었다.

• CSS Grid 기본 개념

• 행(row)과 열(column) 구조

• 그리드 라인과 템플릿 영역

• 전체 레이아웃 설계 방식

* 화면을 칸 단위로 설계할 수 있어서
페이지 구조가 훨씬 명확해졌다.
“이건 Flex로, 이건 Grid로”
레이아웃 도구를 상황에 맞게 선택하는 감각이 생긴 파트.

# CSS 고급 선택자

CSS를 더 똑똑하게 쓰기 위한 선택자 심화 파트다.

• 연결 선택자

• 속성 선택자

• 가상 클래스와 가상 요소

• CSS 함수 사용해보기

* HTML 구조를 그대로 두고도
원하는 요소만 정확히 집어 스타일을 적용할 수 있다는 점이 인상적이었다.
CSS가 단순한 스타일 언어가 아니라
조건과 상태를 다루는 언어라는 느낌이 확 와닿았다.

# 4주차를 마치며

4주차를 정리해보면
CSS로 ‘배치하고, 선택하고, 제어하는 방법’을 완성한 주차였다.

• Grid로 전체 레이아웃을 설계하고

• 고급 선택자로 세밀하게 스타일을 적용하면서
  CSS를 훨씬 구조적으로 바라보게 됐다.

처음엔 속성도 많고 개념도 어려웠지만,
이제는 화면을 보면 “이건 어떤 방식으로 짜면되겠다."
같은 생각이 들기 시작한다.