[HTML & CSS 기초] 반응형

반응형 웹

- 사용자의 해상도에 따라 웹 페이지의 레이아웃을 최적화해서 보여주는 기술

 

뷰포트

- 모바일 웹에서 웹페이지가 사용자에게 보여지는 영역

- 컨텐츠의 width를 device의 width에 맞게 적용

 

미디어 쿼리

@media 미디어 타입 and (미디어-지정-규칙){

   css 정의

}

ex)

body {

background-color: yellow;

}

@media screen and (max-width: 1000px) {

body {

background-color: red;

}

}

@media screen and (max-width: 600px) {

body {

background-color: blue;

}

}

 

ex) landscape:가로, portrait:세로

@media (orientation:landscape){

  body{

   background-color:red;

   }

}