Container 틀 코드 작성

일단 전체적인 틀 먼저 잡아주겠다.

~/Web-Practice/style.css

...

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

Container 부분의 Width값은 750px, Height값은 따로 지정해 주지 않았다.

하지만 가운데 정렬이 잘 되었는지 확인을 위해 잠시 Height 값을 설정하기를 추천한다.

그리고 Container 부분의 위와 아래에 간격을 설정하기 위해 Margin값을 부분적으로 설정했다.

그 다음 3개의 박스를 생성할 것이다. 사진을 보면 두 번째, 세 번째 박스에 여백이 설정되어 있다.

이 박스의 Margin 값은 15px로 설정할 것이다.

~/Web-Practice/index.html

...

<div class="container">
    <div class="block2-1"></div>
    <div class="block2-2"></div>
    <div class="block2-3"></div>
</div>
...

~/Web-Practice/style.css

...

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

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

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

class명이 block2-2, block2-3인 것에는 display: flex 속성이 추가되었다.

이 div 내에는 또 여러 블럭을 나열해야 하기 때문에 추가해준것이다.

원래 이렇게 하면 block2-3 부분 아래에 여백이 생겨야 한다.

하지만 안생겼다면 overflow: auto 속성을 추가해보길 바란다.

이 속성에 대한 설명은 1. 먼저 만들어보기 페이지에 있으니 꼭 한번 읽고 오길 추천한다.

이렇게 Container부분의 틀 코드 작성이 끝났다.