[CSS] 15. 공통 CSS 추출

김주희

Mar 12, 2025

Contents

css 결과

구조

index.html


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

<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>

detail.html


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

<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">
                fjaejifdkajfkdfaj;eiljkf dfjaiejakdlf;kiej 
                ajfeiafjldka;fajkejiajkdjkfjeijadjfaijekjkjklajd fjdkafjk ajfeijfkdla 
                fiejffajdifjedjkaf;eiljfk djfakldjfle;aldkfjel;kdl;afeiljlkd; 
                jdakl;eifjdklad;iefja;ksej
            </div>
        </div>
    </div>
</body>

</html>

write.html


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

<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

style.css


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

common.css


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

.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;
}

index.css


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

detail.css


.detail-container {
    padding: 20px;
}

write.css


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

결과

See more posts

[CSS] 15. 공통 CSS 추출

index.html

detail.html

write.html

css

style.css

common.css

index.css

detail.css

write.css

결과

More articles

[환경세팅] 7. Cursor 설치

[HTML/CSS] 16. 최종 실습 (Airbnb 만들기)

[HTML/CSS] 14. 전체 실습

[HTML/CSS] 13. Card Box 만들기