TIL #4 | CSS 미디어 쿼리

미디어 쿼리

우선 미디어 쿼리는 특정 조건(단말기의 유형, 화면 해상도, 뷰포트 너비 등)에서 특정 스타일을 적용되도록 만들어주는 기능이다.
가장 자주 사용하는 이유는 사용자의 스크린의 크기에 맞춰서 그에 최적화된 화면을 보여주기위해서 사용한다.

@media screen and (min-width:801px) and (max-width:1000px){
  body{background:pink;}
}

@media screen and (max-width:800px){ 
  body{background:royalblue;}
}

미디어 쿼리를 이용하면 위처럼 화면의 넓이 값에 따라 css에 변화를 줄 수 있다.

사용방법은 매우 간단하지만 반응형 웹페이지를 만들 떄 정말로 도움이 많이 되는 기능이다. 일거리를 절반은 아니더라도 20%는 줄여준다는 체감이 든다.

Author And Source

이 문제에 관하여(TIL #4 | CSS 미디어 쿼리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@do_dadu/TIL-4-CSS-미디어-쿼리

저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다