CSS Box Model

웹 문서에서 내용 배치 시

>> 각 요소를 박스 형태로 구성 : CSS Box Model

• 각 박스 모델은 실제 내용이 들어가는 콘텐츠 영역과 테두리, 여백으로 구성

블록 레벨 요소 & 인라인 레벨 요소

블록 레벨(Block-lovel)요소

• 태그를 사용해 요소 삽입 시 혼자 한 줄을 차지하는 것
  → 해당 요소의 너비가 100%
• 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다

인라인 레벨 (inline-level) 요소

• 태그를 사용해 요소 삽입 시 해당 콘텐츠만큼만 영역을 차지
  → 나머지 공간에 다른 요소 삽입 가능
• 한 줄에 여러 개의 인라인 레벨 요소 삽입 가능

박스 모델의 기본 구성

웹 문서의 ‘블록 레벨 요소’는 모두 박스 형태

>> 스타일 시트에서는 이렇게 박스 형태인 요소를 ‘박스 모델(Box Model) 요소’라고 한다.

• 콘텐츠 영역
• 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백
• 테두리(border) : 박스의 테두리
• 마진(margin) : 여러 박스 모델 사이의 여백

box-sizing 속성

박스 모델의 크기 계산

• 웹 문서에 여러 가지 요소 배치 시 실제 박스 모델이 차지하는 크기
  >> 콘텐츠 영역 외에도 콘텐츠와 테두리 사이의 여백, 테두리 두께까지 계산 필요하다.
• 콘텐츠 영역의 너비 300px 패딩 20px 테두리 두께 8px
  >> 실제 박스 모델의 너비 : width 속성에서 지정한 값 + 좌우 패딩값 + 좌우 테두릿값= 356px
• box-sizing : 박스 모델의 너비와 높이를 어떻게 결정할 것인가를 지정

box-sizing 속성값

border-box: 테두리까지 포함해서 너빗값을 지정

content-box: 콘텐츠 영역만 너빗값을 지정 (기본)

 

box-shadow 속성

박스 모델에 그림자 효과를 주는 속성

• 이미지 OR <div>와 같은 전체 영역에 지정하여 삽입
• 기본형태 >> box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> 

예제

HTML

CSS

결과