반응형 웹 디자인
IT 위키
더 많은 작업
- RWD; Responsive Web Design
- 하나의 문서로 화면 크기에 따라 배치가 달라지게 만들어, 어떤 기기에서 봐도 읽기 좋게 하는 웹 디자인 방식
2010년 이선 마르콧이 제안했다. 기기마다 별도의 페이지를 만들지 않고 같은 HTML 에 CSS 로만 대응하므로 주소가 하나로 유지되고 유지보수가 쉽다.
- 유연한 그리드 — 너비를 픽셀이 아니라 백분율로 잡아 화면에 따라 늘고 준다
- 유연한 이미지 — 이미지가 담긴 칸을 넘지 않도록 최대 너비를 제한한다
- 미디어 쿼리 — 화면 너비 같은 조건에 따라 다른 CSS 규칙을 적용한다
| 패턴 | 동작 |
|---|---|
| 모스트 플루이드 | 여러 단이 화면이 좁아지면 차례로 아래로 내려가 쌓인다. 가장 널리 쓰인다 |
| 칼럼 드롭 | 단이 하나씩 아래로 떨어져 결국 한 단이 된다 |
| 레이아웃 시프터 | 화면 크기마다 배치를 아예 다르게 정의한다. 자유롭지만 관리 부담이 크다 |
| 티니 트윅 | 글자 크기와 여백만 조금씩 조정한다. 한 단짜리 문서에 적합하다 |
| 오프 캔버스 | 자주 쓰지 않는 영역을 화면 밖에 두었다가 필요할 때 밀어 넣는다 |
반응형은 하나의 레이아웃이 연속적으로 변하고, 적응형(AWD)은 미리 정해 둔 몇 개의 고정 레이아웃 중 하나를 골라 보여 준다.