[CSS] 18. 홈페이지 만들기

Mar 11, 2025

Contents

1. 메인 페이지 2. 상세보기 페이지 만들기 3. 글쓰기 페이지 만들기 CSS 코드 1. 공통으로 들어가는 디자인 2. 상세보기에서만 쓰이는 코드 3. 메인 페이지에서만 쓰이는 코드 4. 코드 통합 import 5. 글쓰기에서만 쓰는 코드

1. 메인 페이지


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

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

<body>
    <div>
        <ul class="nav">
            <li><a href="index.html">홈</a></li>
            <li><a href="write.html">글쓰기</a></li>
        </ul>
    </div>
    <h1>메인 페이지</h1>
    <hr>
    <div class="index-container">
        <div class="card">
            <div class="card-img">
                <img src="img/london.jpg">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세보기</a>
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="img/london.jpg">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세보기</a>
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="img/london.jpg">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세보기</a>
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="img/london.jpg">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세보기</a>
            </div>
        </div>
    </div>
</body>

</html>

2. 상세보기 페이지 만들기


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

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

<body>
    <div>
        <ul class="nav">
            <li><a href="index.html">홈</a></li>
            <li><a href="write.html">글쓰기</a></li>
        </ul>
    </div>
    <h1>상세 보기</h1>
    <hr>
    <div class="detail-container">
        <div class="card">
            <div class="card-img">
                <img src="img/london.jpg">
            </div>
            <div class="card-content">
                <div>askdnalkndslaknds asdkl nakdslnal ksdnas kndask dnaskd naskdn alkdns alkdsn alkdsn as
                    daskdnalkndslaknds asdkl nakdslnal ksdnas kndask dnaskd naskdn alkdns alkdsn alkdsn as
                    daskdnalkndslaknds asdkl nakdslnal ksdnas kndask dnaskd naskdn alkdns alkdsn alkdsn as
                    daskdnalkndslaknds asdkl nakdslnal ksdnas kndask dnaskd naskdn alkdns alkdsn alkdsn as
                    daskdnalkndslaknds asdkl nakdslnal ksdnas kndask dnaskd naskdn alkdns alkdsn alkdsn as d</div>
            </div>
        </div>
    </div>
</body>

</html>

3. 글쓰기 페이지 만들기


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

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

<body>
    <div>
        <ul class="nav">
            <li><a href="index.html">홈</a></li>
            <li><a href="write.html">글쓰기</a></li>
        </ul>
    </div>
    <h1>글쓰기</h1>
    <hr>
    <div class="write-container">
        <input class="write-input" type="text" placeholder="제목">
        <input class="write-input" type="text" placeholder="내용">
        <button class="btn">글쓰기 완료</button>
    </div>
</body>

</html>

CSS 코드

1. 공통으로 들어가는 디자인


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.nav {
    display: flex;
    list-style-type: none;
    padding: 10px;
}

.nav li {
    margin-right: 20px;
}

.card {
    border: 1px solid black;
}

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

.card-btn {
    padding: 10px 0px;
}

.btn {
    text-decoration: none;
    height: 30px;
    background-color: green;
    border: none;
    color: white;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

2. 상세보기에서만 쓰이는 코드


.detail-container {
    padding: 20px;
}

3. 메인 페이지에서만 쓰이는 코드


.index-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

4. 코드 통합 import


@import url("common.css");
@import url("index.css");
@import url("detail.css");
@import url("write.css");

5. 글쓰기에서만 쓰는 코드


.write-input {
    height: 30px;
    width: 200px;
}

See more posts

[CSS] 18. 홈페이지 만들기

1. 메인 페이지

2. 상세보기 페이지 만들기

3. 글쓰기 페이지 만들기

CSS 코드

1. 공통으로 들어가는 디자인

2. 상세보기에서만 쓰이는 코드

3. 메인 페이지에서만 쓰이는 코드

4. 코드 통합 import

5. 글쓰기에서만 쓰는 코드

More articles

[스프링부트] 1. 스프링부트 맛보기(1)

[환경세팅] 9. Tomcat

[CSS] 17. 카드 레이아웃 만들기

[CSS] 16. 구조 짜보기