반응형 디자인 소개 - Webflow 도움말
콘텐츠 재배치, 고정 크기, 상대적 크기, 그리고 브레이크포인트(미디어 쿼리)가 반응형 디자인을 만드는 데 어떻게 도움이 되는지 알아보세요.
모바일 기기에서 사이트를 방문할 때, 데스크톱 버전의 사이트가 작은 화면에 꽉 차 있는 것을 볼 수 있습니다. 이 경우 콘텐츠를 보기 위해 확대 및 이동해야 합니다. 또는 데스크톱 버전의 우수한 콘텐츠와 경험이 부족한 축소된 모바일 버전을 접할 수도 있습니다. 그러나 이상적으로는 브라우저의 너비에 따라 콘텐츠가 재배치되는 반응형 웹사이트를 보게 됩니다.
여기서 다룰 반응형 디자인의 세 가지 측면은 다음과 같습니다:
- 콘텐츠 재배치
- 고정 크기
- 상대적 크기
- 브레이크포인트 (미디어 쿼리)
콘텐츠 재배치
콘텐츠 재배치란 브라우저의 뷰포트 너비에 따라 콘텐츠의 너비가 조정되는 것을 말합니다. 예를 들어, 기본 설정이 있는 단락은 브라우저의 너비가 작아질 때 자동으로 콘텐츠를 감쌉니다. 이 동작은 디자이너 캔버스의 가장자리를 드래그하여 에뮬레이트할 수 있습니다.
고정 크기
상대적 크기
이는 브라우저 너비나 부모 요소와 같은 다른 요소에 상대적으로 요소의 크기를 설정하는 것을 의미합니다. 예를 들어, 이미지에 픽셀 기반 크기를 사용하는 대신 %, VW(뷰포트 너비), VH(뷰포트 높이)와 같은 다른 단위를 사용하는 것을 고려해보세요. 이미지에 %를 사용하고 브라우저 너비를 조정하면, px 기반 이미지와 달리 적절히 적응하는 것을 볼 수 있습니다.
브레이크포인트
레이아웃은 보통 하나의 이미지 너비를 관리하는 것보다 훨씬 복잡합니다. 브레이크포인트(미디어 쿼리라고도 함)를 사용하면 콘텐츠의 재배치를 테스트할 수 있을 뿐만 아니라, 다양한 기기 너비 범위에 따라 디자인과 레이아웃을 수정할 수 있습니다.
더 알아보기: