👩🏻‍💻

웹페이지에서 우클릭 후 검사를 클릭하면 개발자 도구가 열립니다. 개발자 도구 상단의 두번째 아이콘인 'Toggle device toolbar'를 클릭하면 위와 같이 모바일, pc 등 다양한 기기, 다양한 크기의 화면에서 웹페이지가 어떻게 보이는지 확인해볼 수 있습니다. 미디어 쿼리를 이용하면 위 예시와 같이 뷰포트(화면 상의 표시 영역)의 넓이가 500px 이상일 때, 이하일 때 등 특정 조건을 만족했을 때의 웹페이지의 디자인을 다르게 설정할 수 있습니다. 미디어 쿼리의 기본 형태 @media mediatype and (expressions) { CSS-Code; } mediatype은 웹 페이지가 보여지는 장치를 의미합니다. expressions의 조건들이 모두 참이면 css-code의 내용을 웹 페이..