본문으로 건너뛰기

미디어 쿼리(Media Query)

미디어 쿼리(Media Query)

Media Query는 웹 페이지의 스타일을 스마트폰, 태블릿, PC 등 다양한 화면 크기에 따라 최적의 레이아웃과 디자인을 보여주기 위해 사용합니다.


기본 구조

Media Query는 @media로 시작하며, 그 뒤에 조건을 기술합니다.

해당 조건을 만족하는 경우에 대한 스타일은 중괄호 { } 안에 넣습니다.


예시:

CSS
/* 화면 크기가 600px 미만일 때의 스타일 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue; /* 배경색을 lightblue로 설정 */
}
}

여기서는 화면 크기가 600px 미만일 때 body의 배경색을 lightblue로 설정합니다.