HTML+CSS+JavaScript
13.9
반응형 코드 적용하기
작성한 코드를 웹 브라우저에서 실행했을 때 웹 브라우저의 가로 너비가 1140px보다 크면 스크롤 없이 전체가 정상적으로 보입니다. 그러나 웹 브라우저의 가로 너비가 1140px보다 작아지면 보기 불편해집니다. 그래서 이번에는 접속 기기의 가로 너비에 따라 화면이 바뀌도록 반응형 CSS 코드를 작성해 보겠습니다.
Note 미디어 쿼리는 스크롤 바의 너비를 포함하지 않아요.
미디어 쿼리는 1140px 기준으로 작성하지만, 이는 웹 브라우저의 스크롤 바의 너비를 포함하지 않는, 코드로 표현되는 화면 너비의 기준입니다. 따라서 만약 크롬 브라우저에 스크롤 바가 생긴 상태라면 기본 가로 너비(1140px)에 크롬 브라우저의 스크롤 바 너비(18px)를 합한 1158px까지 넓혀야 정상적으로 보입니다. 참고로 웹 브라우저마다 스크롤 바의 너비가 다릅니다.