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

결과

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

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

* { 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; }