html

html 레이아웃 만드는 방법

Antonio Bae 2023. 6. 11. 23:28

 

안녕하세요 html 레이아웃 만드는 방법 알려드립니다.

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dongle:wght@700&display=swap" rel="stylesheet">
    <!-- font-family: 'Dongle', sans-serif; -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
    <!-- XEICON 활용 -->
    <title>layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-decoration: none;
            font-family: 'Dongle', sans-serif;
            font-size: 1rem;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        header {
            width: 100%;
            height: 10%;
            background-color: darksalmon;
            color: white;
            font-size: 3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            /* border-top: 3px solid black; */
        }

        img {
            width: 5rem;
            border-radius: 5%;
        }

        .blankBox {
            width: 70%;

        }

        .HomeBox {
            font-size: 3rem;
            color: gold;
        }

        .ad {
            width: 100%;
            height: 15%;
            background-color: wheat;
            font-size: 1.5rem;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        section {
            width: 100%;
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* ☆☆☆밑으로 ☆☆☆ */
            justify-content: center;
            /* ☆☆☆주방향을 바꿈☆☆☆ */
            
        }

        aside {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            font-size: 2rem;
            flex-wrap: wrap;
            /* 컨텐츠가 넘어가면 줄바꿈 */
            
        }

            .box {
                width: 11rem;
                height: 10rem;
                display: flex;
                /* border: 1px solid black; */
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: lightgray;
                border-radius: 5%;

            }

            .imgBox {
                /* width: 6rem; */
                width:9rem;
                height:5rem;
                /* height: 30%; */
            }

            h3 {
                font-size: 1.5rem;
            }

        .bside {
            width: 100%;
            height: 30%;
            background-color: mediumspringgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
        }

        footer {
            width: 100%;
            height: 5%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: wheat;
        }
    </style>
</head>

<body>
    <header>
        <img src="./img/eco01.png" alt="paris">
        <div class="blankBox"></div>
        <i class="xi-bars HomeBox"></i>
    </header>
    <div class="ad">ad</div>
    <section>
        <aside>
            <div class="box">
                <img class="imgBox" src="./img/ice_straw.png" alt="paris">
                <h3>Card title1</h3>
            </div>
            <div class="box">
                <img class="imgBox" src="./img/give.png" alt="give">
                <h3>Card title2</h3>
            </div>
            <div class="box">
                <img class="imgBox" src="./img/hakerton.png" alt="hakerton">
                <h3>Card title3</h3>          
            </div>
            <div class="box">
                <img class="imgBox" src="./img/top01.png" alt="paris">
                <h3>Card title4</h3>
            </div>
            <div class="box">
                <img class="imgBox" src="./img/top01.png" alt="paris">
                <h3>Card title5</h3>
            </div>
            <div class="box">
                <img class="imgBox" src="./img/top01.png" alt="paris">
                <h3>Card title6</h3>          
            </div>


        </aside>
        <div class="bside">bside</div>
    </section>
    <footer>footer</footer>
</body>

</html>
저작자표시 (새창열림)