미디어 쿼리(Media Query)
Media Query는 웹 페이지의 스타일을 스마트폰, 태블릿, PC 등 다양한 화면 크기에 따라 최적의 레이아웃과 디자인을 보여주기 위해 사용합니다.
기본 구조
Media Query는 @media로 시작하며, 그 뒤에 조건을 기술합니다.
해당 조건을 만족하는 경우에 대한 스타일은 중괄호 { } 안에 넣습니다.
예시:
CSS
/* 화면 크기가 600px 미만일 때의 스타일 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue; /* 배경색을 lightblue로 설정 */
}
}
여기서는 화면 크기가 600px 미만일 때 body의 배경색을 lightblue로 설정합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!