[CSS] Media Query(미디어 쿼리) 소개와 활용

정보통신 고심이 2023. 1. 27. 12:55

웹은 PC, 스마트폰 등 수많은 형태의 화면에 맞게 동작해야 한다. 즉 화면의 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀔 필요가 있어졌다. 이를 반응형 디자인이라 한다.

반응형 디자인이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하게 되는 것

영어로는 responsive web, 한글로는 반응형 웹 또는 반응형 웹 디자인이라고 한다.

미디어 쿼리에서는 일반적으로 max-width 와 min-width을 많이 사용한다. 그외 높이(height), 색깔(color), 화면의 가로 세로 방향(orientation)화면의 가로 세로 방향 등이 있다. 실제 미디어 쿼리를 사용할 경우 @media라고 써야한다. @media 특정 조건이 참인 경우에만 규칙을 사용하여 CSS 속성 블록을 포함한다.

화면 크기 확인은 mac OS 기준으로 웹페이지에서 Control-검사를 누르면 된다.

max-width

screen width < SCREEN;

화면크기의 최대값이 SCREEN일 경우를 의미

예제 : 화면크기가 800px보다 작을 경우 태그를 숨김

@media(max-width:800px)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                border:10px solid green;
                font-size: 60px;
            }
            @media(max-width:800px){
                div{
                    display:none;
                }
            }
        </style>
    </head>
    <body>
        <div>
            Responsive
        </div>
    </body>
</html>

min-width

screen width> SCREEN;

화면 크기의 최솟값이 SCREEN일 경우를 의미

예제 : 화면크기가 800px보다 클 경우 태그를 숨김

@media(min-width:800px)

        <style>
            div{
                border:10px solid green;
                font-size: 60px;
            }
            @media(min-width:800px){
                div{
                    display:none;
                }
            }
        </style>

미디어 쿼리에 대한 기본 개념을 설명했으니 이전에 만들었던 웹사이트 디자인에서 조금 활용 해보겠다.

    <head>
        <title>WEB - CSS</title>
        <meta charset="utf-8">
        <style>
            body{
                margin:0;
            }
            a{
                color:black;
                text-decoration:none;
            }
            h1{
                font-size: 60px;
                text-align:center;
                border-bottom:1px solid gray;
                margin:0;
                padding:20px;
            }
            #grid ol{
                border-right: 1px solid gray;
                width: 100px;
                margin: 0;
                padding: 20px;
            }
            #grid{
                display: grid;
                grid-template-columns: 150px 1fr;
            }
            ol{
                padding: 33px;
            }
            #article{
                padding: 25px;
            }
        </style>
    </head>

이 전 포스팅에서 만들었던 웹 페이지이다. 디자인을 조금 수정해보겠다.

목표 : 화면의 크기가 줄어들면 구분 선이 없어지면서 본문이 아래쪽에 배치되게 한다.

화면 크기가 줄어들면 -> @media(screen-width<800px)

구분 선이 없어지면서 -> border-bottom:none; border-right:none;

본문이 아래쪽에 배치-> #grid{ display:block}

    <head>
        <title>WEB - CSS</title>
        <meta charset="utf-8">
        <style>
            body{
                margin:0;
            }
            a{
                color:black;
                text-decoration:none;
            }
            h1{
                font-size: 60px;
                text-align:center;
                border-bottom:1px solid gray;
                margin:0;
                padding:20px;
            }
            #grid ol{
                border-right: 1px solid gray;
                width: 100px;
                margin: 0;
                padding: 20px;
            }
            #grid{
                display:grid;
                grid-template-columns: 150px 1fr;
            }
            ol{
                padding: 33px;
            }
            #article{
                padding: 25px;
            }
            @media(max-width:800px){
                #grid{
                    display:block;
                }
                #grid ol{
                    border-right:none;
                }
                h1{
                    border-bottom:none;
                }
            
        </style>
    </head>

추가한 코드 만 발췌

            @media(max-width:800px){
                #grid{
                    display:block;
                }
                #grid ol{
                    border-right:none;
                }
                h1{
                    border-bottom:none;
                }
            
        </style>
    </head>