-
CSS 입문 (6) 미디어쿼리Frontend/CSS 2023. 7. 30. 00:14
미디어쿼리
- 목적: 미디어 매체마다 다른 CSS 스타일을 적용할 수 있게 함. 미디어 매체 = 스크린 매체(모니터, 폰 디스플레이), 프린트, 스크린 리더기 등
- 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어짐.
- 미디어 쿼리를 사용하여 반응형 동작 처리도 가능해짐.
1) 미디어타입 Media Type
all, screen, print(이쇄 미리보기로도 확인 가능), 생략 = all
2) 미디어특성 Media Feature
width: 뷰포트의 너비 = 브라우저 창의 너비
orientation: 미디어가 세로모드(portrait)인지 가로모드(landscape)인지 구분
3) 미디어쿼리 문법
@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
- <!--* 는 0개 이상, ?는 0개 또는 1개, S*는 띄어쓰기--> <!--[a] : a가 나오거나 나오지 않거나--> <!--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* ;
참고
비전공자를 위한 HTML/CSS (Boostcourse)
https://www.w3c.org/TR/css3-mediaquery3
'Frontend > CSS' 카테고리의 다른 글
CSS 입문 (5) 레이아웃 (1) 2023.07.29 CSS 입문 (4) 폰트, 텍스트 (0) 2023.07.26 CSS 입문 (3) 단위, 배경, 박스모델 (0) 2023.07.20 CSS 입문 (2) 가상 선택자 ~ Cascading (0) 2023.07.15 CSS 입문 (1) 기본 문법 ~ 선택자 (1) 2023.07.14