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

#지난주에 이어서...

2주차에서 HTML과 CSS의 기본 문법을 익혔다면,
3주차는 ‘화면을 어떻게 배치하고, 어떻게 반응하게 만들 것인가’에 집중하는 구간이었다.

# CSS 박스 모델

CSS 레이아웃의 시작이 되는 박스 모델을 다룬다.

• 콘텐츠(content), 패딩(padding), 테두리(border), 마진(margin)

• 요소 크기 계산 방식

• 여백을 조절하는 속성

• 기본 레이아웃 구성

*“왜 생각한 크기랑 실제 화면 크기가 다를까?”에 대한 답이 박스 모델에 다 들어 있었다.
CSS를 헷갈리게 만드는 거의 모든 문제의 출발점이라는 느낌.

# 이미지와 그라데이션 효과로 배경 꾸미기

배경을 다루는 CSS 속성들을 집중적으로 배운 장이다.

• 배경색과 배경 범위

• 배경 이미지 지정

• 반복, 위치, 크기 설정

• 그라데이션 효과 적용

*단순히 색만 칠하는 게 아니라
이미지 + 그라데이션을 조합해서 화면 분위기를 만드는 방법을 익힐 수 있었다.
실무 감각이 조금씩 느껴지기 시작한 파트.

# 반응형 웹과 미디어 쿼리

이제 화면은 고정 크기가 아니라는 걸 전제로 학습이 진행된다.

• 반응형 웹의 개념

• 화면 크기에 따라 요소가 변하는 구조

• 미디어 쿼리 기본 문법

• 디바이스별 대응 방식

*“PC에서 잘 보이던 화면이 왜 모바일에선 깨질까?”
이 질문에 대한 명확한 해답을 주는 장이었다.
CSS는 결국 조건에 따라 다르게 보여주는 언어라는 게 확 와닿았다.

# 플렉스 박스 레이아웃으로 배치하기

레이아웃의 판도를 바꾼 Flexbox 파트.

• flex 컨테이너와 아이템 개념

• 정렬과 배치 방식

• 반응형을 고려한 레이아웃 구성

*예전처럼 float나 position에 의존하지 않고
정렬과 배치를 훨씬 직관적으로 할 수 있다는 점이 인상적이었다.
처음엔 속성이 많아 헷갈리지만, 익숙해질수록 강력한 도구라는 느낌.

# 3주차를 마치며

3주차는 한마디로
*“CSS는 꾸미는 게 아니라 설계하는 언어”라는 걸 체감한 주차였다.

• 박스 모델로 구조를 이해하고

• 배경으로 분위기를 만들고

• 미디어 쿼리로 화면에 반응하게 만들고

• Flexbox로 배치를 정리하는 흐름

이제야 “웹 페이지를 만든다”는 감각이 조금씩 잡히기 시작했다.