inblog logo
|
from-web-developer
    HTML/CSS

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

    hyeonn's avatar
    hyeonn
    Jan 16, 2024
    7. (CSS) Flex Responsive (반응형 웹)
    Contents
    1. 미디어 쿼리를 사용해서 반응형 웹 만들기2. flex-wrap : wrap;

    반응형 웹이란?

    • 화면의 크기에 따라 비율이 달라지는 것 = 화면의 크기에 맞춰서 비율이 바뀌는 것
    인터넷 창을 줄이면
    인터넷 창을 줄이면
    늘리면 이렇게 되게 만드는 것
    늘리면 이렇게 되게 만드는 것

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

    • 미디어 쿼리: width값이 800px 이하일때, column으로 바뀐다는 문법
    notion image
    width가 600px 이하일때 붉은색으로
    width가 600px 이하일때 붉은색으로
    notion image
    인터넷 창을 600px 이하로 줄이니 2번 박스가 붉은색으로 변하는 걸 확인
    인터넷 창을 600px 이하로 줄이니 2번 박스가 붉은색으로 변하는 걸 확인
     

    2. flex-wrap : wrap;

    width 값을 고정적으로 주고, flex-wrap : wrap;으로 적용
    width 값을 고정적으로 주고, flex-wrap : wrap;으로 적용
    창을 줄이든 늘리든 width 크기 300px를 유지
    창을 줄이든 늘리든 width 크기 300px를 유지
    notion image
     
     
    • 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로 배치하는 속성
     
     
    Share article
    Contents
    1. 미디어 쿼리를 사용해서 반응형 웹 만들기2. flex-wrap : wrap;

    from-web-developer

    RSS·Powered by Inblog