미디어 쿼리 활용법

개발에 입문할 때 가장 기본적인 상식이라며 

프론트엔드를 나도 모리게 무시 아닌 무시를 했었다. (하지만 난 모탄다/지금부터는 잘 할거시다) 홧홧

 

 

아무튼,

질적으로 높은 반응형 웹을 만들기 위해서는 미디어 쿼리 활용법에 대해 숙지하고 활용할 수 있어야 한다능!

 

 

무엇이든지 효율성이 up되도록 만들어주는 것이 자원 분배에 무리를 주지 않으리라......

효율충이 되어 gpt 에게 효율적인 가지의 수로 화면 크기에 따른 스타일 설정을 위한 가지의 수를 보여달라고 했다.

 

 

 

>> 네 가지의 경우로 나눈 효율쩌긴 미디어 쿼리 활용법!

 

 

>> 1) 스마트폰 / 2) 태블릿 / 3) 데스크탑/노트북 4) 대형 모니터

 

>> max-width 767px / max-width 992px // min-width 1200px

 

 

---

---

 

/* 스마트폰 */
@media screen and (max-width: 767px) {
    /* 스마트폰에 대한 스타일 */
}

/* 태블릿 */
@media screen and (min-width: 768px) and (max-width: 991px) {
    /* 태블릿에 대한 스타일 */
}

/* 노트북/데스크톱 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* 노트북/데스크톱에 대한 스타일 */
}

/* 대형 모니터 */
@media screen and (min-width: 1200px) {
    /* 대형 모니터에 대한 스타일 */
}

 

---

---