[CSS] 반응형 웹 디자인 - Media Queries

< 미디어 쿼리 >

 

- 스마트폰, 태블릿, PC에 따라 CSS를 달리 줄 수 있음

- 기본 스타일을 스마트폰 기준으로 작업함

 

@media [not|only] 장치종류 and (조건){
	선택자{속성:속성값;}
}

 

- 띄어쓰기 민감하니까 잘 체크 !

 

- 장치 종류

  · all

  · print

  · screen : 우리가 보는 스크린형태 종류

  · speech : 음성낭독기

 

- 조건

  · viewport의 너비와 높이

  · 장치의 너비와 높이

 

 

 

section{
	border: 4px double #999;
	padding: 1em;
	background-color: #0ea;	
}

@media screen and (min-width:760px) {
	section{background-color: #aea;}
}

@media screen and (min-width:1000px){
	section{background-color: #ea0;}
}

 

- 최소너비에 따라 배경색이 달라짐