[CSS] Media Query(미디어쿼리)

Media Query(미디어쿼리)란?

웹을 반응형으로 만들어야 할 때, media query를 사용해서 만듭니다.
핸드폰, 태블릿, PC모니터등 사이즈가 다양하기 때문에 화면의 최대,최소 가로 길이를 제한해 주어서 작업해야 합니다.

하나의 웹페이지에서 PC, 태블릿, 핸드폰 크기의 다양한 사이즈의 화면에서 크기에 맞는 레이아웃을 볼 수 있기때문에 잘 사용하면 편리한 CSS 기능이다. 오늘은 이러한 미디어쿼리에대해 알아보려 합니다.. 🤔

---

Media Query(미디어쿼리) 기본사용법

@media 그뒤에 (조건문)으로 분기점의 기준으로 스타일이 적용됩니다!

@media (조건문) { ... 실행코드 }

---

반응형 분기점

내가 원하는 기준대로 분기점을 잡을 수있는데 pc, mobile 기준으로 나눌 수도 있고 브레이크 포인트는 각자 구축 상황에 맞게 선택하면 됩니다.

Pc기준으로는

max-width를 사용하게 되면 (최대 ~)
PC ➜ Tablets ➜ mobile

Mobile 기준으로는

min-width를 사용하게 되면 (최소 ~)
mobile ➜ Tablets ➜ PC

Break Point

스마트폰 세로: 0px ~ 480px
스마트폰 가로, 태블릿 : 481px ~ 768px
태블릿 가로, 노트북 : 769px ~ 1279px
데스크탑 : 1280px ~

코드로 표현 하자면 이렇게 작성하면 된다.

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 
@media all and (min-width:1024px) and (max-width:1279px) { 
  //스타일 입력
} 

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) { 
  //스타일 입력
} 

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (min-width:480px) and (max-width:767px) {
  //스타일 입력
} 

/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) {
  //스타일 입력
}

/* M */
@media only screen and (max-width:1068px) {
  
}
/* S */
@media only screen and (max-width:734px) {
 
}
/* XS */ 
@media only screen and (max-width:320px) {
 
}

---

🙇‍♀️ 참고 사이트

[CSS] Media Query(미디어쿼리) 기본 사용법
[CSS] 반응형 분기점 및 media query에 대해서