[9일차] Media Query

마지막 이론강의가 되겠다. 강의 내용을 요약하는 포스팅은 여기서 마무리 될 것같다. 나머지는 클론 코딩을 진행하기 때문에 강의를 듣다가 필요한 부분이 있으면 모아서 포스팅 할 것 같다.

 

Media Query

오직 CSS만을 이용해서 유저가 보고있는 웹사이트의 screen의 사이즈를 알 수있게 한다고 한다.
만일 누가 아이폰으로 혹은 아주 큰화면으로 본다면 혹은 가로모드로 본다면, 그때마다의 다른 사이즈를

오직 이 Media Query만으로 감지할 수 있다. 이것은 즉, 반응형 웹사이트를 만들 수 있다는 뜻이다. 

 

사용 방법은 다음과 같이 쓸 수 있다.

@media screen and (max-width:700px) {  
	div {
    	background-color : tomato;
    }
} 

(max-width : 700px) 과 같이 조건을 작성하고 해당 조건을 충족시킬때 해당 element에 CSS가 적용 된다. 위의 코드의 경우 웹사이트의 너비가 700px이내에서 <div> 박스 내의 배경색이 토마토색이 될 것이다. 물론 저것 말고도 수많은 조건을 추가할 수 있다. orientation의 경우 가로모드(lanscape)인지, 세로모드(portrait)인지 감지를 하고, min-width를 설정할 수 도 있다. 중요한 것은, 반응형 웹사이트를 Media Query 이것 하나만으로도 간편하게 만들 수 있다는 점이다.