반응형
Responsive Design
화면 크기(휴대폰·태블릿·PC)에 맞춰 배치가 알아서 바뀌는 것이에요.
💡 물이 어떤 그릇에 담겨도 그릇 모양에 맞춰지는 것과 같아요.
🤖 AI에게 이렇게 말해 보세요
이 페이지를 반응형(Responsive)으로 만들어 줘. 768px 이하 휴대폰에서는 카드가 한 줄에 1개, 태블릿은 2개, PC는 3개씩 보이게 하고 메뉴는 햄버거 메뉴로 바꿔 줘.
핵심은 ‘Responsive Design’라는 단어예요. 이 단어를 넣으면 AI가 훨씬 정확하게 알아들어요.
📌 알아 두면 좋아요
화면 폭이 바뀌는 기준점을 '브레이크포인트(Breakpoint)'라고 불러요. 크롬에서 F12 → 휴대폰 아이콘을 누르면 휴대폰 화면을 미리 볼 수 있어요.
이럴 때 써요
- 휴대폰으로 보는 사람이 많을 때 (거의 항상!)
이렇게도 불러요: 모바일 대응, 휴대폰 화면, 브레이크포인트, breakpoint, 모바일, 태블릿, 화면 크기