박스 모델 (Box Model)
페이지의 모든 요소는 사각형 박스이다.
박스 모델 (Box Model)이란, HTML 요소의 모양새를 구성하는 속성을 말한다.
즉, 너비(width)와 높이(height), 여백(margin, padding), 외곽선(boarder) 등으로 구성된 박스의 속성 값들이 합쳐져 박스 모델을 만든다고 이해하면 편합니다.
margin- 요소와 요소와의 간격, 즉 외부 여백을 주는 속성
- 테두리(border)를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
- 속성으로는
margin-top,margin-right,margin-bottom,margin-left가 있으며 단축 CSS 속성margin으로 제어된다. - 속성 값으로 주로 px, em, % 등의 단위를 사용
- 속성 값에 음수 깂을 사용할 수 있다.
padding:- 요소 안, 내부 여백을 주는 속성.
- 속성으로는
padding-top,padding-right,padding-bottom,padding-left가 있으며 단축 CSS 속성margin으로 제어된다. - 속성 값으로 주로 px, em, % 등의 단위를 사용
border- 박스의 테두리
- 이 테두리는 각 변마다 선의 굵기(width), 선의 형태(style), 선의 색상(color)를 지정할 수 있다.
- 단축 CSS 속성
border으로 제어된다.
content- 요소의 실제 내용을 포함하는 영역
- CSS box-sizing 속성이 기본(default)으로 설정된 경우,
width,min-width,max-width,height,min-height및max-height가 content 크기를 제어한다.