CSS로 열 레이아웃 만들기 – 단계별 완벽 가이드

CSS를 활용한 열 레이아웃의 기본 개념

CSS에서 열(column) 레이아웃을 만들려면 여러 개의 <div> 요소를 중첩(nesting)하고, 각 단계마다 마진(margin)과 패딩(padding)을 조절하는 방식이 효과적입니다. 이 기법은 좌우에 고정 폭의 여백을 두고 가운데 콘텐츠 영역을 배치하는 다단 레이아웃을 구현할 때 유용합니다.

아래에서는 노란색 배경의 바깥 영역부터 시작해, 단계적으로 div를 중첩하며 최종 콘텐츠가 들어갈 영역까지 만들어 보겠습니다.

1단계: 문서 전체의 마진과 패딩 설정

먼저 페이지 전체의 기본 여백을 지정합니다. body 요소에 위쪽·양옆으로 9px의 마진을 주고, 패딩은 0으로 초기화하며 배경색은 흰색(#FFF)으로 설정합니다.

<style>
    body {
        margin:9px 9px 0 9px;
        padding:0;
        background:#FFF;
    }
</style>

2단계: 노란색 배경의 첫 번째 열(level0) 정의

다음으로 노란색(#FC0) 배경을 가진 열을 정의합니다. 이 규칙은 나중에 최상위 <div>에 적용되어, 화면 양쪽 끝에 노란색 띠가 나타나게 됩니다.

<style>
    #level0 {
        background:#FC0;
    }
</style>

3단계: level0 내부에 두 번째 영역(level1) 정의

이제 #level0 안에 들어갈 새로운 영역을 정의합니다. 왼쪽에 143px의 마진과 9px의 패딩을 지정하면, 노란색 배경 위에 흰색 콘텐츠 영역이 왼쪽에서 일정 폭만큼 떨어져 배치됩니다.

<style>
    #level1 {
        margin-left:143px;
        padding-left:9px;
        background:#FFF;
    }
</style>

4단계: 추가 중첩 및 전체 코드 완성

같은 방식으로 오른쪽 여백을 만드는 #level3, 그리고 실제 본문이 들어갈 #main까지 하나 더 중첩하면 완성된 코드는 다음과 같습니다.

<style>

    body {
        margin:9px 9px 0 9px;
        padding:0;
        background:#FFF;
    }

    #level0 {background:#FC0;}
    #level1 {
        margin-left:143px;
        padding-left:9px;
        background:#FFF;
    }

    #level2 {background:#FFF3AC;}
    #level3 {
        margin-right:143px;
        padding-right:9px;
        background:#FFF;
    }

    #main {background:#CCC;}
</style>

<body>

    <div id="level0">
        <div id="level1">
            <div id="level2">
                <div id="level3">
                    <div id="main">
                        Final Content goes here...
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

각 레이어의 역할 정리

#level0: 화면 전체를 감싸는 노란색(#FC0) 외곽 배경 역할을 합니다.
#level1: 왼쪽에 143px 여백을 만들어 왼쪽 열 공간을 확보합니다.
#level2: 연한 노란색(#FFF3AC) 배경으로 중간 강조 영역을 형성합니다.
#level3: 오른쪽에 143px 여백을 만들어 오른쪽 열 공간을 확보합니다.
#main: 회색(#CCC) 배경의 최종 콘텐츠 영역으로, 실제 내용이 표시되는 곳입니다.

이처럼 div를 계층적으로 중첩하고 각 단계에서 마진과 패딩을 조절하면, 플로트(float)나 포지셔닝 없이도 안정적인 다단 열 레이아웃을 손쉽게 구현할 수 있습니다.