[CSS] Media Queries

Media queries란?

미디어 쿼리는
media type ( screen, print, speech )
media features(color, resolution etc)
에 따라서 웹 스타일을 제약할 수 있다.

Media queries 논리 연산자와 구문 해석

미디어 쿼리는 논리 연산자를 사용하여 구문이
true일 경우 스타일이 지정되고, false 경우 스타일이 입혀지지 않는다.
미디어 쿼리에서의 논리 연산자 종류

• , 는 or를 나타냄
• and
• not
• only

💡 Example

@media (min-height: 680px), screen and (orientation: portrait) { ... }

화면이 달린 사용자의 기기가 세로모드이거나 기기 화면의 높이가 최소 680px이상 일 때 스타일이 적용될 수 있음을 의미한다.

Media queries구문 사용

media queries syntax는

• CSS의 @import, @media
• HTML의

등의 상황에서 사용할 수 있다.

@import url(example.css) screen and (color), projection and (color);

@media screen and (color), projection and (color) { … }

<link rel="stylesheet" media="screen and (color), projection and (color)" rel="stylesheet" href="example.css">

Media Type

미디어 유형은 장치의 일반적인 범주를 나타내며,
종류는 all, screen, print, speech가 있다.
not, only 연산자 없이 아무것도 지정하지 않으면
all을 나타낸다.

• 모든 장치 다 가능하도록 하려면
  • @media all and...
  • 아무것도 작성하지 않기

Media Features

많은 특성들이 있지만
대표적으로

• width, height: 스크롤바를 포함한 뷰포트의 너비와 높이
• device-width, device-height: 출력장치(기기) 렌더링 표면의 너비와 높이
• aspect-ratio
• device-aspect-ratio
• orientation: portrait, landscape
  등이 있다.

width, height 처럼 prefix로 min-, max-를 줄 수 있는 특성들도 있다.

---

📎 false가 되는 상황과 각 media features에 관해
자세한 내용들이 있는 링크

https://www.w3.org/TR/css3-mediaqueries/
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries