[HTML&CSS] Media Queries

 

 

 

 

 

[HTML&CSS] Media Queries 

( UPDATE 2023 - 05 - 31 )

 

 

 

---

Media Queries

---

 

Media Query

Media query는 반응형 웹을 만들 때 사용한다.

(웹사이트를 보고 있는 사용자의 스크린 사이즈 기준)

 

 

 

 

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

을 이용하여 스크린 사이즈 별로 달라보이도록 만들 수 있다. 

- min 사이즈와 max사이즈를 조절하여 스크린 사이즈 별로 CSS 적용

 

 

 

 

device toolbar

브라우저의 개발자도구 inspect에서 device toolbar를 이용하여

기기 별 사이즈로 브라우저를 볼 수 있다.

 

 

 

 

orientation: landscape

가로모드 적용

 

 

 

orientation: portrait

세로모드 적용

 

 

 

---

Media Queries의 주요 기능

---

 

 

min-device-width

 

max-device-width

 

orientation: landscape

 

orientation: portrait

 

aspect-ration

 

display-mode

 

 

외에도 다른 기능 들이 있으니 아래 사이트 참고

 

 

미디어쿼리 참고 사이트

클릭

 

 

---

출처

---

 

 

노마드 코더 코코아톡 클론코딩

 

 

MDN 미디어 쿼리