반응형 웹이란, 다양한 디바이스에서 접속했을 때
기기의 Viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 를 뜻합니다.
❗️ 반응형 웹이 잘 구현되어 있는 에어비앤비 웹페이지입니다. 차례대로 데스크탑 PC 접속, 태블릿 PC 접속, 모바일 기기 접속 시 보이는 화면입니다. https://www.airbnb.co.kr/
그렇다면 반응형 웹은 어떻게 구현할 수 있을까요?
어떤 요소의 최대 너비를 설정하는 속성입니다.
너비값이 max-width 보다 커지는것을 방지하는 것이죠. 그래서 max-width 값은 width 속성값을 무효화 합니다. 예를들어서 ,
width: 500px;
max-width:400px;
이와 같은 경우, 400px이하로만 이미지가 보이게 되는 것이죠.
%는 요소의 크기, 위치, 패딩, 마진 등을 부모 요소에 상대적으로 설정할때 사용되는 속성입니다. (반응형 웹 구현에 자주 사용되겠죠? 🤗)
아래와 같이 적용할 경우, 너비는 부모 요소 너비의 50%, 높이는 부모 요소 높이의 50% 를 차지하게 됩니다.
div{
width: 50%;
height: 50%;
}