[CSS] Media Query

CSS

[CSS] Media Query

기록하는_사람 2022. 9. 19. 22:27

Media Query

📌 Media Query

: CSS만을 사용해 사용자가 보고 있는 스크린의 사이즈를 알 수 있는 방법.

📌 사용법

: @media screen (조건) { } : 스크린 크기에 따른 설정.

@media print (조건) { } : 인쇄할 때 설정.

📌 조건

min-width : 최소 너비.

max-width : 최대 너비.

orientation: landscape : 가로 모드.

orientation: portrait : 세로 모드.

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

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

developer.mozilla.org

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 기본 형식</title>
        <link href="styles.css" rel="stylesheet"/>
        <style>
            html {
                background-color: blanchedalmond;
            }
            body {
                display: flex;
                height: 100vh;
                align-items: center;
                justify-content: center;
            }
            div {
                background-color: lightslategray;
                width: 200px;
                height: 200px;
            }
            @media screen and (max-width: 600px) {
                div {
                    background-color: lightskyblue;
                }
            }
            @media screen and (min-width: 700px) and (max-width: 800px) {
                div {
                    background-color: lightpink;
                }
            }
            @media screen and (min-width: 1200px) {
                div {
                    background-color: lightseagreen;
                }
            }
            @media screen and (orientation: landscape) {
                body {
                    background-color: tomato;
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

+ 추가 설명

화면 크기가 600px보다 작을 때, div 배경색 ightskyblue

화면 크기가 700px보다 크고 800px보다 작을 때, div 배경색 lightpink

화면 크기가 1200px보다 작을 때, div 배경색 lightseagreen

화면이 가로 모드일 때, body 배경색 tomato