결과물

이번에는 저번 시간보다 좀 더 어려운 레이아웃을 구성해보았다.

이 방식이 정해진 방식은 아니니까 자신이 원하는 방식을 찾아 나가길 바란다.

아래 코드는 완성된 프로젝트의 코드이다.

~/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">
        <div class="block1-1">Header block1</div>
        <div class="block1-2">Header block2</div>
        <div class="block1-3">Header block3</div>
    </div>

    <div class="container">
        <div class="block2-1">Container block1</div>
        <div class="block2-2">
            <div class="block2-2-1">Container block2-1</div>
            <div class="block2-2-2">Container block2-2</div>
        </div>
        <div class="block2-3">
            <div class="block2-3-1">Container block3-1</div>
            <div class="block2-3-2">Container block3-2</div>
            <div class="block2-3-3">Container block3-3</div>
        </div>
    </div>

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

~/Web-Practice/style.css

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    background-color: lightcoral;
}

.block1-1 {
    height: 35px;
    background-color: lightblue;
}

.block1-2 {
    height: 88px;
    background-color: lightyellow;
}

.block1-3 {
    height: 44px;
    background-color: lightsalmon;
}

.container {
    width: 750px;
    margin: 0 auto;
    background-color: lightskyblue;
    overflow: auto;
    margin-bottom: 30px;
    margin-top: 30px;
}

.block2-1 {
    height: 100px;
    background-color: lightgray;
}

.block2-2 {
    height: 220px;
    margin: 15px;
    background-color: lightcyan;
    overflow: auto;
    display: flex;
}

.block2-2-1 {
    width: 450px;
    height: 200px;
    margin: 10px;
    background-color: lightcoral;
}

.block2-2-2 {
    width: 240px;
    height: 200px;
    margin: 10px;
    margin-left: 0;
    background-color: lightcoral;
}

.block2-3 {
    height: 220px;
    margin: 15px;
    background-color: lightcyan;
    overflow: auto;
    display: flex;
}

.block2-3-1 {
    width: 180px;
    height: 200px;
    margin: 10px;
    background-color: lightcoral;
}

.block2-3-2 {
    width: 260px;
    height: 200px;
    margin: 10px;
    margin-left: 0;
    background-color: lightcoral;
}

.block2-3-3 {
    width: 240px;
    height: 200px;
    margin: 10px;
    margin-left: 0;
    background-color: lightcoral;
}

.footer {
    width: 100%;
    height: 70px;
    background-color: lightsalmon;
}

다음번에는 우리가 구성한 두 레이아웃에 내용물을 추가해보도록 하자.

Previous5. Footer 구성

Last updated

Was this helpful?