결과물

간단하게 홈페이지의 레이아웃을 구성하는 실습을 해봤다.

어떻게 div로 나눌지만 정하면 만드는 것을 간단할 것이다.

하지만 한 번 해봤다고 능숙한 것은 아니니 다른 레이아웃도 만들어 보며 꾸준히 연습할 수 있도록 하자.

아래 코드는 프로젝트 코드이다.

~/Web-Practice/index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Web-Practice</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">
        Header
    </div>

    <div class="container">
        <div class="content1">
            <div class="block1-1"></div>
            <div class="block1-2"></div>
            <div class="block1-3"></div>
        </div>
        <div class="content2">
            <div class="block2-1"></div>
            <div class="block2-2"></div>
        </div>
    </div>

    <div class="footer">
        Footer
    </div>
</body>
</html>

~/Web-Practice/style.css

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 60px;
    background-color: lightblue;
}

.container {
    width: 1080px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
}

.content1 {
    width: 750px;
    margin-right: 30px;
}

.block1-1 {
    width: 100%;
    height: 300px;
    margin-bottom: 30px;
    background-color: lightblue;
}

.block1-2 {
    width: 100%;
    height: 200px;
    margin-bottom: 30px;
    background-color: lightblue;
}

.block1-3 {
    width: 100%;
    height: 250px;
    background-color: lightblue;
}

.content2 {
    width: 300px;
}

.block2-1 {
    width: 100%;
    height: 150px;
    margin-bottom: 30px;
    background-color: lightblue;
}

.block2-2 {
    width: 100%;
    height: 630px;
    background-color: lightblue;
}

.footer {
    width: 100%;
    height: 60px;
    background-color: lightblue;
}

다음번에는 레이아웃 구조를 더 심화하여 배워보자.

PreviousFooter 부분 코드 작성

Last updated