it공부 (개념)/HTML, CSS
CSS MEDIA QUERY(미디어쿼리)란? 개념 및 사용법
cantor
2023. 1. 11. 20:10
True icons created by Freepik - Flaticon
Media? Query?
- Media: 중간 매개물. 매체
- Query: 질문
Media Query(미디어쿼리)?
웹에 접근하는 Media(기계 혹은 뷰포트)의 특성에 따라, 다른 스타일을 적용 할 수 있게 해주는 CSS 기술
CSS의 조건문이라고 생각하면 편하다.
responsive(반응형) 웹사이트를 만드는데에 널리 이용된다.
형태
@media media-type and (expression){
<style css>
}
예시
@media screen and (max-width: 600px){
h1 {font-size: 200px;
}
div {
position: absolute;
}
}
media가 screen이며 너비가 600px 이하인경우, h1의 font-size를 200px로 번경하고, div태그의 position을 absolute로번경한다.
@media media-type and expression{}
Media type의 종류
- screen: 컴퓨터, 모바일 기기 등의 화면에 적용된다.
- print: 문서를 프린트 할때 적용된다.
- speech: screen-reader(스크린 낭독기), Text-to-speech(TTS, 텍스트를 음성으로 바꾸는 프로그램) 등에 적용된다.
@media media-type and expression{}
Expression
논리적으로 true or false 중 하나의 결과값을 갖는 Media query의 조건식.
형태: (condition: condition value)
- width: 뷰포트의 넓이.
ex) @media (max-width: 800px){} : 너비가 800px 이하일 때 적용된다.
- height: 뷰포트의 높이
ex) @media (max-height: 800px){} : 높이가 800px 이하일 때 적용된다.
- aspect-ratio: 뷰포트의 비율:
ex) @media (aspect-ratio: 11/9) : 뷰포트가 11:9 일때 적용된다.
- device-width: 기기 스크린의 너비.
ex) @ media (max-device-width: 400px){} : 기기 너비가 400px 이하일 떄 적용된다.
- device-height: 기기 스크린의 높이.
@ media (max-device-height: 400px){} : 기기 높이가 400px 이하일 떄 적용된다.
- device-aspect-ratio: 기기 스크린의 비율.
@ media (device-aspect-ratio: 11/9) {} : 기기 스크린 비율이 4:3일 때 적용된다.
- orientation: 기기 스크린의 묘사방향: portrait (초상화) 혹은 landscape (풍경)
portrait: 스크린의 height(높이)값이 width(너비)값 보다 큰 경우.
landscape: 스크린의 width(너비)값이 height(높이)값 보다 큰 경우.
ex) @media (orientation: landscape) {} : 기기스크린의 너비가 높이보다 큰 값을 가질때 적용된다.
- resolution: 스크린의 분해능 dot per inch (dpi) 또는 dots per centimeter (dpcm).
ex) @media (min-resolution: 300dpi) {} : dpi가 300 이상일때 적용된다.