미디어 쿼리 ( 반응형 웹만들기 기초)

웹사이트를 만들 때 이제는 모바일을 굉장히 많이 신경을 써야한다.

반응형 웹 이란?

파일을 여는 디스플레이의 해상도에 맞추어, 화면을 표현하는 방식

<div class="small-text">1000보다 좁은 화면에서는 배경색이 빨간색이 됩니다.</div>

여기에 css를 적용하기 위해서는

@media (max-width: 1000px) {
    .small-text {
        background-color: red;
    }
}

>>> 최대 width가 1000이하라면!! 아래의 css적용, 배경이 빨개짐
>>> 최대 width가 1000이상이라면 None css!

이렇게 적용을 한다!!

 

자신의 디스플레이에서 미디어 쿼리를 이용한 반응형 웹을 제작하고 싶다면

'분기점'을 먼저 알아야한다

 

 ※ 분기점이란?

 

자신의 디스플레이에서 어느지점에서부터 조건이 실행이 되는가

ex) max-width가 1000으로 설정했을 경우 적용이 안됨 = 나의 디스플레이는 1000이상!

등등으로 자신의 분기점을 찾아야함