미디어 쿼리 기본

1. HTML link 태그로 사용

   1. 잘 사용하지 않는다.

2. CSS @media 키워드로 사용 (보통 사용하는 방식)

   @media all and (조건) and (조건) {
   
   }
   

미디어 쿼리 문법

• @media only all and
  • all : 미디어 설정, 생략시 기본값 all, screen | print를 주로 사용
  • only : 특정 미디어에만 적용하는 경우 screen | print를 지정하는 경우
  • and : 미디어 쿼리의 조건은 모두 and 키워드로 연결
  • 조건
    • 반드시 괄호 안에 조건을 입력
    • min : 최소값이 일치할 때, 입력한 사이즈 이상부터 적용!
    • max : 최대값이 일치 할 때, 입력한 사이즈 이하부터 적용!

/* 320px 이상부터 적용할 CSS를 입력 */
@media only screen and (min-width : 320px){}

/* 320px 이하부터 적용할 CSS 입력, 321px 이상부터는 적용하지 않겠다. */
@media only screen and (max-width : 320px){}

• 둘다 320px 을 포함한다.

@media (min-width : 320px){}

@media (max-width : 320px){}

<aside> 💡

어떤 분기점을 가지고 미디어 쿼리를 작성할 것인지

</aside>

일반적인 미디어 쿼리 분기

• 모바일 퍼스트와 데스크탑 퍼스트가 다르다.
• 768px 부터 테블릿 사이즈로 제공.

모바일을 가로로 돌렸을때, 모바일 디자인이 나와야하는데 테블릿 디자인이 나와버린다…

• width 때문에;; 분기를 확실히 쳐야할지도 모른다.
• 가로로 눕혔을때도 모바일 사이즈로 나와야한다면,