Front-end/Css

Css 기초(flex) - AWS 풀스택 과정 14일차

awspspgh 2024. 8. 1. 21:38

오늘은 flex에 대해서 배워보도록 하겠습니다

 

목차
1. flex
2. 예제 문제
3. 느낀 점

 

1. flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    Flex(플렉스)
    display : block, inline, inline-block
    display : flex, (grid)
    - float 속성이 부모의 높이를 인지 못하는 번거로움을 줄이기 위한 속성
    - 레이아웃 배치 전용으로 고안
    기존 방식보다 훨씬 강력하고 편리한 기능들이 많음.
    - 부모요소(컨테이너) : flex container
    - 자식요소(아이템) : flex item
    - container : flex의 영향을 받는 공간
    - 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는지 결정

    container 설정
    - display : flex
    - flex-direction : 배치 방향 (잘 안 씀)
        - row(가로) / column(세로)
    - flex-wrap : 줄넘김 방식
        - nowrap(줄바꿈 없음) / wrap(줄바꿈)
    - justify-content : 가로 방향 정렬 방식
        - flex-start / end
        - center
        - space-between(균등 분배)
        - space-around(양쪽 공백 포함 균등 분배)
    - align-item : 세로방향 정렬 방식
        - flex-start / end
        - center
        - stretch (전체로 쭉 늘림)
    -->
        <style>
            .container{
                display: flex;
                border: 1px solid black;
                height: 100px;
                justify-content: space-around;
                align-items: stretch;
            }
            .item{
                width: 150px;
                /* height: 50px; */
                border: 1px solid black;
                text-align: center;
                line-height: 50px;
            }
        </style>
</head>
<body>
    <div class="container">
        <div class="item">Hello Flex World</div>
        <div class="item">World</div>
        <div class="item">Flex</div>
    </div>
</body>
</html>

 

※ flex, grid를 자세하게 공부하고 싶다면 스튜디오밀의 1분 코딩 블로그를 보면 좋음!

 

▷ 출력

space-around, stretch

 

2. 예제 문제

◎ 문제

▶ 1번

▶ 2번

 

◎ 정답

