Chapter 2-6. 여백다루기(CSS)

HTML & CSS

Chapter 2-6. 여백다루기(CSS)

Chansman 2025. 3. 31. 10:31

📌 CSS 박스 모델(Box Model) 이해하기

웹 페이지의 모든 요소는 2차원 공간 안에서 각자의 너비(width)와 높이(height)를 가지며, 이를 '박스'라고 부릅니다. 박스 모델은 이 박스를 크게 네 가지 영역으로 나누어 구분한 디자인 개념입니다.

🔹 박스 모델의 세부 영역:

영역 설명 관련 CSS 속성

콘텐츠(Content) 영역	요소 안의 콘텐츠를 표시하는 공간	width, height
안쪽 여백(Padding)	콘텐츠 주변의 내부 여백	padding
경계선(Border)	콘텐츠와 안쪽 여백을 감싸는 테두리	border
바깥쪽 여백(Margin)	요소의 바깥 부분에서 요소를 감싸는 외부 여백	margin

🔹 각 영역의 특징과 사용 방법:

콘텐츠 영역: 실제 콘텐츠가 들어가는 영역으로, 너비(width)와 높이(height) 속성을 이용해 크기를 지정합니다.
안쪽 여백(Padding): 콘텐츠와 테두리(border) 사이의 간격을 조정합니다.
경계선(Border): 콘텐츠와 패딩을 둘러싸는 선으로, 두께, 스타일, 색상 등을 지정할 수 있습니다.
바깥쪽 여백(Margin): 요소 간의 간격을 설정하여 다른 요소와의 간격을 유지하거나 배치를 조정합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible"
        contect="IE=edge"
        >
        
        <title>여백다루기기</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid black;

                /* # 위치에다가 접미사를 주게되면 거기에만 적용
                top bottom left right */

                margin: 10px 20px 30px 40px;
                padding-top: 20px;
                padding-right: 50px;

                /* # content 박스의 순수한 200x200이 되므로 박스모델이 정해진다. */
                box-sizing:content-box;

                /* # border 박스 사이즈가  200x200이 되고 그안에 요소가다들어간다. */
                box-sizing:border-box;
            }    
        </style>

    </head>
    <body>
        <div></div>
   
    </body>
</html>

/* # 위치에다가 접미사를 주게되면 거기에만 적용

top bottom left right */

/* # content 박스의 순수한 200x200이 되므로 박스모델이 정해진다. */

box-sizing:content-box;

/* # border 박스 사이즈가 200x200이 되고 그안에 요소가다들어간다. */

box-sizing:border-box;

📌 CSS 박스 모델

CSS 박스 모델은 웹 페이지에서 각 요소가 차지하는 공간을 정의하는 개념으로, 4개의 영역으로 구성됩니다:

콘텐츠 영역(content): 실제 텍스트나 이미지 같은 콘텐츠가 위치하는 영역
패딩(padding): 콘텐츠 주변의 여백
보더(border): 패딩을 둘러싼 테두리
마진(margin): 요소 바깥의 여백, 다른 요소와의 간격을 만듭니다.

🧩 박스 모델의 크기

요소의 크기는 기본적으로 width와 height로 정의되지만, box-sizing 속성에 따라 계산되는 방식이 달라집니다.

📌 box-sizing 속성

**box-sizing**은 **width**와 height 속성의 적용 범위를 결정합니다.
즉, 요소의 크기가 어떻게 계산되는지를 지정하는 속성입니다.

🧑‍🏫 box-sizing 속성의 2가지 주요 값

content-box (기본값)
border-box

✅ box-sizing: content-box;

기본값입니다.
**width**와 **height**는 **콘텐츠 영역(content)**의 크기만을 지정합니다.
**패딩(padding)**과 **보더(border)**는 요소 크기에 추가됩니다.

✅ 예시 (content-box)

#content {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: content-box;
}

200px x 200px는 콘텐츠 영역의 크기입니다.
**패딩(20px)**과 **보더(10px)**는 콘텐츠 영역 외부에 추가되어, 실제 요소가 차지하는 공간은 240px x 240px입니다.

✅ box-sizing: border-box;

**width**와 **height**는 전체 요소의 크기(콘텐츠 + 패딩 + 보더)를 지정합니다.
패딩과 보더가 요소 크기 안에 포함되므로, 설정한 **width**와 **height**가 전체 요소의 크기로 적용됩니다.

✅ 예시 (border-box)

#content {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid black;
  box-sizing: border-box;
}

200px x 200px는 전체 요소의 크기입니다.
**패딩(20px)**과 **보더(10px)**는 요소 크기에 포함되므로, 실제 콘텐츠 영역은 160px x 160px이 됩니다.

📈 차이점 요약

속성 값width와 height 적용 대상패딩(padding)과 보더(border) 처리

content-box	콘텐츠 영역만 적용	패딩과 보더는 외부에 추가
border-box	전체 요소 크기 적용	패딩과 보더는 요소 크기에 포함

📌 결론

box-sizing: content-box;: 기본값이며, 콘텐츠 영역의 크기만을 기준으로 계산합니다.
box-sizing: border-box;: 패딩과 보더를 포함한 전체 요소 크기를 기준으로 계산됩니다.

추천: **border-box**를 사용하면 레이아웃 계산이 더 직관적이고 예측하기 쉬워지므로 많은 웹 개발자들이 선호합니다!

🔹 CSS로 크기 설정 시 주의점:

너비(width)와 높이(height)를 설정할 때는 수치와 단위를 함께 사용해야 합니다.
픽셀(px)과 퍼센트(%) 단위를 가장 많이 사용하지만, 상황에 따라 다양한 단위를 활용할 수 있습니다.

🔍 개발자 도구를 활용한 박스 모델 확인: 크롬과 같은 브라우저의 개발자 도구(F12)를 통해 각 요소의 박스 모델 구조와 크기를 시각적으로 확인할 수 있습니다. 이를 통해 실제 웹페이지 디자인 시 각 요소의 정확한 크기와 여백을 쉽게 파악할 수 있습니다.

✅ 정리 및 복습 포인트:

모든 웹 요소는 박스 모델로 관리됨
박스 모델은 콘텐츠, 패딩, 보더, 마진으로 구성
크기 지정 시 단위와 수치 필수 (px, % 등)
개발자 도구로 박스 모델 구조를 시각적으로 확인 가능

CSS 박스 모델의 기본 구조와 특성을 잘 이해하면 더욱 효율적이고 명확한 웹 디자인을 구현할 수 있습니다.