★ box-sizing : 컨텐츠 영역을 유지
박스의 크기를 정할때 width, height를 이용하여 영역의 넓이와 높이를 잡는다.
이렇게 정해진 width, height영역을 '컨텐츠 영역'이라고 한다.
이 컨텐츠 영역에 여유 공간을 주고 싶을때에는 padding을 이용하고
테두리를 주고싶을때 border속성을 이용한다.
여기에 적용된 padding, border에 따라 box의 크기는 늘어난다.
이때 컨텐츠 영역을 유지한 상태에서 안쪽으로 padding과 border
를 적용하고 싶다면 box-sizing 속성을 이용한다.[기본형]
- box-sizing: content-box;
: css box model의 기본으로 width, height 바깥쪽에 padding과 border가 생긴다.
즉, 총 넓이값이 변하며 기본값이다.
-★ box-sizing: border-box;
: padding, border영역을 width,height안쪽으로 포함시킨다.
width,height의 크기가 유지된다.float : 배치속성
float은 사전적인 의미로 '둥둥 떠다니다'라는 뜻이 있다.
박스를 왼쪽이나 오른쪽으로 배치할 때 사용하는 속성이다.[기본형]
- float : left;
: 박스를 왼쪽으로 배치한다.
- float : right;
: 박스를 오른쪽으로 배치한다.
- float : none;
: 박스를 배치하지 않는다.clear : float을 해제하는 속성
clear속성을 사용하면 해당 박스에 적용된 float속성을 해제할 수 있다.[기본형]
- clear : none;
: float을 해제하지 않고 유지한다. 기본값으로 clear속성을 쓰지 않은것과 같다.
- clear : left;
: 왼쪽에 적용된 float을 해제한다.
- clear : right;
: 오른쪽에 적용된 float을 해제한다.
- clear : both; ★
: float을 양쪽으로 전부 해제한다.
Hi