4. Box model(박스모델)
- CSS가 HTML문서를 제어할 때 사용하는 기본단위는 Element이며 이때 요소를 네모상자(box)로 취급하여 모든 스타일의 기본 속성
(1) 박스모델의 종류
1) width, height → content 크기
2) padding → 테두리와 콘텐츠와의 여백
3) margin → 테두리 바깥쪽 여백
4) border → 요소의 테두리
5) background
(2) 모든 브라우저는 사용자가 스타일을 적용하지 않더라도 기본값(초기값)이 적용된 상태
- 여백을 최소화(0으로 셋팅)
- margin, padding → 0으로 셋팅
- border → 일부요소를 제외하고 테두리값은 없음
(참고1) 크롬(chrome) 브라우저 이용하기
- 해당요소에서 마우스 우클릭(또는 F12)하여 검사
- 박스모델 및 CSS속성값을 확인가능
- width + height + padding + border 영역까지 채워서 보여줌
(3) width와 height
■ 블록요소
- 값을 작성하지 않을 때
: width는 부모요소의 width값을 사용, height는 콘텐츠 높이 만큼만 적용
- 값을 작성할 때
: 적용한 값 만큼만 width, height가 적용되며 콘텐츠의 부모의 영향을 받지 않음
예외) %(퍼센트)를 이용해 상대적인 크기를 입력하는 경우
→ 부모의 크기를 기준으로 계산
■ 인라인 요소
→ 콘텐츠 크기만큼만 width, height가 적용되며, 사용자가 적용한 width, height는 적용되지 않음
1) width 특징
- width는 부모요소의 크기를 그대로 사용
- width값을 작성하는 경우 입력한 그대로 적용
- 인라인 요소의 width는 적용되지 않는다. 콘텐츠 내용에 크기만큼만 width로 인식
- width 에 상대단위(%, em)을 입력하는 경우, p부모요소의 크기를 기준으로 값이 적용됨
2) height 특징
- height는 콘텐츠의 세로 크기만큼만 적용된다.
- height를 입력하는 경우 작성한 값 만큼만 적용되며 콘텐에에영향을 받지 않음
- 인라인 요소는 height의 콘텐츠 높이만큼만 적용되고 height값에 영향을 받지 않음