• 고객센터
  • ★ 웹 무료강의

★ 웹 무료강의

고객센터공지사항자료실★ 웹 무료강의추천유튜브강의

모던DS 웹에이전시

웹 무료강의 | 프론트엔드 강의

CSS CSS 박스 모델(Box Model) 구성 요소

페이지 정보

profile_image
작성자 모던DS
조회 1회 작성일 26-02-26 02:10

본문

CSS 박스 모델(Box Model) 구성 요소


1. Content (콘텐츠)

  • 설명: 글자나 이미지 등 실제 내용이 표시되는 영역입니다.

  • 속성: width, height를 통해 크기를 조절합니다.

종류설명
<크기>너비나 높이의 값을 px이나 em 단위로 지정합니다.
<백분율>박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정합니다.
auto박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정됩니다. (기본값)

2. Padding (패딩)

  • 설명: 콘텐츠와 테두리(border) 사이의 안쪽 여백입니다.

  • 특징: 패딩이 늘어나면 박스 전체의 크기가 커질 수 있으며, 배경색이나 이미지가 적용되는 영역입니다.

3. Border (테두리)

  • 설명: 패딩과 마진 사이의 테두리 선입니다.

  • 속성: border-width, border-style, border-color로 스타일을 지정합니다.

4. Margin (마진)

  • 설명: 테두리 밖의 바깥쪽 여백입니다.

  • 특징: 이웃한 요소와의 간격을 조절하며, 배경색이 적용되지 않는 투명한 영역입니다.

종류설명예시
<크기>너빗값이나 높잇값을 px이나 em 같은 단위와 함께 수치로 지정합니다.margin: 50px;
<백분율>박스 모델을 포함한 부모 요소를 기준으로 너빗값이나 높잇값을 퍼센트(%)로 지정합니다.margin: 0.1%;
autodisplay 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정합니다.


마진 중첩 현상

  • 요소를 세로로 배치할 경우, 마진과 마진이 만날 때 마진 값이 큰 쪽으로 겹쳐지는 것

  • 요소를 가로로 배치할 경우에는 상관없음


f6da24a1423ab7b19980bdad13955e9a_1772040052_6028.png


 box-sizing 

박스 크기를 계산하는 방식을 결정합니다.

  • content-box: 설정한 width에 패딩과 테두리를 별도로 더합니다. (기본값)

  • border-box: 설정한 width 안에 패딩과 테두리를 포함시킵니다. (실무 권장)

[box-sizing 속성 비교]

속성값설명크기 계산 방식특징
content-box콘텐츠 영역 기준전체 너비 = 설정 너비 + 패딩 + 테두리기본값이며, 패딩을 넣으면 박스가 커집니다.
border-box테두리 영역 기준전체 너비 = 설정 너비 (패딩, 테두리 포함)실무에서 레이아웃을 잡을 때 가장 많이 사용됩니다.


 box-shadow 속성 (그림자 효과) 

기본형: box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

종류설명
<수평 거리>그림자가 가로로 얼마나 떨어져 있는지를 나타냅니다. (양수: 오른쪽, 음수: 왼쪽) [필수]
<수직 거리>그림자가 세로로 얼마나 떨어져 있는지를 나타냅니다. (양수: 아래쪽, 음수: 위쪽) [필수]
<흐림 정도>값이 커질수록 부드러운 그림자가 되며, 생략 시 0(진한 그림자)이 기본값입니다.
<번짐 정도>양수면 그림자가 확장되고, 음수면 축소됩니다. 기본값은 0입니다.
<색상>공백으로 구분하여 여러 색상 지정이 가능합니다. 기본값은 검은색입니다.
inset이 키워드를 추가하면 안쪽 그림자로 그려집니다.