[CSS] 미디어쿼리 @media

 

CSS 미디어 쿼리를 활용해서 반응형 웹을 구현할 수 있다.

 

미디어 쿼리는 화면 사이즈마다 CSS를 각각 명시해 줄 수 있다.

한마디로 넓은 화면일 때 / 작은 화면일 때 적용할 CSS를 각각 설정할 수 있음!

 

⭐ 예를 들어 이렇게 사용할 수 있는데,

@media (min-width: 1000px) {
	.yoso {color: white;}
}

min-width가 1000일 때 = width가 1000이상일 때

.yoso의 컬러가 white가 된다.

 

@media (max-width: 1000px) {
	.yoso {color: black;}
}

이 경우는

max-width가 1000일 때 = width가 1000이하일 때

.yoso의 컬러는 black이 된다.

 

 

⭐ width 뿐만 아니라 height 조건도 사용할 수 있다.

@media (max-height: 1000px) {
	.yoso {color: black;}
}

max-height가 1000일때 = height가 1000이하일 때
.yoso의 컬러는 black;이 된다.

 

 

 

 

 

 

⭐ 원래는 미디어의 종류도 명시해서 표기한다👇

@media screen and (max-width: 1000px) {
	.yoso {color: black;}
}

미디어의 종류로는 screen, print, tv 등이 있다.
생략할 경우 미디어의 종류는 all 이다.