<CSS 기초> 09. Media Query

 

  이번 장에서 배울 내용은 미디어 쿼리이다. 이는 반응형 웹에서 필수적인 속성이다. HTML에서 view port를 메타데이터로 선언해야만 사용 가능하다.

 

@media screen and (min-width : 768px) {

}

 

 위와 같은 방식으로 사용 가능하다. 위는 768이상에서의 스타일을 작성하겠다는 의미이다.

 

 참고로 미디어쿼리를 쓰며 자주 width를 100%를 주는 경우가 많아지는데 이 때 height를 100vh 로 선언하면 보이는 viewport 의 높이만큼 크기를 선언 가능하다.

 

 미디어쿼리는 작은 사이즈(모바일)부터 대응하는게 정석이다.

 

 사이즈별로 수정하고 싶은 부분에 대해서만 미디어쿼리를 선언하고 작성하면 되는데, 위에서 bottom : 0; 에서 선언한 것을 특정 사이즈에서 top : 0 ;으로 가고 싶다면 bottom : 0 ; 을 해제해야한다. 이 경우 bottom : auto ; 를 쓰고 top : 0; 을 쓰면 문제가 없다.

 

 

---

 

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU