스마트폰, 태블릿, 데스크톱…모든 디바이스에서 자연스럽게 보이는 웹을 만드는 기술,그게 바로 반응형 웹 디자인(Responsive Web Design) 이다. 이번 글에서는 CSS 미디어쿼리(Media Query) 의 핵심 개념부터그리드(Grid)와 플렉스(Flex)를 활용한 실전 반응형 설계법까지단계별로 완전히 정리했다. 💡 1. 반응형 웹 디자인이란? “하나의 웹페이지가 다양한 화면 크기에 맞춰 자동으로 레이아웃을 바꾸는 기술” 예전에는 모바일용, PC용 페이지를 따로 만들었다.하지만 지금은 하나의 HTML로 다양한 기기를 대응하는 시대다. ✅ 반응형의 핵심 요소 유연한 레이아웃 (Flexible Layout) 유동적인 이미지 (Fluid Images) 미디어쿼리 (Media Query) ..