[CSS] 미디어 쿼리(Media Queries)
미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와준다. 사용 방법 @media [only | not] 미디어 유형 [and 조건] * [and 조건] @media screen and ( min-width : 200px ) and ( max-width : 500px ) { body { background : purple ; } } 미디어 쿼리 연산자 and : 위의 소스코드처럼 조건을 계속 추가할 수 있다. ,(쉼표) : 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 사용한다. only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 한다. not : not 다음에 지정하는 미디어 유형을 제외한 미디어 유형에서만 적용된다. 미디어 유형의 종류 all : 모든 미디어 유형 print : 인쇄 장치 screen : 컴퓨터, 스마트폰의 스크린 tv : 음성과 영상이 동시 출력되는 TV aural : 음성 합성 장치(주로 화면을 읽어 소리를 출력해 주는 장치) braille : 점자 표시 장치 handheld : 패드(pad)처럼 손에 들고 다니는 장치 projection : 프로젝터 미디어 쿼리 조건 가로, 세로 값 설정하는 속성 width, height : 웹 페이지의 가로 너비, 세로 높이 min-width, min-height : 최소 너비, 최소 높이 max-width, max-height : 최대 너비, 최대 높이 화면 회전 orientation : portrait 단말기 세로 방향 orientation : landscapte 단말기 가로 방향 미디어 쿼리 중단점 부트스트랩 기준 아주 작은 화면 : 576px 미만 작은 화면 : 576px 이상 중간 화면 : 768px 이상 큰 화면 : 992px 이상 아주 큰 화면 : 1200px 이상