반응형 디자인 기초

반응형 디자인이란?

화면 크기에 따라 웹사이트의 모양과 크기가 바뀌는 디자인

→ 미디어 쿼리를 사용하면 UXUI에서 활용하는 반응형 디자인을 CSS로 구현할 수 있음!

<aside>

미디어 쿼리

화면 크기에 따라 CSS를 다르게 적용할 수 있게 도와줌! 쉽게 얘기하면, (-)조건일 때, (-)화면/스타일로 보여줘! 같은 명령어.

<aside>

기본 형태

@media (조건) {
    /* 조건이 맞을 때 적용될 스타일 */
}

</aside>

<aside>

조건 종류

화면 너비 max-width: 화면 너비가 특정 값보다 작거나 같을 때 적용 min-width: 화면 너비가 특정 값보다 크거나 같을 때 적용

@media (max-width: 600px) {
    body {
        background-color: lightgreen; /* 화면이 작으면 배경색 초록색 */
    }
}

@media (min-width: 601px) {
    body {
        background-color: lightblue; /* 화면이 크면 배경색 파란색 */
    }
}

화면 높이 max-height, min-height : 화면의 높이를 기준으로 스타일을 적용

@media (max-height: 800px) {
    body {
        font-size: 18px; /* 높이가 작으면 글자를 조금 크게 */
    }
}

@media (min-height: 801px) {
    body {
        font-size: 14px; /* 높이가 크면 글자를 조금 작게 */
    }
}

화면 방향 orientation 화면이 가로로 넓은지, 세로로 긴지 확인 portrait: 세로 방향 landscape: 가로 방향

@media (orientation: portrait) {
    body {
        background-color: pink; /* 화면이 세로일 때 배경색 핑크 */
    }
}

@media (orientation: landscape) {
    body {
        background-color: yellow; /* 화면이 가로일 때 배경색 노란색 */
    }
}

여러 조건 조합 1️⃣ AND 조건 : 여러 조건을 모두 만족할 때만 스타일 적용

@media (min-width: 600px) and (orientation: landscape) {
    body {
        background-color: coral; /* 가로 방향이고 너비가 600px 이상일 때 */
    }
}

2️⃣ OR 조건 (,) : 조건 중 하나라도 만족하면 스타일 적용

@media (max-width: 400px), (orientation: portrait) {
    body {
        background-color: lightblue; /* 화면이 작거나 세로 방향일 때 */
    }
}

</aside>

반응형 레이아웃?

화면 크기에 맞게 박스(레이아웃)의 배치가 바뀌는 것으로 작은 화면에서는 세로, 큰 화면에서는 가로로 배치 됨

→ 미디어 쿼리 + flex, grid를 사용하여 반응형 레이아웃을 만들 수 있음!

<aside>

Flexbox를 사용하여 반응형 레이아웃 만들기

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap; /* 화면 크기에 맞게 줄바꿈 */
            gap: 10px;
        }

        .box {
            background-color: coral;
            width: 100px;
            height: 100px;
        }

        /* 작은 화면에서는 박스가 세로로 배치 */
        @media (max-width: 600px) {
            .container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <h1>반응형 레이아웃</h1>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

</aside>

<aside>

Gri를 사용하여 반응형 레이아웃 만들기

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
            gap: 10px;
        }

        .box {
            background-color: coral;
            padding: 20px;
            text-align: center;
        }

        /* 작은 화면에서는 한 줄에 하나씩 */
        @media (max-width: 600px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h1>반응형 Grid</h1>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

</aside>