본문 바로가기
  • 나의 작은 기록이 도움이 될 수 있기를
web

미디어쿼리 Media Queries

by labper M 2021. 9. 8.

 

미디어 쿼리(Media Queries)는 CSS3의 모듈 중 하나로,

사이트에 접속하는 기기별로 적용할 CSS파일을 다르게 지정해 주는 기술입니다.

각 기기마다 서로 다른 레이아웃을 표시할 수 있습니다.

 

 

따로 모바일용 사이트를 제작하지 않고,

하나의 사이트로 모바일 기기 및 PC기기까지 대응할 수 있게 만드는 방법이 바로 미디어 쿼리입니다.

 

www.mediaqueri.es  

 

Media Queries

 

mediaqueri.es

미디어쿼리를 사용한 사이트를 소개하는 사이트

반응형 웹을 만드는 기본 기술인

가변 그리드와 미디어 쿼리는 모두 CSS로 작성하는데,

반응형 웹이 대중화되면서 이 두 가지 기술을 쉽게 사용할 수 있게 

하나로 묶은 CSS 프레임워크가 여러 가지 등장했습니다.

그중에서 가장 많이 사용하는 것이 부트스트랩(Bootstrap)입니다.

(해외에서는 파운데이션Foundation, 스켈레톤Skeleton을 사용하기도 한다)

 

www.getbootstrap.com  

 

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

 

프레임워크(Framework)란 표준화된 HTML, CSS, 자바스크립트 코드로 작성한 파일 패키지를 말합니다.

크롬 브라우저에서 F12를 누르면 개발자 도구창을 열 수 있다. 

 

메뉴를 보여주는 아이콘을 '트리거(Trigger)'라고 한다.

 


댓글