[CSS] 반응형 웹 - 미디어쿼리

body {
/* 기본 값 설정*/
  background-color: lightgreen;
  font-size : 20px;
}

div.pop {
background-color: yellow;
padding: 20px;
}

/* 기본적으로 CSS는 적층형 (덮어쓰기) 으로 적용된다. */
body {
background-color: cyan;
}

/* @media 에서
max-width: ~ : ~ 보다 같거나 작은 경우
min-width: ~ : ~ 보다 큰 경우 
*/

@media only screen and (max-width: 600px){ /* 600px 이하이면  적용 */
body {background-color: tomato;}

p {color: white;}
}

@media only screen and (min-width: 600px){  /* 600px 보다 커지면 적용 */
/* body {font-size: 3em;} */

p { color: blueviolet;}

div.pop {display: none;}
}

 

/* 종횡비에 따른 적용 가능 */
@media only screen and (orientation: landscape){
h2::after {
content: " : landscape";
}
}

-> 가로로 긴 경우

@media only screen and (orientation: portrait){
h2::after {
content: " : portrait";
}
}

-> 세로로 긴 경우

폭이 600px보다 클 때

폭이 600px 이하일 때