입문자를 위한 CSS 기초강의(5)

박스모델 (Box-Model)

---

• 브라우저가 요소를 렌덩링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기,위치,속성(색,배경,테두리 모양 등)을 결정할 수 있다.

  • 콘텐츠 영역: width,height
  • 안쪽 여백: padding
  • 바깥쪽 여백: margin
  • 테두리 : border-width

padding과 margin

• 여백은 상하좌우 네 면에 존재하는 영역이다.
• 상하좌우 개별 속성을 사용하면 여백 두께를 개별 정의할 수 있다.
• padding과 margin 속성에 여러 면의 여백을 함께 정의할 수 있다.

box-sizing

---

• box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.
  
  

속성값	의미
content-box	너비와 높이가 콘텐츠 영역만 포함한다.(기본값)
border-box	너비외 높이가 안쪽 여백과 테두리까지 포함한다.

background

---

• 배경(background)은 콘텐츠의 배경을 정의한다.
• 단축 속성으로써 색상,이미지,반복 등 다양한 하위 속성을 정의할 수 있다.

하위속성	역할
background-color	배경 색을 정의한다.
background-image	배경 이미지를 정의한다.
background-position	배경 이미지의 초기 위치를 정의한다.
background-size	배경 이미지의 크기를 정의한다.
background-repeat	배경 이미지의 반복 방법을 정의한다.