Box Model
- CSS는 모든 엘리먼트는 여러 겹의 상자로 둘러 쌓여 있다고 가정
- 모든 HTML요소는 사각형 박스 모델이고 위에서 아래로 (Block level), 왼쪽에서 오른쪽으로(Inline level)으로 쌓임
- 컨텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구분
- 컨텐츠를 정렬 또는 위치를 저장하기 위해 Padding, Margin 속성을 활용
Box-sizing
- 모든 엘리먼트의 box-sizing은 기본값이 content-box
- padding과 border를 제외한 content 영역만을 box로 지정
- border 까지의 영역을 box로 지정할 경우 box-sizing을 border-box로 설정
Margin
- Margin 속성은 Box의 Margin area 너비를 지정
- 값이 1개일 때 모든 면에 적용
- 값이 2개일 때 1번째는 {top, bottom}에 2번째는 {right, left}에 적용
- 값이 3개일 때 1번째 값은 {top}, 2번째 값은 {right, left}, 3번째 값은 {bottom}에 적용
- 값이 4개일 때 {top, right, bottom, left} 순으로 적용
- 인접된 두 개 이상의 박스들의 인접 Margin이 통합되어 단일 Margin을 형성
- Block Level의 경우 두 개 이상의 인접 수직 Margin은 통합되나, 수평 Margin은 통합되지 않음
- 유동된(floated) 박스와 다른 박스의 수직 마진은 통합되지 않음
- 위치 값이 absolute와 relative로 위치된 박스의 Margin들은 통합되지 않음
Padding
- 패딩(Padding) 속성은 box의 padding area 너비를 지정
- 값이 1개일 때 모든 면에 적용
- 값이 2개일 때 1번째는 {top, bottom}에 2번째는 {right, left}에 적용
- 값이 3개일 때 1번째 값은 {top}, 2번째 값은 {right, left}, 3번째 값은 {bottom}에 적용
- 값이 4개일 때 {top, right, bottom, left} 순으로 적용
가운데 정렬
- 사용법 : E {margin : 0 auto}
- 첫번째 값은 상, 하 여백이고, 두번째 값은 좌, 우 여백
- 속성 값 auto는 현재 엘리먼트를 중심으로 상, 하 또는 좌, 우의 여백을 균등하게 분배
- margin 속성을 사용하여 컨텐츠를 브라우저 화면의 가운데 정렬되도록 설정 가능
- 기존 HTML에서는 align 속성을 가운데로 설정했으나, CSS에서는 여백을 조절하는 방법을 이용
100% 높이를 유지하는 레이아웃
- Element의 최소 높이를 보장하기 위해서 min-height 속성을 사용
- height, min-height 속성을 같이 사용하여 레이아웃의 높이를 100%로 유지 가능
- <html><body> 엘리먼트 하위에 100% 높이를 유지하는 <div> 엘리먼트 사용
- 브라우저 화면 크기를 늘리더라도 컨텐츠는 항상 브라우저의 100% 높이를 유지
