[CSS] media query 반응형 웹 만들기

미디어 쿼리를 배우긴 배웠는데 중요성을 느끼지 못하고 있다가 이번 프로젝트에 사용해보려고 공부해보았다...ㅎㅎ; 오랜만에 보니 이런게 있었지 싶네..

 

미디어 쿼리란?

접속하는 디바이스나 뷰포트에 따라 특정 CSS 스타일을 지정하는 방법입니다.

@media 키워드를 사용합니다.

 

@midia [only | not] 미디어 유형 [and 조건] * [and 조건]

- only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.

- not : not 다음에 지정하는 미디어 유형을 제외합니다.

- and : 조건을 여러개 연결해서 추가할 수 있습니다.

 

미디어 유형

- all : 모든 장치에 적합합니다.

- print : 인쇄 결과물 및 출력 미리보기 화면에 표시중인 문서에 사용합니다.

- screen : 화면을 대상으로 사용합니다.

- speech : 음성 합성장치를 대상으로 사용합니다.

 

break Point

미디어 쿼리를 사용할 때는 break Point를 지정해줘야 합니다.

break Point : 미디어 쿼리를 사용하여 CSS를 지정할 때 기준이 되는 특정 구간

 

break Point 를 지정할 때 가장 많이 사용하는 것은 min-width와 max-width입니다.

min-width :  지정한 넓이 이하부터 CSS가 실행됩니다.

max-width : 지정한 넓이 이상부터 CSS가 실행됩니다.

@media(min-width : 300px){
	body {
   		background-color : red;
	}
}

 

and를 사용하여 여러 조건을 지정할 수 있습니다.

@media (min-width : 150px) and (max-width : 700px){
    body {
   		background-color : red;
    }
}

 

 

아래 사이트에서 breakPoint 가이드를 확인할 수 있습니다.

https://www.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins