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

[HTML/CSS] 17. Display Design

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

CSS 파일

결과

[스프링부트] 1. WAS

[환경 세팅] 10. Apache Tomcat 설치

[HTML/CSS] 15. Airbnb 만들기

[HTML/CSS] 14. 전체 실습 예제