HTML/CSS

실습 - trip 만들기

yuzu sim's avatar
yuzu sim
Jan 17, 2024
실습 - trip 만들기
notion image

1. 박스 설계하기

notion image
./ : 현재 폴더에 있는 것을 실행하고 싶을 때
아니면 패스에 있는 것이 실행될 수 있음
 

2. 구조화하기

<!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 hundreds of local spots recommended by Airbnb hots</div>
                <div class="section-img">
                    <div class="img-item">
                        <img src="./images/san-francisco.jpg">
                    </div>
                    <div class="img-item">
                        <img src="./images/new-york.jpg">
                    </div>
                    <div class="img-item">
                        <img src="./images/london.jpg">
                    </div>
                </div>
                <div class="section-btn">
                    <button>
                        See All Guidedbooks
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
notion image
💡
이미지 특징 : 부모 박스를 벗어남
 

3. 가운데, 가로 정렬하기

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

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

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

        .section-title {
            color: #F98A8B;
            font-size: 20px;
            font-weight: 700;
        }

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

        .section-img {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }

        .img-item>img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</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 hundreds of local spots recommended by Airbnb hots</div>
                <div class="section-img">
                    <div class="img-item">
                        <img src="./images/san-francisco.jpg">
                    </div>
                    <div class="img-item">
                        <img src="./images/new-york.jpg">
                    </div>
                    <div class="img-item">
                        <img src="./images/london.jpg">
                    </div>
                </div>
                <div class="section-btn">
                    <button>
                        See All Guidedbooks
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
notion image
💡
배치는 부모한테 하면 자식이 따라옴
 

4. 글자 겹치게 배치하기

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

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

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

        .section-title {
            color: #F98A8B;
            font-size: 20px;
            font-weight: 700;
        }

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

        .section-img {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }

        .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;
        }
    </style>
</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 hundreds of local spots recommended by Airbnb hots</div>
                <div class="section-img">
                    <div class="img-item">
                        <div class="item-name">San francisco</div>
                        <img src="./images/san-francisco.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">New York</div>
                        <img src="./images/new-york.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">London</div>
                        <img src="./images/london.jpg">
                    </div>
                </div>
                <div class="section-btn">
                    <button>
                        See All Guidedbooks
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
notion image
 

5. 공간 조절하기

마진이나 패딩은 개별로 부여하기보다는 따로 넣는 것이 나음
재사용 가능하게 짜는 것이 좋음
<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .mt-10 {
            margin-top: 10px;
        }

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

        .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: #F98A8B;
            font-size: 20px;
            font-weight: 700;
        }

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

        .section-img {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
        }

        .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: #C4624E;
            color: white;
            border-radius: 10px;
            height: 30px;
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="main-body">
            <div class="main-body-section">
                <div class="section-title mb-10 mt-10">Meet Guidebooks</div>
                <div class="section-subtitle mb-5">Discover hundreds of local spots recommended by Airbnb hots</div>
                <div class="section-img mb-10">
                    <div class="img-item">
                        <div class="item-name">San francisco</div>
                        <img src="./images/san-francisco.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">New York</div>
                        <img src="./images/new-york.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">London</div>
                        <img src="./images/london.jpg">
                    </div>
                </div>
                <div class="section-btn mt-40 mb-10">
                    <button class="btn-detail">
                        See All Guidedbooks
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
 

6. 틀이 같으니까 붙여넣기 하고 사진이랑 글자 변경하기

스타일을 따로 CSS 파일로 분리하기
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="main">
        <div class="main-body">
            <div class="body-section">
                <div class="section-title mb-10 mt-10">
                    Meat Guidebooks
                </div>
                <div class="section-subtitle mb-5">
                    Discover hundreds 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="./images/napa.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">New York</div>
                        <img src="./images/new-york.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">London</div>
                        <img src="./images/london.jpg">
                    </div>
                </div>
                <div class="section-btn mb-10">
                    <button class="btn-detail">
                        See All Guidebooks
                    </button>
                </div>
            </div>
            <div class="body-section">
                <div class="section-title mb-10 mt-10">
                    Meat Guidebooks
                </div>
                <div class="section-subtitle mb-5">
                    Discover hundreds 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="./images/napa.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">New York</div>
                        <img src="./images/new-york.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">London</div>
                        <img src="./images/london.jpg">
                    </div>
                </div>
                <div class="section-btn mb-10">
                    <button class="btn-detail">
                        See All Guidebooks
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
.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: #F98A8B;
    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 {
    color: white;
    position: absolute;
}

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

.btn-detail {
    background-color: #C4624E;
    border-radius: 6px;
    color: white;
    height: 30px;
    width: 200px;
}
notion image
 
Share article

More articles

See more posts

Coding_study

RSS·Powered by Inblog