CSS에서 요소의 크기 계산법과 넘치는 내용물을 제어하는 방법을 알아봅니다.

---

🖍️ 요소의 크기 box-sizing

요소의 크기 계산 기준을 지정

1. content-box : 요소의 내용(content) 만으로 크기 계산(기본값)
2. border-box : 요소의 내용 + padding + border로 크기 계산
   (설정한 padding, border는 그대로 두고 내용물의 크기를 줄여 요소 크기를 유지하고 싶을 때 사용)

div { 
width:100px; 
height:100px;
border: 10px;
padding:10px;
}

위처럼 설정되어 있을 때,
기본값 content-box 는 div의 크기가 border와 padding만큼 늘어남.
border-box는 저 모든것들이 100px 안에서 해결됨.

---

🖍️ 넘치는 내용물 overflow

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
(자식요소가 부모요소 영역 밖으로 넘칠 때를 대비해, 부모요소에 명시)

1. visible : 넘친 내용을 그대로 보여줌 (기본값)
2. hidden : 넘친 내용을 잘라냄
3. scroll : 넘친 내용을 잘라냄, 안 넘쳤더라도 x축, y축에 모두 스크롤바 생성
4. auto : 넘친 내용을 잘라내고 넘친 축에만 스크롤바 생성
   (scroll, auto는 잘린 영역에 사용자가 인지해야되는 내용이 포함되어 있을 때 사용)

• overflow-x : x축으로 넘친 것만 감지
• overflow-y : y축으로 넘친 것만 감지