css) media query

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

 

 

@media screen and (min-width:576px)

 

웹의 특성이나 수치 (해상도 등)에 따라 웹의 스타일이 responsive하게 변하도록함.

 

index.html

 

여기서 css에 @media를 추가해준다

 

웹의 width가 576px을 넘어가면 media query에 따라 스타일이 바뀌게 된다.

 

또한 동일한 selector의 property들은 media query에 오버라이딩 된다.

위 코드를 보면 media query에 의해 width가 576px이 넘어가면 <h1> 태그의 스타일이 바뀌도록 되어있는데 

<h1>의 글자는 그대로 underline과 capitalize가 적용되어있음을 알수있다.

 

* max-width 미디어 특성을  사용할때 주의할점은 하나의 max-width가 다른 max-width를 오버라이드 해버릴수 있다는 점이다.

하나의 미디어 쿼리의 특성이 max-width:500 이고, 다른 하나가 max-width:700이라면 

두번째 미디어 쿼리가 앞의 미디어 쿼리의 특성을 포함하므로 두번째만 적용된다.