[CSS] 반응형을 위한 미디어 쿼리(media query)

반응형을 하려면 꼭 필요한 css 태그가 있다 바로 미디어 쿼리인데

@media 규칙을 이용해서 설정할 수 있다.

@media only 매체유형 and (조건문) {실행문}

-매체유형

all	모든 매체에 사용함.
print	프린터 기기에 사용함.
screen	컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함.
speech	웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함.

 

-미디어 쿼리(media query) 속성(조건문)

 

width	화면의 너비
height	화면의 높이
device-width	매체 화면의 너비
device-height	매체 화면의 높이
devie-aspect-ratio	매체 화면의 비율
orientation	매체 화면의 방향
color	매체의 색상 비트 수
color-index	매체에서 표현 가능한 색상의 개수
monochrome	흑백 매체에서의 픽셀당 비트 수
resolution	매체의 해상도

 

ex)

 body { background-color: white; }
    @media screen and (min-width: 640px) and (max-width:1280px) {
        body { background-color: pink; }
    }

가로값이 640px 이상 1280px 이하일 경우 핑크색 배경으로 바뀌는걸 볼 수 있다.

 

//세로 모드, 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:portrait){
   body{background:yellow}
}

//가로 모드, 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행
@media all and (orientation:landscape){
   body{background:yellow}
}

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행
@media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행
@media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행

 

특히 height값에 따른 레이아웃변경때문에 절대적 width 수치보다 비율이 중요할때가 있는데 이렇게 세로형과 가로형을 구분지어서 모바일과 pc를 나눠줄 수도 있다. 비율값은 '너비/높이' 순으로 조건을 작성한다.