[CSS -4] 박스 모델

박스 모델(Box Model)

• 너비와 높이를 가지는 개별 요소를 가리켜 ‘박스’라 표현하고, 박스를 네 가지 세부 영역으로 나누어 구분한 일종의 디자인 모델
• CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있음
• CSS는 영역 별 크기도 다로 설정할 수 있도록 다양한 속성들을 제공
• 박스 모델의 세부 영역들
  

  영역	설명	관련 속성
  콘텐츠 영역	요소 내에 포함된 콘텐츠를 표시하는 영역	width, height
  안쪽 영역	테두리 안에서 콘텐츠 주변을 감싸는 여백	padding
  경계선(테두리)	콘텐츠와 안쪽 여백을 둘러싸는 테두리	border
  바깥쪽 여백	테두리 바깥에서 요소를 감싸는 여백	margin

테두리 스타일

• 화면에 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분해 줄 수 있는 유용한 영역
• 단축속성(여러 개의 세부속성은 한 번에 정의할 수 있는 속성)이 border를 사용하거나 border의 하위 속성을 개별적으로 사용하는 방법을 사용

  속성명	용도
  border-width	테두리의 두께를 지정
  border-style	점선, 실선, 겹선 등으로 테두리의 모양을 지정
  border-color	테두리의 색상을 지정
  border	테두리의 두께, 모양, 색상 등을 한번에 지정
  border-radius	테두리의 모서리를 얼마나 둥글게 만들어 줌, 공백으로 구분해서 시계방향으로 각각 다른 값을 지정해 줄 수 있음

여백 만들기

• 여백의 안쪽, 바깥쪽 여부는 테두리를 기준으로 정해진다
  • 안쪽 : padding
  • 바깥 쪽 : margin

• 박스 모델의 여백에는 네 개의 면이 존재
• 속성값 사용 개수에 따라 네 면의 여백 크기를 달리 정할 수 있음

  개수	설명
  1	모든 면에 동일한 값을 지정
  2	위아래 여백과 왼쪽오른쪽여백의 값을 따로 지정
  3	위쪽, 왼쪽 오른쪽, 아래쪽 여백 순서로 값을 지정
  4	위쪽, 오른쪽, 아래쪽, 왼쪽 순서대로 각각 따로 지정

• 접미사를 사용해서 하나씩 지정해서 사용 할 수 있다.
  • -top, -bottom, -left, -right

• width나 height 속성을 박스에 사용하면 영역크기를 지정할 수 있는데 여백을 속성을 추가하면서 기존 크기보다 커지기를 훤히 않을 시에는 box-sizing속성을 사용
  • content-box(width, height /기본설정) : 콘텐츠의 영역을 유지
  • border-box : 콘텐츠영역이 border의 사이즈 만큼 양보