CSS · 13 미디어 쿼리와 중단점
단계: Flex·Grid와 반응형 · 편집 가능한 예제 · 저장 ID: css-step-13
목표와 학습 후 역량
- 중단점 전후 계산 스타일과 열 수를 기록한다.
- 네 검사 폭에서 조작이 겹치지 않는다.
선수 지식
12단위 「배치 영역과 소스 순서」의 결과물과 실험 기록
핵심 개념과 설명
조건 분기
미디어 쿼리는 뷰포트 등 환경 조건에 따라 선언을 적용합니다. 장치 이름보다 콘텐츠가 깨지는 지점에서 중단점을 찾습니다.
연속 범위
중단점 바로 전후도 검사해야 합니다. 지정한 대표 폭만 맞으면 경계에서 레이아웃이 튈 수 있습니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 로컬 프로젝트에서 직접 구현하고 브라우저 개발자 도구로 확인하세요. 별도 폴더의 index.html에 콘텐츠를 만들고 link rel="stylesheet"로 실습 CSS를 연결하세요. 개발자 도구에서 뷰포트·계산 스타일·성능 기록을 확인합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- index.html에 중단점 전후 1px와 360px·1200px 조건의 콘텐츠를 준비하고 media.css를 연결하세요.
- 카드와 탐색이 충돌하는 폭을 찾고 한 열에서 세 열로 전환하는 규칙을 작성하세요.
- 중단점 전후 1px와 360px·1200px 조건으로 실행하세요. 확인할 결과: 중단점 전후 계산 스타일과 열 수를 기록한다. 네 검사 폭에서 조작이 겹치지 않는다. 예상과 실제 결과는 구분해 기록하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 뷰포트 | 699px | 700px | 실행 전 가설: 설정한 미디어 조건의 적용 여부가 바뀔 것이다. 다른 조건은 고정하고 실행 후 실제 결과를 따로 기록합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 중단점 전후 계산 스타일과 열 수를 기록한다.
- 네 검사 폭에서 조작이 겹치지 않는다.
자가 점검
- 중단점을 콘텐츠로 정한 근거는 무엇인가요?
- 확대하면 CSS 뷰포트 폭은 어떻게 달라지나요?
공식 참고
연결된 예제와 실행 범위
실제 CSS 문서를 렌더하고 DOM 치수와 계산 스타일을 검사합니다. Shadow DOM에서 문서 body/html 선택자를 범위화합니다. @media는 외부 미리보기 viewport에 반응하며 폭 슬라이더는 컨테이너만 변경합니다. 네트워크·폼 이동·iframe 실행은 제한됩니다.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 배치 영역과 소스 순서 · 다음: 반응형과 모션