<aside> <img src="/icons/cursor-click_pink.svg" alt="/icons/cursor-click_pink.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

</aside>

🌿 반응형 웹이란?

반응형 웹이란, 다양한 디바이스에서 접속했을 때 기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 를 뜻합니다.

❗️ 반응형 웹이 잘 구현되어 있는 에어비앤비 웹페이지입니다. 차례대로 데스크탑 PC 접속, 태블릿 PC 접속, 모바일 기기 접속 시 보이는 화면입니다. https://www.airbnb.co.kr/

그렇다면 반응형 웹은 어떻게 구현할 수 있을까요?

🌿 미디어 쿼리

미디어 쿼리란 Viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능입니다. 이 때, 뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있습니다.

기본 형태

미디어 쿼리의 기본 형태는 다음과 같습니다.

@media screen and (max-width: 500px) {
	/* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 적습니다. */
}