Container 틀 코드 작성

일단 우린 Container의 width 값을 지정해주고 가운데 정렬을 시켜줄 것이다.

~/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;
    background-color: lightblue;
}

margin: 0 auto;
이 코드를 입력한 후 브라우저의 좌우 너비값을 조절해보자
좌우 너비가 container의 너비값보다 큰 경우에는 가운데 정렬이 되지만
container의 너비값보다 작은 경우에는 왼쪽으로 붙게 된다.
margin의 첫 번째 값은 상하 여백, 두 번째 값은 좌우 여백이다.
width값을 지정하면 브라우저가 좌우 여백값을 계산하여 적용하기 때문에 가운데 정렬이 된다.

이렇게 container의 너비값 지정과 가운데 정렬을 끝냈다.

이젠 박스 3개와 박스 2개를 나눠 담을 div 태그 2개를 작성해 보도록 하자.

왼쪽 div 의 CSS 속성값은 width: 750px 이고,

오른쪽 div 의 CSS 속성값은 width: 300px 이다.

여기서 div 사이에 간격을 만들어주기 위해 왼쪽 div 의 CSS 속성값에 margin-right: 30px를 추가할 것이다.

<!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>
        <div class="content2"></div>
    </div>

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

클래스 명은 각각 content1, content2 로 지정해 준 후 CSS 속성을 지정해주자.

~/Web-Practice/style.css

...

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

    /* 확인용 */
    height: 500px;
    background-color: lightblue;
}

.content2 {
    width: 300px;

    /* 확인용 */
    height: 500px;
    background-color: lightblue;
}

이렇게 CSS 속성을 지정해줬다. 제대로 출력되는지 확인하기 위해 각 div 에

height 값과 background-color 값을 지정해줬다.

파일을 저장하고 홈페이지에 들어가보자

우리가 예상한 결과물은 양쪽에 박스가 하나씩 있는 것이다.

하지만 제대로 출력이 되지 않는다. 박스가 옆에 붙어있는 것이 아니라 아래에 붙어 있을 것이다.

이렇게 나온 이유를 이해하기 위해선 CSS의 Display 속성에 대해 알아야 한다.

CSS Display
HTML 요소들은 block 또는 inline 요소를 가지게 되는데
div 태그는 디폴트 값이 block 이다. block 값은 아래와 같은 특징을 가지고 있다.
항상 새로운 라인에서 시작
width 값이 100%
width, height, margin, padding 값 지정 가능

이런 이유로 우리가 생각한 결과와는 다른 출력물이 나오게 되는 것이다.

이를 해결하려면 어떻게 해야할까?

Display 값을 inline-block으로 설정하는 방법도 좋은 방법이다. 하지만 나는

FlexBox 라는 CSS3 버전의 새로운 개념을 사용하는 것을 추천한다.

Flexbox Layout?
Flexbox는 요소의 사이즈가 불분명하거나 변화할 시에도 유연한 레이아웃 구성이 가능하다.
Flexbox의 특징은 이러하다.
1줄의 코드만으로 수평 정렬이 가능
요소의 간격 조절이 간편
요소의 상하좌우 정렬, 순서 변경이 가능
[참조] http://poiemaweb.com/css3-flexbox 위 사이트에 들어가면 Flexbox 개념을 사용한 예제들이 다양하니 꼭 한번 보기를 바란다.

~/Web-Practice/style.css

...

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

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

    /* 확인용 */
    height: 500px;
    background-color: lightblue;
}

.content2 {
    width: 300px;

    /* 확인용 */
    height: 500px;
    background-color: lightblue;
}

Container에 flex 값을 주었다. 파일을 저장한 후 실행시켜보자.

결과물이 제대로 출력된 것을 볼 수 있을 것이다.

Flex는 Inline-block보다 훨씬 편하기 때문에 꼭 익혀야 할 필요가 있다.

이로써 Container 의 틀 구성이 끝났다.

다음은 Content div 내에 박스를 만들어 보도록 하자.

Previous4. Container 구성 NextContainer 내부 코드 작성

Last updated 5 years ago