박스모델(Box-Model)

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

하나의 박스는 다음 네 개의 영역으로 구성된다.

• 콘텐츠 영역
  • width, height
• 안쪽 여백
  • padding
• 경계선(테두리)
  • margin
• 바깥쪽 여백
  • border-width

인라인 요소

• width, height가 지정되지 않는다.
• 지정을 해주려면 display를 inline-block으로 변경

margin, padding 상하좌우 다르게 지정

여백은 상하좌우 네 개의 면에 존재하는 영역

작성자는 각 면에 개별적으로 두께를 정의할 수 있다.

• 방법1 하위 속성 정의하기
  
• 방법2 여러 값을 한 번에 정의 하기 padding, margin은 네 면의 여백에 대한 단축속성이다.
  

박스(box)의 크기 계산

요소(element)의 크기는 padding, border, content(width, height)의 크기의 총합

ex) width: 100px, height: 100px, border: 5px solid red, padding: 20px이면 150px X 150px 크기의 박스가 생긴다.

box-sizing

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

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

⇒ 너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있다.

background 속성

배경은 콘텐츠의 배경을 정의한다.

단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다.

하위 속성	역할
background-color	배경 색을 정의
background-image	배경 이미지를 정의
background-position	배경 이미지의 초기 위치를 정의
	default: left top
	속성값: left, top, bottom, right, center
background-size	배경 이미지의 크기를 정의
	속성값: cover(이미지가 깨지지 않는 선에서 최대로 지정), contain(이미지가 찌그러지거나 잘리지 않는 선에서 최대 사이즈)
background-repeat	배경 이미지의 반복 방법을 정의
	default: repeat
	속성값: repeat, no-repeat, repeat-x, repeat-y

단축속성으로 정의할 경우, 정의할 속성과 정의를 생략할 속성을 다양하게 선택할 수 있어 여러 경우의 수가 존재