7. (CSS) Flex Responsive (반응형 웹)

hyeonn

Jan 16, 2024

Contents

1. 미디어 쿼리를 사용해서 반응형 웹 만들기 2. flex-wrap : wrap;

반응형 웹이란?

화면의 크기에 따라 비율이 달라지는 것 = 화면의 크기에 맞춰서 비율이 바뀌는 것

1. 미디어 쿼리를 사용해서 반응형 웹 만들기

미디어 쿼리: width값이 800px 이하일때, column으로 바뀐다는 문법

인터넷 창을 600px 이하로 줄이니 2번 박스가 붉은색으로 변하는 걸 확인

2. flex-wrap : wrap;

width 값을 고정적으로 주고, flex-wrap : wrap;으로 적용

flex-wrap: nowrap; -> width를 줘도 크기가 적용이 안된다.

flex-wrap: wrap; → 미디어 쿼리를 안써도 브라우저 창을 줄이면 크기를 유지하면서 미디어 쿼리처럼 내려간다. ⇒ 비율이 깨지면 안되는 이미지에는 wrap을 사용

[ 전체 코드 ]


<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            font-size: 30px;
            text-align: center;
            background-color: yellow;
            padding: 10px;
            width: 70%;
        }

        .flex-item {
            background-color: #f1f1f1;
            padding: 10px;
            width: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
    </div>

</body>

</html>

[ 전체 코드 ] - 크기 가변적


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box-item {
            width: 300px;
            padding: 10px;
            background-color: red;
            border: 2px solid black;
        }

        .img-box {
            width: 70%;
            background-color: yellow;
            padding: 20px;
            display: flex;
        }

        .img-item {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .main {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>

    <div class="main">
        <div class="img-box">
            <div class="box-item">
                <img class="img-item"
                    src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">
            </div>
            <div class="box-item">
                <img class="img-item"
                    src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">
            </div>
            <div class="box-item">
                <img class="img-item"
                    src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">
            </div>
            <div class="box-item">
                <img class="img-item"
                    src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">
            </div>

        </div>
    </div>


</body>

</html>

[ 전체 코드 ] - 크기 고정적


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box-item {
            width: 300px;
            padding: 10px;
            background-color: red;
            border: 2px solid black;
        }


        .img-box {
            width: 50%;
            background-color: yellow;
            padding: 20px;
            display: flex;
        }

        .img-item {
            width: 300px;
            height: 300px;
            object-fit: cover;
        }

        .main {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>

    <div class="main">
        <div class="img-box">
            <img class="img-item"
                src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">


            <img class="img-item" src="https://cphoto.asiae.co.kr/listimglink/1/201303041526557886068A_1.jpg">
            <img class="img-item"
                src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">


            <img class="img-item" src="https://cphoto.asiae.co.kr/listimglink/1/201303041526557886068A_1.jpg">

        </div>
    </div>


</body>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .box-item {
            width: 300px;
            padding: 10px;
            background-color: red;
            border: 2px solid black;
        }


        .img-box {
            width: 50%;
            background-color: yellow;
            padding: 20px;
            display: flex;
        }

        .img-item {
            width: 300px;
            height: 300px;
            object-fit: cover;
        }

        .main {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>

    <div class="main">
        <div class="img-box">
            <img class="img-item"
                src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">


            <img class="img-item" src="https://cphoto.asiae.co.kr/listimglink/1/201303041526557886068A_1.jpg">
            <img class="img-item"
                src="https://wimg.mk.co.kr/meet/neds/2020/02/image_readtop_2020_167877_15820112754092047.jpg">


            <img class="img-item" src="https://cphoto.asiae.co.kr/listimglink/1/201303041526557886068A_1.jpg">

        </div>
    </div>


</body>

</html>

💡

object-fit : cover; 사진 비율 예쁘게 flex로 배치하는 속성

See more posts

7. (CSS) Flex Responsive (반응형 웹)

반응형 웹이란?

1. 미디어 쿼리를 사용해서 반응형 웹 만들기

2. flex-wrap : wrap;

[ 전체 코드 ]

[ 전체 코드 ] - 크기 가변적

[ 전체 코드 ] - 크기 고정적

More articles

Meta 정보

8. (CSS) Flex+Grid 실습

6. (CSS) Flexbox

5. (CSS) justify-content