[HTML/CSS] 17. Display Design

문정준

Mar 11, 2025

Contents

결과

✏️

공통 부분, 따로 쓰는 부분 분리하기

공통 부분은 따로 파일로 묶어서 css 파일로 관리 ( common.css )

다른 스타일도 파일로 묶어서, style.css로 한 번에 끌고 오기

같은 속성이라도 구성이 다르면 분리할 것 ( 이름이 같으면 충돌 발생 )

Index.html


<!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/1.jpg" alt="">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세 보기</a>
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세 보기</a>
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세 보기</a>
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="card-btn">
                <a href="detail.html" class="btn">상세 보기</a>
            </div>
        </div>
    </div>

</body>

</html>

detail.html


<!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/1.jpg" alt="">
            </div>
            <div class="card-content">
                asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasdf asdfasfd asdfasdf asdfasdf asdfasdf
            </div>
        </div>
    </div>

</body>

</html>

write.html


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

style.css


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

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

결과

Contents

결과

<!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/1.jpg" alt=""> </div> <div class="card-btn"> <a href="detail.html" class="btn">상세 보기</a> </div> </div> <div class="card"> <div class="card-img"> <img src="img/1.jpg" alt=""> </div> <div class="card-btn"> <a href="detail.html" class="btn">상세 보기</a> </div> </div> <div class="card"> <div class="card-img"> <img src="img/1.jpg" alt=""> </div> <div class="card-btn"> <a href="detail.html" class="btn">상세 보기</a> </div> </div> <div class="card"> <div class="card-img"> <img src="img/1.jpg" alt=""> </div> <div class="card-btn"> <a href="detail.html" class="btn">상세 보기</a> </div> </div> </div> </body> </html>

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