CSS · 14 반응형과 모션
단계: Flex·Grid와 반응형 · 편집 가능한 예제 · 저장 ID: css-02
목표와 학습 후 역량
- 좁은 화면 전환 후 포커스 대상이 유지된다.
- reduce 조건에서 불필요한 이동이 사라지고 상태를 구분한다.
선수 지식
13단위 「미디어 쿼리와 중단점」의 결과물과 실험 기록
핵심 개념과 설명
사용자 선호
prefers-reduced-motion은 모션 감소 선호를 감지합니다. 불필요한 이동을 줄여도 상태 변화 정보는 남겨야 합니다.
표시와 조작
레이아웃 전환에서 현재 포커스를 유지합니다. 요소를 제거하거나 숨기면 키보드 위치가 예상 밖으로 이동할 수 있습니다.
실습 준비
Frontory의 기존 미리보기는 제한된 시작 예제이며 전체 과제의 완성본이 아닙니다. 추가 파일과 기능은 별도 로컬 프로젝트에서 직접 구현하세요. 별도 폴더의 index.html에 콘텐츠를 만들고 link rel="stylesheet"로 실습 CSS를 연결하세요. 개발자 도구에서 뷰포트·계산 스타일·성능 기록을 확인합니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- index.html에 360px·1200px와 모션 선호 두 상태 조건의 콘텐츠를 준비하고 responsive-motion.css를 연결하세요.
- 3열을 좁은 폭에서 단일 열로 바꾸고 카드 전환의 transform을 감소 모션 조건에서 제거하세요.
- 360px·1200px와 모션 선호 두 상태 조건으로 실행하세요. 확인할 결과: 좁은 화면 전환 후 포커스 대상이 유지된다. reduce 조건에서 불필요한 이동이 사라지고 상태를 구분한다. 예상과 실제 결과는 구분해 기록하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 모션 선호 | no-preference | reduce | 실행 전 가설: 이동 효과가 줄어도 선택 상태는 보일 것이다. 다른 조건은 고정하고 실행 후 실제 결과를 따로 기록합니다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 좁은 화면 전환 후 포커스 대상이 유지된다.
- reduce 조건에서 불필요한 이동이 사라지고 상태를 구분한다.
자가 점검
- 애니메이션 제거 뒤 완료 신호가 남나요?
- 탭으로 바꾸면 어떤 추가 키보드 계약이 필요한가요?
공식 참고
연결된 예제와 실행 범위
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: 미디어 쿼리와 중단점 · 다음: 컨테이너 쿼리와 재사용