미디어쿼리 해상도 폭 다크모드 설정

미디어 쿼리 적용하여 반응형 웹사이트가 보다 효과적으로 대응할 수가 있습니다.

 

대표적으로 사용하는 기능은 화면 해상도에 따른 다른 CSS 속성을 적용하여 그에 맞는 디자인 및 기능을 적용할 수 있습니다.

 

 

@media screen and (width: 767px) {
    body {
        color: red;
    }
}

미디어 쿼리를 해상도로 설정을 하게 되면 사용 중인 기기의 해상도가 설정한 해상도와 같으면 적용한 속성이 적용되게 됩니다. 

 

 

@media screen and (max-width: 767px) {
    body {
        color: blue;
    }
}

max 추가하여 설정하게 되면 설정한 폭 767 보다 좁은 폭일 경우 설정한 속성이 우선적용됩니다.

 

 

@media screen and (min-width: 767px) {
    body {
        color: blue;
    }
}

min으로 설정하면 설정한 해상도 767 보다 화면폭이 높으면 적용이 됩니다.

 

 

@media screen and (min-width: 767px) and (max-width: 1080px) {
    body {
        color: blue;
    }
}

최대와 최소 설정값을 함께 입력하게 되면 설정한 범위 내에서만 인식하여 설정한 속성을 적용합니다.

 

 

@media screen and (max-width: 1080px) {
    body {
        color: blue;
    }
}
@media screen and (max-width: 767px) {
    body {
        color: red;
    }
}

해상도 별로 여러 번 지정을 하게 되면 최소 해상도를 입력하지 않더라도 그에 맞는 해상도가 설정이 되어있으면 우선 적용되어 그에 맞게 변경이 됩니다.

 

 

@media (prefers-color-scheme: dark) {
    body {
    	background: #000000;
        color: #ffffff;
    }
}

(prefers-color-scheme: dark) 이용하면 사용하는 기기의 컬러 테마를 확인하여 그에 맞게 CSS 다크 모드로 속성을 적용해두면 자동으로 다크모드를 적용합니다.  

 

반대로 다크모드인 블로그에서 light 속성을 적용하여 사용을 할 수 있습니다.

 

미디어쿼리

CSS 물결 애니메이션

마이크로 소프트 엣지 브라우저 검색 엔진 변경하는 방법