반응형 그리드
CSS Grid로 모바일에서 데스크톱까지 부드럽게 레이아웃이 변합니다.
핵심 기능 미리보기
접근성 우선
명확한 레이블, 키보드 포커스, 대비, ARIA로 누구나 접근 가능.
컴포넌트 설계
카드, 테이블, 폼 등 재사용 가능한 블럭으로 확장성 확보.
코드 스니펫
// 간단한 토글 상태 저장
const state = { theme: 'dark' };
function setTheme(t) {
state.theme = t;
document.documentElement.dataset.theme = t;
localStorage.setItem('theme', t);
}
| 기능 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| CSS Grid | 지원 | 지원 | 지원 | 지원 |
| prefers-color-scheme | 지원 | 지원 | 지원 | 지원 |
| View Transitions | 부분 | 미정 | 부분 | 부분 |
문서 예시와 패턴
목차
- 설치
- 레이아웃
- 컴포넌트
- 유틸리티
설치
CDN 혹은 번들러 환경에 맞춰 CSS와 JS를 로드하세요.
<link rel="stylesheet" href="/dist/styles.css">
<script defer src="/dist/app.js"></script>레이아웃
container와 grid 유틸리티를 사용하면 브레이크포인트 없이도 반응형이 자동으로 조정됩니다.
접근성 팁
- 레이블: 모든 입력에
<label for>과id를 매칭 - 포커스: 키보드 탭 순서와 포커스 스타일 제공
- 대체 텍스트: 의미 있는 이미지에는
alt또는 ARIA 라벨 제공