HTML - 홈페이지 디자인 따라해보기

Jan 18, 2024

Contents

1. 구조화 2. HTML body 3. CSS 디자인 4. 전체 코드

사진의 홈페이지를 디자인해보자.

우선 구조화를 위해 박스를 나눠보자.

1. 구조화

① main : 전체 박스

② main-body : 전체 박스 내부의 박수. 이 박스를 가운데로 배치한다.

③ body-section : main-body 내부의 박스. ③의 박스를 붙여넣기 하면 된다.

④ section-title : 상단의 제일 큰 글자 박스

⑤ section-subtitle : 아래의 작은 글자 박스

⑥ section-img : 사진을 넣을 박스. 내부에 3개의 박스를 만들어서 사진을 넣는다.

⑦ section-btn : 버튼 박스

2. HTML body


<div class="main">
        <div class="main-body">
            <div class="body-section">
                <div class="section-title">Meet Guidebooks</div>
                <div class="section-subtitle">Discover hundreads of local spots recommended by Airbnb hosts</div>
                <div class="section-img">
                    <div class="img-item">
                        <div class="item-name">San Fransisco</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 class="btn-detail">See All Guidebooks</button>
                </div>
            </div> 
          </div>            
				</div>

CSS 를 하지 않아 body 의 구조가 쭉 나열되는 식으로 출력이 된다. 이제 홈페이지 모양대로 만들어가보자.

3. CSS 디자인

1) main 박스 디자인


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

메인 박스는 전체 색깔 지정과 main-body가 가운데로 올 수 있도록 flex 를 사용했다.

2) main-body 디자인


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

main-body 의 크기와 글자를 가운데로 배치한다.

3) section-title, section-subtitle 디자인


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

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

색깔과 폰트 크기를 설정한다.

4) 사진 사이즈 맞추기


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

height 와 width 를 100% 로 설정하면 사이즈가 부모 요소이 100%로 설정된다.

object-fit: cover 은 비율을 유지한 채로 부모 요소를 완전히 덮도록 한다.

5) 사진 나열하기

section-img 은 3개의 사진이 나열되어 있다. grid 로 나열 후 gap 을 준다.


.section-img {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-column-gap: 20px;
        }

6. 사진의 글자 위치 맞추기

예제의 사진은 3개의 박스가 있다. 배치를 위해서는 부모를 만들고 글자를 자식으로 만들어서 relvative-absolute 를 사용한다.

부모 박스를 img-item , 자식 박스를 item-name 으로 설정했다.


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

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

6) 버튼 디자인


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

7) 여백 맞추기


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

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

각 박스 사이에 margin 으로 간격을 맞춘다. 새로운 선택자를 만든다. 이 선택자를 클래스 이름 옆에 넣으면 margin 이 생긴다.


<div class="section-title mb-10">Meet Guidebooks</div>

8) 합치기

마지막으로 ③ body-section 을 복사해서 ② main-body 내에 붙여넣는다.

💡

HTML 구조화만 잘 되면 그 다음은 찾아서 하면 된다. 구조화가 되지 않으면 배치가 무너진다. 웹페이지의 구조화만 잘하자.

4. 전체 코드


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

<head>

    <style>
        .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(238, 147, 147);
            font-size: 20px;
            font-weight: 700;
        }

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

        .section-img {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-column-gap: 20px;
        }

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

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

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

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

        }
    </style>

</head>

<body>

    <div class="main">
        <div class="main-body">

            <div class="body-section">
                <div class="section-title mb-10">Meet Guidebooks</div>
                <div class="section-subtitle mb-5">Discover hundreads of local spots recommended by Airbnb hosts</div>
                <div class="section-img mb-10">
                    <div class="img-item">
                        <div class="item-name">San Fransisco</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 mb-10">
                    <button class="btn-detail">See All Guidebooks</button>
                </div>
            </div>


            <div class="body-section">
                <div class="section-title mb-10">Just for the weekend</div>
                <div class="section-subtitle mb-5">Discover new, inspring places close to home. </div>
                <div class="section-img mb-10">
                    <div class="img-item">
                        <div class="item-name">napa</div>
                        <img src="./images/napa.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">sonoma</div>
                        <img src="./images/sonoma.jpg">
                    </div>
                    <div class="img-item">
                        <div class="item-name">San Francisco</div>
                        <img src="./images/san-francisco-2.jpg">
                    </div>
                </div>
                <div class="section-btn mb-10">
                    <button class="btn-detail">See All Guidebooks</button>
                </div>
            </div>

        </div>
    </div>

</body>
</html>