012_플렉스

Jan 19, 2024

Contents

☝

하기 전에 html 기본 문법 <p> 태그 → 글자 장문 적기

<em> 태그 → 글자 기울이기

flex

flex는 “inline-block”의 속성을 가진다.

flex는 비율을 가지고 정렬 되는 것은 아니다.

출력 코드


<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>

<body>

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

</body>

</html>

모든 배치에는 방향이 있다.

출력 코드 → flex-direction과 justify-content에 따라 달라진다


<!DOCTYPE html>
<html>

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

        .flex-container {
            width: 80%;
            height: 500px;
            display: flex;
            /*row가 기본 값이고 column은 위에서 아래로 정렬이다*/
            flex-direction: column;
            /*축에 따라 정렬이 달라진다.*/
            justify-content: end;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
</body>

</html>

메인축 정렬(메인 엑시아스) → justify-content의 영역은 메인 엑시아스 영역이다.

출력 코드


<!DOCTYPE html>
<html>

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

        .flex-container {
            width: 80%;
            height: 500px;
            display: flex;
            /*row가 기본 값이고 column은 위에서 아래로 정렬이다*/
            flex-direction: row;
            /*축에 따라 정렬이 달라진다.*/
            justify-content: space-between;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            background-color: #f1f1f1;
            margin: 10px;
            padding: 20px;
            font-size: 30px;
            height: 50px;
            /*flex의 비율을 설정한다. (출력 결과는 1대1대1이다) 따로 적용도 가능*/
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="flex-container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>
</body>

</html>

그리드는 여러 줄 배치 할때, 기본은 플렉스로 한다

반응형

출력 코드


<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            box-sizing: border-box;
        }

        .flex-container {
            display: flex;
            flex-direction: row;
            font-size: 30px;
            text-align: center;
        }

        .flex-item-left {
            background-color: #f1f1f1;
            padding: 10px;
            flex: 1;
        }

        .flex-item-right {
            background-color: dodgerblue;
            padding: 10px;
            flex: 1;
        }

        /* max-width 가 800px보다 작아지면 -> 이걸 미디어쿼리라 한다. */
        @media (max-width: 600px) {
            .flex-container {
                flex-direction: column;
            }

            .flex-item-right {
                background-color: red;
            }
        }
    </style>
</head>

<body>

    <div class="flex-container">
        <div class="flex-item-left">1</div>
        <div class="flex-item-right">2</div>
    </div>

</body>

</html>

flex랑 같이 씀

object-fit: contain; → 비율을 유지하는 것

object-fit: fill; → 비율을 무시하고 넣는 것 (사진 넣을 때는 망함)

object-fit: cover → 비율과 사이즈를 유지하고 넣는 것

flex-wrap: nowrap; → 플렉스 아이템들이 한 줄에 배치되도록 설정

flex-wrap: wrap; → 플렉스 아이템들이 여러 줄에 걸쳐 배치되도록 설정 (부모 크기에 맞춰서 내려간다) → 사진의 비율이 안 깨진다.

비율로 설정하면 둘 다 창의 크기를 조절하면 오브젝트도 같이 조절된다.

직접 px로 값을 넣으면 창의 크기를 조절해도 동일하다

( 최소 크기가 필요 할때는 flex 1로 설정이 불가능 해서 크기를 지정 하는 것이다 )

창의 크기에 따라 오브젝트들이 내려가도록 하고 싶으면

미디어 쿼리 (max 를 이용하여 width 설정)

width를 비율로 설정

flex-wrap: nowrap;은 플렉스 아이템들이 한 줄에 배치되도록 설정합니다.

flex-wrap: wrap;은 플렉스 아이템들이 여러 줄에 걸쳐 배치되도록 설정합니다. 이 설정에 따라 아이템들은 부모 요소의 크기에 맞춰 자동으로 줄바꿈이 일어나며, 이로 인해 아이템의 원래 비율이 유지됩니다.

비율로 설정하면 창의 크기를 조절할 때 플렉스 아이템들도 동일하게 조절됩니다.

직접 픽셀(px)로 값을 지정하면, 창의 크기를 조절해도 플렉스 아이템의 크기는 동일하게 유지됩니다.

최소 크기가 필요한 경우에는 'flex: 1;'로 설정하면 문제가 발생할 수 있기 때문에, 이런 상황에서는 직접 크기를 지정해야 합니다.

창의 크기에 따라 위치가 바뀌는 코드

코드


<!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>

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

        .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 {
            flex-wrap: wrap;
            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 {
            flex-wrap: wrap;
            width: 50%;
            background-color: yellow;
            padding: 20px;
            display: flex;
        }

        .img-item {
            flex: 1;
            width: 300px;
            height: 300px;
            object-fit: contain;
        }

        .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://cphoto.asiae.co.kr/listimglink/1/201303041526557886068A_1.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://cphoto.asiae.co.kr/listimglink/1/201303041526557886068A_1.jpg">
            </div>
        </div>
    </div>


</body>

</html>

컴포넌트 → 재사용 가능한 리젯 또는 코드

html의 파일 이름을 index라고 하는 이유는?

자원명을 안적으면 서버가 못찾음 그로 인해 자원명을 못찾으면 index를 찾으라는 프로토콜이 있어서 그렇다. 이로 인해 모든 페이지의 메인은 index.html이다.

index도 자원명도 없으면 404오류 출력 → 404도 프로토콜이다.

스테이트리스

./를 붙이는 이유는 명확하게 내 폴더내에 있는 친구를 불러오고 싶을때 사용한다. → 이유는 환경패스에 연동된 자료가 불러와질수도 있기 때문이다.

메인축 반대를 크로스엑시아스 (반대축)

ctrl+w → 블럭 잡기

See more posts

012_플렉스

flex

반응형

More articles

64_JDBC 연동

063_JDBC 실습(Write 자료)

011_그리드 레이어

010_배치