실습 - vacation 만들기

Jan 17, 2024

Contents

1. 박스 설계하기

2. 구조 만들기


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

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .main {
            background-image: url("vacation.png");
            background-size: 60% 100%;
            background-repeat: no-repeat;
            width: 800px;
            height: 400px;
            display: grid;
            grid-template-columns: auto auto;
            position: relative;
        }

        .right {
            background-color: #F8ECEB;
        }

        .right-up {}

        .right-down {
            width: 400px;
            background-color: white;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            display: grid;
            grid-template-columns: 6fr 2fr;
            position: absolute;
            bottom: 0;
        }

        .down-text2 {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left">
            <img src="vacation\vacation.png" alt="">
        </div>

        <div class="right">
            <div class="right-up">
            </div>

            <div class="right-down">
                <div class="down-text1">
                    <div>&lt;&gt;</div>
                </div>

                <div class="down-text">
                    <i class="fa-brands fa-facebook"></i>
                    <i class="fa-brands fa-instagram"></i>
                    <i class="fa-brands fa-twitter"></i>
                </div>
            </div>
        </div>
    </div>
    </div>

</body>

</html>

3. 디자인 입히기

특수 기호는 그냥 글자처럼 입력이 안 됨

이미지 찾아서 헤더에 링크 걸고 삽입


 <div>&lt;&gt;</div> // <> 표시


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

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        .main {
            width: 800px;
            height: 400px;
            display: grid;
            grid-template-columns: auto auto;
            position: relative;
        }

        .left {
            background-image: url("vacation.png");
            background-size: 120% 100%;
            background-repeat: no-repeat;
            height: 100%;
        }

        .right {
            background-color: #F8ECEB;
            height: 100%;
        }

        .right-down {
            width: 400px;
            background-color: white;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            display: grid;
            grid-template-columns: 6fr 2fr;
            position: absolute;
            bottom: 0;
        }

        .down-text2 {
            position: absolute;
        }

        .menu {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            position: absolute;
            justify-content: space-evenly;
            padding-top: 20px;
        }

        .left-menu {
            font-weight: bolder;
            padding-left: 20px;
            font-size: 20px;
        }

        .center-menu {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
        }

        .right-menu {
            display: grid;
            grid-template-columns: auto auto;
            padding-left: 200px;
        }

        .right-up {
            font-size: 50px;
            font-weight: bolder;
            text-align: left;
            padding-top: 110px;
            position: absolute;
            left: 450px;
        }
    </style>
</head>

<body>
    <div class="main">

        <div class="menu">
            <div class="left-menu">
                <div>zuzu.</div>
            </div>

            <div class="center-menu">
                <div>about</div>
                <div>collections</div>
                <div>visitors</div>
                <div>contact</div>
            </div>

            <div class="right-menu">
                <div><i class="fa-solid fa-magnifying-glass"></i>
                    ENG</div>
            </div>
        </div>

        <div class="left">
            <img src="vacation\vacation.png" alt="">
        </div>

        <div class="right">
            <div class="right-up">
                <div>New</div>
                <div>collection</div>
            </div>

            <div class="right-down">
                <div class="down-text1">
                    <div>&lt;&gt;</div>
                </div>

                <div class="down-text">
                    <i class="fa-brands fa-facebook"></i>
                    <i class="fa-brands fa-instagram"></i>
                    <i class="fa-brands fa-twitter"></i>
                </div>
            </div>
        </div>
    </div>
    </div>

</body>

</html>

See more posts

실습 - vacation 만들기

1. 박스 설계하기

2. 구조 만들기

3. 디자인 입히기

More articles

실습 - 에어비앤비 만들기

Display - Flex

HTML&CSS 연습문제

아이템 배치하기