css)박스 모델

박스의 형태

• 모든 콘텐츠는 고유의 영역을 가진다.
• 직사각형이므로 박스라 부른다.
• 너비와 높이를 가진다.

	block	inline	inline-block
줄바꿈 여부	일어남	일어나지 않음	일어나지 않음
기본적으로 갖는 너비(width)	100%	콘텐츠 크기만큼	콘텐츠 크기만큼
width, height 속성 사용가능 여부	사용가능	불가능	사용가능

박스의 구성요소

content - padding - border - margin으로 이루어져있다.

1. border
   속성사용 ex) border : 1px red solid;
   세부 속성으로도 사용가능 ex)border-width, border-style, border-color, border-radius

2. margin

• 기본적인 방향은 시계방향으로 순서대로 top -> right -> bottom -> left이다.
• 세부 속성 사용가능
  ex)margin-top, margin-right
• border를 기준으로 외부여백을 정한다.
  ex) margin : 10px 10px 10px 10px

3. padding

• 기본적인 방향은 시계방향으로 순서대로 top -> right -> bottom -> left이다.
• border를 기준으로 내부여백을 정한다.

박스영역을 넘어가는 콘텐츠 처리

• 콘텐츠 크기보다 박스 공간이 더 작은경우 콘텐츠가 박스 밖으로 빠져나오게된다.
  이를 방지하려면 overflow속성으로 스크롤을 추가할수 있다.
  auto : 넘치면 자동으로 스크롤 // hidden 넘치는 콘텐츠는 숨긴다.

• 박스에 적용할 여백을 고려하지않고 박스 크기 디자인을 하는경우 레이아웃이 달라질수 있다. *(모든요소를 선택하는 셀렉터)를 사용하여 box-sizing 속성과 border-box속성값을 추가하면 모든 박스에서 여백과 테두리를 포함한 크기가 계산된다.

• *{
  box-sizing : border-box;
  }

• border-box 는 처음 내가 width나 height에 준 값이 여백을 추가하던지에 상관없이 합쳐져서 박스 영역의 값이 처음값으로 유지된다. 여백에 따라서 콘텐츠영역 크기가 조절되기때문이다.

• content-box는 처음 내가 준 width나 height 값은 고정이며 여백을 주면 계속 합쳐진다.