Container 내부 코드 작성

저번 시간까지 Container 가운데 정렬과 두 개의 Content div 를 만들었다.

이 페이지에서는 각 Content 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"></div>
</body>
</html>

class명이 content1 인 div 안에는 3개의 박스를 만들 것이고,

content2 인 div 안에는 2개의 박스를 만들 것이다.

일단 index.html 파일에 div를 추가해보자.

~/Web-Practice/style.css

...

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

CSS 파일에 코드를 추가하기 전에 이전 페이지에서 확인용으로 설정해놨던 content1, 2의

height 값과 background-color 값을 지우자.

위의 코드는 위에서부터 3개의 박스에 각각 스타일을 입힌 것이다.

이 블럭은 옆으로 나열할 것이 아니기 때문에 부모 div인 content1에 flex 값을 줄 필요는 없다.

일단 content1의 width 값은 750px이다.

3개의 블럭 모두 content1의 width 값을 따라야 하므로 width값을 100%로 지정한다.

그리고 위에서부터 차례대로 height 값을 300px, 200px, 250px로 지정한다.

여기서 블럭 간격을 설정하기 위해 class명이 block1-1, block1-2인 것에 margin-bottom: 30px를 넣어준다.

파일을 저장하고 실행시켜보면 3개의 블럭이 아래로 나열되어 있는 것을 볼 수 있을 것이다.

이러면 왼쪽 부분은 완성한 것이다. 이제 오른쪽 부분을 만들어 보자.

~/Web-Practice/style.css

...

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

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

왼쪽 부분 블럭을 설정할때와 동일하다.

2개의 블럭 모두 content2의 width 값을 따라야 하므로 width값을 100%로 지정한다.

그리고 위에서부터 height 값을 150px, 630px로 지정한다.

여기서 블럭 간격을 설정하기 위해 class명이 block2-1인 것에 margin-bottom: 30px를 넣어준다.

파일을 저장하고 실행시켜보면 2개의 블럭이 아래로 나열되어 있는 것을 볼 수 있을 것이다.

마지막으로 content1, content2의 height값이 같은지 확인해보자.

다르다면 속성값을 다르게 준 것이다.

이로써 Container 부분의 레이아웃 구성이 끝났다.

다음 페이지에서는 Footer 부분의 레이아웃을 구성해보자.

PreviousContainer 틀 코드 작성 Next5. Footer 구성

Last updated 5 years ago