CSS - flex

Jan 17, 2024

📌

inline block 속성으로 가운데 배치 할 때 좋음 배치 할 때 무조건 부모 만들기

가운데 배치


<!DOCTYPE html>
<html>

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

        .flex-container {
            width: 80%;
            /*비율 정할 때 %로 해야지 모니터 화면마다에 맞게 적용됨*/
            display: flex;
            background-color: DodgerBlue;
        }

        .flex-container>div {
            /*>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>

비율 맞추기

반응형 쿼리

💡

조건문처럼 조건을 걸고 max-width 600px보다 작을 때 내부 조건들이 발동한다. 이것을 반응형 쿼리라고 하는데 반응형 웹을 만들 때 사용 한다.

최소 크기가 필요 할 때나 크기가 유지 돼야 할 때

💡

사진 같은거를 이쁘게 비율 유지 할때 사용(최소 크기가 필요 할때나, 크기가 유지 돼야 할 때)

부모를flex-wrap:wrap;으로 설정하고 자식(사진)을widh로 설정하면 부모 크기에 맞춰서 일정 배율 지나면 내려간다.


<!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;
            flex-wrap: wrap;
        }

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

사진

flex 배치 구조

📌

배치에는 디폴트 방향이 있다

📌

column은 세로

row는 가로

📌

main축 기준으로 정렬

컴포넌트:재사용가능한 박스

예제

📌

경로 설정 할 때 ./를 붙이는 이유는 현재 폴더에서 찾을 때 사용한다. ./안붙이고 그냥 찾으려는 이름을 그냥 적으면 path설정이 돼있는걸 찾기 때문이다.


/*구조화*/
<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
    <div class="main ">
        <div class="main-body">
            <div class="main-body-section">
                <div class="section-title">
                    Meet Guidebooks
                </div>
                <div class="section-subtitle">
                    Discover hundereds of local spots recommended by Airbnb hosts
                </div>
                <div class="section-img">
                    <div class="img-item">
                        <img src="./imges/london.jpg" alt="">
                    </div>
                    <div class="img-item">
                        <img src="./imges/napa.jpg" alt="">
                    </div>
                    <div class="img-item">
                        <img src="./imges/new-york.jpg" alt="">
                    </div>
                </div>
                <div class="section-btn">
                    <button>
                        See All Guidebooks
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

📌

html=구조화라 봐도 무방하다 다 박스에 감싸서 img 글자들을 수정하지 않으면 어떤 화면에서도 동일하게 보이게 적용 할 수 있기 때문이다.


<div class="main-body-section">
                <div class="section-title mb-10 mt-10">
                    Meet Guidebooks
                </div>
                <div class="section-subtitle  mb-5">
                    Discover hundereds of local spots recommended by Airbnb hosts
                </div>
                <div class="section-img mb-10">
                    <div class="img-item">
                        <div class="item-name">San Francisco</div>
                        <img src="./imges/london.jpg" alt="">
                    </div>
                    <div class="img-item">
                        <div class="item-name">New york</div>
                        <img src="./imges/napa.jpg" alt="">
                    </div>
                    <div class="img-item">
                        <div class="item-name">London</div>
                        <img src="./imges/new-york.jpg" alt="">
                    </div>
                </div>
                <div class="section-btn">
                    <button class="btn-detail">
                        See All Guidebooks
                    </button>
                </div>
            </div>


.mt-10 {
    margin-top: 10px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-5 {
    margin-bottom: 5px;
}

.main {
    background-color: rgb(232, 232, 232);
    display: flex;
    justify-content: center;
}

.main-body {
    width: 700px;
    text-align: center;
}

.section-title {
    color: rgb(218, 147, 147);
    font-size: 20px;
    font-weight: 700;
}

.section-subtitle {
    font-size: 12px;
}

.section-img {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 10px;
}

.img-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-name {
    position: absolute;
    color: white;
}

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

.btn-detail {
    background-color: rgb(225, 130, 130);
    border-radius: 6px;
    color: white;
    height: 30px;
    width: 200px;
}

메인 파일을 index.html로 만드는 이유

📌

서버가 특정 폴더를 하나 만든다 (webapp) 자원명이 안적혀 있을 때 index를 찾아서 자원을 돌려준다.(만약 index가 없으면 (404 프로토콜) 웹 페이지를 찾을 수 없음 이라고 뜬다) 그래서 모든 홈페이지에 메인 페이지는 index이다. ex)https://www.naver.com

See more posts

CSS - flex

flex 배치 구조

컴포넌트:재사용가능한 박스

메인 파일을 index.html로 만드는 이유

More articles

프로그램 강제종료(포트 충돌)

부트스트랩

CSS - grid

CSS(Cascaidng Style Sheets)