[ Study/HTML & CSS ]
[HTML & CSS] 미디어 쿼리 @media
2024-06-25 00:14:25
어제 배포에 성공하면서 휴대폰으로 내가 만든 페이지를 들여다보니 pc 해상도에 맞춰진 레이아웃이 휴대폰 해상도에 그대로 옮겨져있어 클릭하고 움직일 때 너무 불편했다. 그래서 오늘 간략하게 적용한 미디어 쿼리를 메모할 겸 잠깐 남겨놓는다.1. 미디어 쿼리란?뷰포트(viewport)의 크기에 따라 서로 다른 레이아웃을 생성할 수 있게 도와준다.반응형 웹싸이트를 구현할 때 많이 사용된다.미디어 유형과 미디어 특성으로 구성되는 참 / 거짓의 값을 가지는 논리식이다.2. 미디어 쿼리 적용 예시/** 최대 넓이가 767px 일 때 적용된다. (~ 767px) **/@media (max-width: 767px) { body { width: 100%; } nav { width: 100% !important;..