CSS 입문 (6) 미디어쿼리

Frontend/CSS 2023. 7. 30. 00:14

미디어쿼리

목적: 미디어 매체마다 다른 CSS 스타일을 적용할 수 있게 함. 미디어 매체 = 스크린 매체(모니터, 폰 디스플레이), 프린트, 스크린 리더기 등
미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어짐.
미디어 쿼리를 사용하여 반응형 동작 처리도 가능해짐.

all, screen, print(이쇄 미리보기로도 확인 가능), 생략 = all

width: 뷰포트의 너비 = 브라우저 창의 너비

orientation: 미디어가 세로모드(portrait)인지 가로모드(landscape)인지 구분

@media mediaqueries{/* style rules */}

@media( at media라고 읽음.): 선언 방법은 총 3가지
- <style> Tag 내부에 선언 : 가장 많이 사용
- <link> Tag 안에 media=”~” 선언
- @import url(~) media_query
mediaqueries: True or False 로만 판단되며 True 일 때에만 Style 규칙을 적용함.
- media_query_list: 0개 이상, 2개 이상의 media_query는 ‘,’(쉼표)로 연결
- media_query: media_type 앞에 NOT 이나 ONLY 을 붙일 수 있음. 단, 하나의 미디어 커리 전체(미디어타입+미디어특성)에만 적용함. media_type과 expression은 AND 키워드로 연결(and도 가능). AND는 가장 마지막에 해석됨. , expression은 생략 가능, media_type 없는 형태도 가능(media_type을 all로 간주)
- expression: 미디어 표현식. (media_feature: 값) 으로 구성
- min- / max-: 접두사. media_feature 앞에 붙임. orientation, grid, scan처럼 특정 키워드를 값으로 갖는 특성들에는 붙일 수 없음. ex) min-width: 768px ⇒ 최대 너비가 768px일 때까지 (이상/이하)
- 모바일first, 데스크탑first
<!--a|b : a 또는 b-> media_query_list :S*[media_query[','S*media_query]*]? ; media_query :[ONLY|NOT]?S* media_type S*[AND S* expression]* | expression[AND S* expression]* ; expression :'('S* media_feature S*[':'S*expr]?')'S* ;

참고