[CSS] 미디어쿼리 Media Queries

 

 

 

 

 

 

 

 

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

재배포 수정하지 마세요. 

 

 

 

 

 

 

 

 

 

 

 

css 중 반응형 웹페이지의 핵심이라고 할 수 있는것이 바로 미디어쿼리이다. 

미디어 쿼리는 css3 부터 등장한 기술로 어떤 특정 조건이 충족되면 @media 규칙을 css 블록영역에서 적용시킨다.   

 

 

 

 

---

조건식

 

@media (조건) { 적용할 css }

 

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

 

윈도우 브라우저가 600px 이하일 경우에 배경색이 lightblue 색으로 변한다. 

 

 

 

 

 

브레이크포인트 (Breakpoint)

 

우리가 웹페이지를 만들면 화면에 띄워질때 스마트폰이든 태블릿이든 그 화면 크기에 맞게 반응형으로 보여준다. 

하지만 화면의 크기가 작아지면 작아질 수록 더 보기가 안 좋아진다. 

미디어 쿼리는 이것을 해결해줄 수 있다. 브레이크 포인트를 정한다면 각각 다른 크기의 화면들에서 브레이크 포인트에 의해 다르게 반응할것이다.

 

 

/* 데스크탑용: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* 모바일용: */
  [class*="col-"] {
    width: 100%;
  }
}

 

데스크탑에서는 각각 다른 비율의 크기로 보여지는 블록들이 데스크탑의 width가 768px 보다 작아지거나 

모바일 화면으로 본다면 블록의 비율이 100%로 보여져야한다. 

 

 

 

 

항상 모바일을 위한 디자인이 우선

 

데스크탑이나 어느 다른 기기의 디자인보다 모바일을 위한 디자인이 우선시 되어야 한다. 

즉 화면 크기가 768px 보다 작아지는 것을 고려하기 보다는 먼저 작은 디자인을 한 후 786px보다 커질때 어떤식으로 변화해야하는지를 고민해야한다는 말이다. 

또한 그 후 다른 다양한 기기들에서도 어떻게 디자인이 반응해야 하는지 고려해야한다. 

 

 

 

/* 모바일용: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* 데스크탑용: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

 

 

/* 제일 작은 모바일 기기들 (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* 작은 기기들 (작은크기의 타블렛 혹은 큰 모바일들, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* 중간크기 기기들 (큰 크기의 타블렛들, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* 큰 기기들 (데스크탑 모니터용, 노트북용, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* 더 큰 기기들 (큰 노트북들과 데스크탑 모니터용, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

 

 

 

미디어 쿼리를 이용한 다양한 활용

 

미디어 쿼리를 이용하여 요소들을 숨기거나 글자 크기를 밥꾸는 등 다양하게 활용할 수 있다. 

 

 

/*만약 화면크기가 600px과 같거나 작다면 div 요소를 숨긴다. */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

/* 만약 스크린 사이즈가 601px이거나 크다면, <div>의 폰트사이즈를 80px 으로 바꾼다. */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}