CSS - 미디어쿼리 (Media Query)

미디어쿼리 (Media Query)

 

- 반응형 웹(Responsive Web) 을 만들기 위해 반드시 알아야함.

 

 

🔻 반응형 웹을 위한 충족조건

HTML	viewport meta
CSS	media query

 

 

▪ [HTML] viewport meta

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

모바일에서와 pc에서의 viewport가 다르다.

meta태그로 width=device-width (너비를 디바이스 너비로 설정함)

을 선언해야 반응형 웹이 정상적으로 작동 가능.

 

 

 

▪ [CSS] media query

@media screen and (min-width: 768px) {
   /* 변경사항 * /
}

atRule을 사용해야함. (at media)

최소 가로가 768px 일때 /* 변경사항 */ 이 적용되게 해줌.

>> 즉, 768 이상일때 적용됨.

 

❗ min, max만 보고 헷갈릴 수 있는데,

768 미만일땐 max-width: 768px로 해야함!

 

 

 

 

* vh / vw 단위 (viewport height / viewport width)

 

100vh = 뷰포트의 100%만큼

100vw는 잘 사용 안함. (주로 100%로 작성)

 

 

 

예제

 

Tablet

LandScape phone (가로화면 폰)

Mobile 구분

 

 

( 예전에 js에서 window.innerWidth 로도 만든적 있었다!)

https://mywebproject.tistory.com/148?category=897812 (private)

window.innerWidth

// 이벤트 리스너 (window의 resize 이벤트)
window.addEventListener("resize", handleResize);

 

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-size: 40px;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: #ff5216;
  color: white;
}

.box::after {
  content: "Mobile";
}

@media screen and (min-width: 576px) {
  .box {
    background-color: #ffdc16;
  }
  .box::after {
    content: "LandScape Phone";
  }
}

@media screen and (min-width: 768px) {
  .box {
    background-color: #167fff;
  }
  .box::after {
    content: "Tablet";
  }
}

 

 

 

 

 

 

결과

 

 

 

 

 

 

 

 

몇개 더 추가함.

 

 

 

 

+)

 

 

@media screen and (min-width: 768px) and (max-width: 991px) {
  .box {
    background-color: #7cb3f7;
  }
  .box::after {
    content: "이렇게도 가능해";
  }
}

이렇게 min과 max 너비값을 둘다 주고, and 해줄수도 있다!

 

 

---

ref lecture.

 

• https://edu.goorm.io/learn/lecture/20583