CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델

Study/CSS

CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델

wawManager 2024. 11. 18. 12:00

728x90

1. 박스 모델(Box Model) 이해하기

CSS의 박스 모델은 HTML 요소가 페이지에서 차지하는 공간을 계산하는 방식입니다. 모든 HTML 요소는 하나의 **박스(Box)**로 간주되며, 각 박스는 다음과 같은 네 가지 영역으로 구성됩니다.

콘텐츠(content): 텍스트나 이미지 등의 실제 콘텐츠가 위치하는 영역
패딩(padding): 콘텐츠와 테두리 사이의 여백
테두리(border): 요소의 경계선을 나타내는 선
마진(margin): 요소와 요소 사이의 바깥 여백

박스 모델 예제

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 15px;
}

박스 모델에서 실제 크기 계산하기

위 코드에서 요소의 총 너비와 높이는 다음과 같이 계산됩니다.

너비: width + padding + border + margin
- 200px + (10px * 2) + (2px * 2) + (15px * 2) = 254px
높이: height + padding + border + margin
- 100px + (10px * 2) + (2px * 2) + (15px * 2) = 154px

2. box-sizing 속성으로 박스 모델 제어하기

CSS에서는 box-sizing 속성을 사용하여 요소의 크기 계산 방식을 변경할 수 있습니다.

box-sizing: content-box: 기본 값으로, width와 height는 콘텐츠 영역에만 적용됩니다. 패딩과 테두리는 총 너비와 높이에 포함되지 않습니다.
box-sizing: border-box: width와 height에 패딩과 테두리가 포함되어, 전체 박스 크기를 지정한 값으로 고정합니다.

.box {
    box-sizing: border-box;
    width: 200px;  /* 전체 박스 크기가 200px로 유지됨 */
    padding: 10px;
    border: 2px solid black;
}

3. CSS display 속성

display 속성은 요소의 레이아웃 방식과 박스 모델을 결정합니다. display의 기본 값은 요소 유형에 따라 달라지며, 대표적으로 block, inline, inline-block, none 등이 있습니다.

1) display: block

한 줄 전체를 차지하며, 위아래로 마진을 가질 수 있습니다.
<div>, <h1> 등 대부분의 레이아웃 요소는 기본적으로 block입니다.

.block-element {
    display: block;
}

2) display: inline

콘텐츠만큼의 너비만 차지하고, 위아래 마진과 높이 설정이 적용되지 않습니다.
<span>, <a>, <img> 등이 기본적으로 inline 요소입니다.

.inline-element {
    display: inline;
}

3) display: inline-block

inline처럼 한 줄에 여러 요소를 배치할 수 있지만, block처럼 너비와 높이, 위아래 마진을 적용할 수 있습니다.

.inline-block-element {
    display: inline-block;
    width: 100px;
    height: 50px;
    margin: 10px;
}

4) display: none

요소를 화면에서 숨깁니다. 페이지에서 공간도 차지하지 않습니다.'

.hidden-element {
    display: none;
}

4. CSS position 속성

position 속성은 요소의 위치를 지정하는 방식으로, static, relative, absolute, fixed, sticky가 있습니다.

1) position: static (기본값)

HTML 문서의 기본 흐름에 따라 위치가 지정됩니다.

.static-element {
    position: static;
}

2) position: relative

기본 위치에서 상대적으로 이동합니다.
top, right, bottom, left 속성으로 이동할 수 있으며, 문서 흐름에 영향을 주지 않습니다.

.relative-element {
    position: relative;
    top: 10px;
    left: 20px;
}

3) position: absolute

가장 가까운 relative 부모 요소를 기준으로 절대 위치를 지정합니다.
해당 요소는 문서 흐름에서 제거되며, 다른 요소와 겹칠 수 있습니다.

.absolute-element {
    position: absolute;
    top: 50px;
    right: 0;
}

4) position: fixed

브라우저 화면을 기준으로 고정됩니다.
스크롤해도 화면의 고정된 위치에 남아 있습니다.

.fixed-element {
    position: fixed;
    bottom: 0;
    right: 0;
}

5) position: sticky

스크롤 위치에 따라 고정되거나, 문서 흐름에 따라 이동하는 하이브리드 방식입니다.
지정된 위치에 도달할 때까지는 일반 흐름을 따르고, 도달하면 고정됩니다

.sticky-element {
    position: sticky;
    top: 0;
}

5. 예제: 박스 모델과 레이아웃 적용

아래는 display와 position을 활용한 간단한 레이아웃 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS 레이아웃과 박스 모델</title>
    <style>
        /* 박스 모델과 border-box 설정 */
        * {
            box-sizing: border-box;
        }

        /* 헤더 */
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
            font-size: 24px;
        }

        /* 레이아웃 */
        .container {
            display: flex;
            margin: 20px;
        }

        /* 사이드바 */
        .sidebar {
            background-color: #f4f4f4;
            width: 200px;
            padding: 20px;
            position: relative;
        }

        /* 메인 콘텐츠 */
        .content {
            background-color: #ddd;
            flex: 1;
            padding: 20px;
        }

        /* 푸터 */
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        웹 페이지 레이아웃 예제
    </header>

    <div class="container">
        <div class="sidebar">사이드바</div>
        <div class="content">메인 콘텐츠</div>
    </div>

    <footer>
        © 2024 웹사이트
    </footer>
</body>
</html>

코드 설명

박스 모델 초기화: 모든 요소에 box-sizing: border-box를 설정하여 레이아웃을 더 쉽게 관리합니다.
헤더와 푸터: display: block을 기본으로 사용하며, 푸터는 position: fixed로 화면 하단에 고정합니다.
메인 콘텐츠와 사이드바: display: flex를 사용해 수평으로 배치하였으며, 사이드바는 고정 너비로 설정하고, 메인 콘텐츠는 flex: 1로 남은 공간을 차지하게 합니다.
요약
이번 강의에서는 CSS의 박스 모델과 레이아웃 기초를 배웠으며, display와 position 속성의 다양한 사용법에 대해 알아보았습니다. CSS 레이아웃의 기본 개념을 익히면 웹 페이지를 더 효율적으로 구성할 수 있습니다. 다음 강의에서는 CSS Flexbox를 활용하여 레이아웃을 더욱 유연하게 만드는 방법을 알아보겠습니다.

728x90