CSS - 미디어 쿼리

춤추는개발자·2023년 4월 23일
0
post-thumbnail

미디어 쿼리

미디어 타입을 인식하고 콘텐츠를 읽는 기기나 브라우저의 물리적 속성을 감지하는 기능 입니다.
미디어 쿼리는 미디어 타입, 조건에 대한 물음 두 가지 구성 요소를 가지고 있습니다.

미디어 쿼리의 사용 방법

@media 미디어 타입 and 조건에대한 물음 {
// 미디어 타입과 조건에대한 물음을 만족할 때 지정되는 스타일
}

가장 많이 사용되는 미디어 타입과 조건에대한 물음 (쿼리) 은
미디어 타입은 screen(화면) 이고
조건에대한 물음은 max-width, min-width, max-height, min-height 이다.
max-width 는 지정한 값보다 화면의 너비가 작거나 같다면 적용되고
min-width 는 지정한 값보다 화면의 너비가 크거나 같다면 적용 됩니다.
max-height 는 지정한 값보다 화면의 높이가 작거나 같다면 적용된다.
min-height 는 지정한 값보다 화면의 높이가 크거나 같다면 적용 됩니다.

조건에대한 물음에 width 를 사용할수는 있지만 딱 화면의 너비가 지정한 값과 같을때만 적용되기 때문에 잘 사용하지 않는다.

미디어 쿼리를 적용하는 형태

link 태그에 미디어 쿼리를 적용하는 방법

<link rel="stylesheet" href="style.css" media = "screen and (max-height: 600px)"/>

import 를 사용하여 적용하기

@import url("style.css") screen and (max-height: 600px);

0개의 댓글