▶ 1번

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="reset.css"> -->
    <style>
        /* 태그들이 가지고 있는 고유 속성 없애주는 코드 reset.css */
        /* vh / vw : 브라우저 기준 높이와 너비 */
        @import url(reset.css);
        .container{
            width: 100%;
            height: 100vh;
            background: linear-gradient(rgba(139, 16, 16, 0.205), rgba(10, 10, 44, 0.336)), url(../image/집\(실내\).jpg);
            background-size: cover;
        }
        .container>.navbar{
            width: 90%;
            height: 50px;
            margin: 0 auto;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container>.navbar>h1>a{
            font-size: 20px;
            font-weight: 700;
        }
        .container>.navbar>ul{
            display: flex;
            justify-content: space-between;
        }
        .container>.navbar>ul>li{
            margin: 0 10px;
        }
        .container>.navbar>ul>li>a{
            font-size: 15px;
            font-weight: 700;
        }
        .container>.navbar>ul>li>a:hover{
            color: rgb(192, 125, 192);
        }
        .container>.main{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
        }
        .container>.main>h2{
            color: white;
            font-size: 50px;
            font-weight: 700;
            margin-bottom: 40px;
        }
        .container>.main>a>button{
            border: 2px solid rgb(180, 136, 221);
            font-size: 20px;
            font-weight: 700;
            color: white;
            background-color: rgb(139, 83, 139);
            padding: 10px 20px;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.5s;
        }
        .container>.main button:hover{
            background-color: rgb(206, 157, 206);
            color: black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <h1><a href="">DESIGN</a></h1>
            <ul>
                <li><a href="">HOME</a></li>
                <li><a href="">LOGIN</a></li>
                <li><a href="">SIGNUP</a></li>
                <li><a href="">BOARD</a></li>
            </ul>
        </div>
        <div class="main">
            <h2>Welcome to Front-End World</h2>
            <a href=""><button>Learn More</button></a>
        </div>
    </div>
</body>
</html>

 

▶ 2번

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <style>
        @import url(reset.css);
        body{
            width: 100%;
            height: 100vh;
            background:linear-gradient(skyblue, pink, skyblue) ;
            background-size: cover;
        }
        .container{
            width: 95%;
            height: 50px;
            margin: 30px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container>h1>a{
            font-size: 30px;
            font-weight: 700;
            text-shadow: 5px 5px snow;
        }
        .container>ul{
            display: flex;
            justify-content: space-between;
        }
        .container>ul>li{
            margin: 0 15px;
        }
        .container>ul>li>a{
            font-size: 15px;
            font-weight: 700;
        }
        .container>ul>li>a:hover{
            color: rgb(103, 103, 240);
            border: 3px solid pink;
            border-radius: 10px;
            padding: 0 5px;
        }
        .main{
            margin: 20px auto;
            width: 1200px;
        }
        .main>.image>img{
            width: 1200px;
            height: 500px;
            border: 5px solid rgba(135, 207, 235, 0.39);
            border-radius: 100px;
        }
        .main>h2{
            font-size: 50px;
            font-weight: 700;
            text-align: center;
            margin-top: 100px;
            text-shadow: 5px 5px snow;
        }
        /* one */
        .main>.one{
            background-color: white;
            border-radius: 10px;
            border: 5px solid rgba(135, 207, 235, 0.39);
            margin-top: 100px;
        }
        .main>.one>ul{
            display: flex;
            margin-top: 30px;
            justify-content: space-between;
        }
        .main>.one>ul>li>a{
            text-align: center;
            margin-bottom: 20px;
        }
        .main>.one>ul>li>a>img{
            margin: 50px 20px 0 20px;
            width: 300px;
        }
        .main>.one>ul>li>a>p{
            font-size: 20px;
            margin: 30px 0;
        }
        /* two */
        .main>.two{
            background-color: white;
            border-radius: 10px;
            border: 5px solid rgba(135, 207, 235, 0.39);
            margin-top: 100px;
        }
        .main>.two>ul{
            display: flex;
            margin-top: 30px;
            justify-content: space-between;
        }
        .main>.two>ul>li>a{
            text-align: center;
            margin-bottom: 20px;
        }
        .main>.two>ul>li>a>img{
            margin: 50px 20px 0 20px;
            width: 300px;
        }
        .main>.two>ul>li>a>p{
            font-size: 20px;
            margin: 30px 0;
        }
        /* three */
        .main>.three{
            background-color: white;
            border-radius: 10px;
            border: 5px solid rgba(135, 207, 235, 0.39);
            margin-top: 100px;
        }
        .main>.three>ul{
            display: flex;
            margin-top: 30px;
            justify-content: space-between;
        }
        .main>.three>ul>li>a{
            text-align: center;
            margin-bottom: 20px;
        }
        .main>.three>ul>li>a>img{
            margin: 50px 20px 0 20px;
            width: 300px;
        }
        .main>.three>ul>li>a>p{
            font-size: 20px;
            margin: 30px 0;
        }
        .footer{
            width: 100%;
            height: 150px;
            margin-top: 100px;
            background-color: white;
            border-radius: 10px 10px 0 0;
        }
        .footer>ul{
            display: flex;
            line-height: 150px;
            justify-content: center;
        }
        .footer>ul>li{
            margin: 0 20px;
        }
        .footer>ul>li>.bi{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><a href="">▦ SIMPLE SHOP</a></h1>
        <ul>
            <li><a href="">Content</a></li>
            <li><a href="">Shop</a></li>
            <li><a href="">Cart</a></li>
            <li><a href="">Login</a></li>
        </ul>
    </div>
    <div class="tbody">   
        <div class="main">
        <div class="image"><img src="../image/여름 옷 행사.png" alt="메인 이미지"></div>
        <h2>Our New Product</h2>
        <div class="one">
            <ul>
                <li>
                    <a href="">
                        <img src="../image/티1.gif" alt="티">
                        <p>립넥 소프트 반팔티</p>
                        <p>29,000원</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../image/티2.gif" alt="티">
                        <p>워셔블 쿨링 투버튼 카라니트</p>
                        <p>36,000원</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../image/티3.gif" alt="티">
                        <p>젠틀 컷어웨이 오픈카라 반팔티</p>
                        <p>34,000원</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="two">
            <ul>
                <li>
                    <a href="">
                        <img src="../image/셔츠1.gif" alt="셔츠">
                        <p>감사제 링클프리 반팔 셔츠</p>
                        <p>21,000원</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../image/셔츠2.gif" alt="셔츠">
                        <p>시원한 루즈핏 와이넥 셔츠</p>
                        <p>34,000원</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../image/셔츠3.gif" alt="셔츠">
                        <p>린넨 루즈핏 카라버튼 셔츠</p>
                        <p>20,400원</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="three">
            <ul>
                <li>
                    <a href="">
                        <img src="../image/바지1.gif" alt="바지">
                        <p>워싱 코튼스판 벤딩 반바지</p>
                        <p>24,900원</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../image/바지2.gif" alt="바지">
                        <p>시원한 에어콜드 사방스판 밴딩팬츠</p>
                        <p>29,000원</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="../image/바지3.gif" alt="바지">
                        <p>물빠짐 없는 시원한 밴딩 데님진</p>
                        <p>39,000원</p>
                    </a>
                </li>
            </ul>
        </div>
        </div>
    </div>
    <div class="footer">
        <ul>
            <li><a href=""><svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
            <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
            </svg></a></li>
            <li><a href=""><svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
                <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15"/>
              </svg></a></li>
            <li><a href=""><svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
              </svg></a></li>
        </ul>
    </div>
</body>
</html>

 

3. 느낀 점

이번에 쇼핑 사이트를 유사하게 만들 수 있어서 재미있었다. flex가 확실히 float보다 활용하기 편하였던 것 같다.

'Front-end > Css' 카테고리의 다른 글

Css 기초(실습) - AWS 풀스택 과정 15일차  (0) 2024.08.02
Css 기초(media) - AWS 풀스택 과정 13일차  (0) 2024.07.31
Css기초(z-index, animation) - AWS 풀스택 과정 12일차  (0) 2024.07.30
Css 기초(font, box, position) - AWS 풀스택 과정 11일차  (0) 2024.07.29
Html & Css 기초(div) - AWS 풀스택 과정 10일차  (0) 2024.07.26

'Front-end/Css'의 다른글

  • 현재글Css 기초(flex) - AWS 풀스택 과정 14일차

관련글

티스토리툴바