React Media Query란?

Media Query란?

• 미디어 쿼리는 CSS문법 중 하나이며 , 반응형 디자인을 사용할 수 있도록 도와준다.

문법

• 미디어 쿼리는 다음의 문법을 가지고 있다.

@media <media type> and (media feature) { /*...*/ }

• 시작은 at-rule 이라고 불리는 @media 키워드로 시작을 해야하며, 괄호로 쌓인 feature은 0개 이상이여야 한다.

media feature

@media screen and (max-width: 1023px) { 
              			... 
              }

• 미디어 피쳐는 괄호로 쌓여있으며 name과 value를 가진다.
• 이러한 구조 때문에 css property와 유사하지만 엄밀히는 다르다.

Logic 조건부

@media screen and (min-width: 400px) or (max-width: 800px) { ... }

• 논리 연산자에는 and,or,not이 있습니다.

@media not print and (min-width: 100px) { ... }

• not 연산자는 모든 미디어 쿼리를 부정한다.
• 따라서 예시를 보면 유저가 프린트가 아니거나 min-width가 100px이상이 아닌 경우에 적용이 된다.
• not 연산자를 사용하려면 무조건 미디어 타입을 정의해야한다.
• 따라서 일부 조건에만 부정을 취하는 not() 함수도 있다.

nesting

@media (min-width: 400px) and (max-width: 800px) { /*...*/ } @media (min-width: 400px) { @media (max-width: 800px) { /*...*/ } }

• and로 묶인 media feature은 중첩문으로 바꿀 수 있다.
• @media screen {} 내부에 미디어 쿼리를 작성하여, 화면에서만 적용되는 스타일을 정의할 수도 있다.

media query in Html

<link href="style.css" rel="stylesheet" media="screen and (min-width: 400px)"/> <style media="screen and (min-width: 400px)"> ... </style>

• link혹은 style 태그의 media 속성으로 정의할 수 있다.

media Query 적용

• 모바일우선 vs 데스크탑 우선.
• 미디어 쿼리를 쓰는 이유인 반응형 디자인을 설계할 때 크게 모바일이 우선인 디자인과 데스크탑우선인 디자인을 선택을 고려한다.
• mobile first: 모바일 우선이며, min-width 미디어 피쳐를 통해 데스트탑 화면을 고려한다.
• desktop first: 데스크탑 우선이며, max-width 미디어 피쳐를 통해 모바일 화면을 고려한다.
• 대부분은 모바일우선을 선호한다. 이유는 좁은걸 넓히는 것은 쉽지만 반대는 어려우기 때문이다.

main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40rem) {
  main {
    flex-direction: row;
  }
}

dimensions

• width, height와 같은 크기관련 속성들이 사용됨.
• 보통은 값의 단위로 px을 사용함. em을 사용하면 사용자의 확대 및 축소에 유용하게 대응 가능하다.

aspect ratio

@media (aspect-ratio: 16/9) { 
		/* 화면비가 16:9인 경우*/ 
} 
@media (min-aspect-ratio: 1/1) { 
	 /* 최소 화면 비가 1:1 이상인 경우.
		즉, 화면의 높이에 비해 너비가 더 넓은 경우 */ 
	 /* (orientation: landscape) 와 동일 */ 
} 
@media (max-aspect-ratio: 1/1) { 
    /* 최대 화면 비가 1:1 미만인 경우. 즉, 화면의 너비에
        비해 높이가 더 높은 경우 */ 
    /* (orientation: portrait) 와 동일 */ 
}