Container 내부 코드 작성

지난 페이지에서는 Container 부분의 틀 코드를 작성해보았다.

이번 페이지에서는 그 틀 내에 여러 박스를 나열해보도록 하겠다.

~/Web-Practice/index.html

...

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

...

우린 class명이 block2-2인 div 내에 2개의 박스를 만들어 줄 것이고,

class명이 block2-3인 div 내에는 3개의 박스를 만들어 줄 것이다.

코드를 작성하기 전에 완성된 사진을 보고 오면 박스마다 여백이 존재한다는 것을 알 수 있을 것이다.

이 여백의 값은 10px로 고정하겠다.

~/Web-Practice/style.css

...

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

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

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

...

class명이 block2-2인 div 내 요소의 스타일 속성이다.

왼쪽에서부터 width 값은 450px, 240px로 설정하자.

그리고 Margin 값을 10px 로 설정한 후 파일을 저장하고 실행시켜보면

제대로 출력이 되지 않은 모습을 볼 수 있다.

block2-2-1 요소와 block2-2-2 요소 사이에 Margin 값이 더 많이 들어간 것을 볼 수 있다.

또한 상단 부분에 여백이 생기지 않은 모습도 볼 수 있을 것이다.

우선 첫 번째 문제점의 해결 방안으로는 block2-2-2 요소의 margin-left값을 0으로 설정하는 것이다.

물론 이 코드는 margin: 10px의 아래 부분에 작성해야 한다.

CSS 코드는 순차적으로 읽어 들이기 때문에 뒤의 속성으로 덮혀지기 때문이다.

이러면 첫 번째 문제점은 해결한 것으로 보인다. 하지만 두 번째 문제점이 남아있다.

이는 block2-2-1, block2-2-2의 상위 div 인 block2-2에 overflow: auto 속성을 추가해주면 해결된다.

overflow: auto 속성에 대한 설명은 1. 먼저 만들어보기 페이지에 존재하므로 꼭 읽고 오자

아래 코드는 이러한 문제점을 해결한 후의 코드이다.

~/Web-Practice/style.css

...

.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-2의 div 내에 2개의 박스를 만들어 주었다.

이번에는 block2-3의 div 내에 3개의 박스를 만들어 주겠다.

왼쪽에서부터 width값은 180px, 260px, 240px 이다.

아래의 코드를 작성하기 전 자신이 직접 코딩해보고 결과물이 제대로 나오는지 확인해보자.

위의 경우와 동일한 문제점이 생겨도 같은 해결 방안을 적용하면 제대로 출력이 될 것이다.

~/Web-Practice/style.css

...

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

...

이 코드가 3개의 블럭을 다 추가한 후의 코드이다.

처음 2개의 블럭을 만들어준 상황과 동일하므로 설명은 생략하겠다.

이렇게 Container 내부 코드 작성이 끝났다.