👍 Media Query - 반응형 웹 만들기

Media Query

    - 반응형 웹 (responsive web) 만들기 위해서는 꼭 필요하다. 👈👈

    - head안에 <meta name="viewport" content="width=device-width" />를 선언한다.

    - 분기별 사이즈는 상황에따라 다르다.

 

@media screen and (min-width | max-width : 사이즈){
	/* css */
}

 

미디어쿼리를 적용하기 전 기본적인 모습 (776px)

 

미디어 쿼리를 적용한 모습 (776px) - 화면이 최소 700px일 경우 사라지게

 

추가적으로 600px 이하일 경우 배경색을 변경한다.

 

💡 반응형 웹 (responsive web) ?

    - 현재는 여러 디바이스, 디스플레이 사이즈가 있기때문에 사이즈에 따라 맞춰 화면을 보여주는 웹