Chapter 2-4 박스모델이란?(CSS)

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

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

🔹 박스 모델의 세부 영역:

영역 설명 관련 CSS 속성

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

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

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

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

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

  <title>박스 모델이란</title>
        <style>
            /* .area{
                width: 200px;
                height: 100px;
            } */
/* 
            %: 내가 속한 영역을 기준을 백분율 계산
            -> 내가속한 영역에 관련 값이있어야 적용가능 (width의 경우 기본값 적용 height의 경우
            기본값이 없기때문에 적용이안됨됨) */

            .area{
                width: 50%;
                height: 50%;
            }

        </style>

 

 %: 내가 속한 영역을 기준을 백분율 계산

            -> 내가속한 영역에 관련 값이있어야 적용가능 (width의 경우 기본값 적용 height의 경우

            기본값이 없기때문에 적용이안됨됨) */

 

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

✅ 정리 및 복습 포인트:

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

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