레이아웃 : media query

레이아웃 : media query (생활코딩)

(위는 화면의 크기가 500px일 때, 배경 색이 빨간색을 뜻함. 그러나 실효성이 없음.)

반응형 디자인의 심장의 역할을 하는 미디어 커리.

<style>

@media (min, max-width:500px){

body{

}

}

</style>

min-width : 500px 이상  최소 ~~이상

max-width : 500px 이하. 최대 ~~ 이하

우선순위의 문제.

(캐스케이딩 등 다른 조건이 같다면)

나중에 나오는 코드가 우선순위가 높다.

ex : @media(max-width :500px){

body{background : color : red;}

}

@media(max-width :600px){

body{background : color : red;}

}

즉, 600이하로 나온다.

모바일에서도 601 이상은 빨강, 600이하는 파랑 등 이런식으로 효과가 적용됨.

이게 없으면 적용이 안됨.

글씨라던지 등등

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

미디어 쿼리와 관련된 도구와 옵션 설명.