[CSS] Box-model

박스 모델

박스 모델은 모든 HTML 요소가 사각형의 박스로 둘러 쌓여 있다는 개념이다. 박스 형태의 요소들을 하나씩 원하는 곳에 배치해 원하는 모양으로 만들어 나가는 것이 결국 웹 페이지를 만드는 본질이다.

박스의 종류에는 block, inline, inline-block이 있다. 박스 모델의 성격은 display 속성을 사용하면 변경할 수 있다. 속성값으로는 block, inline, inline-block을 사용한다. none을 사용하면 브라우저 화면에서 HTML 요소를 제거한다.

📦 박스를 구성하는 요소에 대해서 알아보자!

📦 content

• 요소의 실제 내용
• 시작 태그와 닫는 태그 사이에 사용된 콘텐츠가 속하는 영역
• content 영역에 영향을 주는 width와 height

width : content 영역의 너비
height : content 영역의 높이

📦 padding

• 요소의 내부 여백
• 요소의 content 영역에 포함
• border와 content 사이 공간 조절
• 요소의 크기에 영향
• background-color 적용하면 내부 여백 확인 가능

📦 border

div { border: 1px solid red; }

• 요소의 테두리
• 요소의 content 영역에 포함
• 개발 과정 영역이 차지하는 크기를 파악하기 위해서도 사용

📦 margin

• 요소의 외부 여백
• 음수값 가질 수 있다.
  • 뷰포트에서 사라지게 만들거나, 다른 요소와 겹치게 만들 수 있다.
• 브라우저가 계산하는 auto 값을 가진다.
• 마진 병합 현상 주의
  
  

💡 마진 병합 현상

margin 영역을 다루다 보면 흔하게 겪는 일 중 하나가 바로 margin 겹침 현상이다. margin 겹침 현상은 인접한 margin-bottom과 margin-top에 속성을 적용할 경우 둘 중 더 큰 값으로 병합되는 것을 말한다.

마진 겹침 현상에는 형제간에 발생하는 마진 겹침 현상, 부모 자식간에 발생하는 마진 겹침 현상이 있다. 마진 겹침 현상은 상하에서만 일어나는 현상이다. Block 요소에서만 발생한다. 

🔑 [솔루션]

• position:absolut를 추가하면 부모 자식 간에 발생하는 마진 병합 현상이 사라지고 자식 박스만 아래로 움직인다.
  
• inline-block을 주면 사라진다. 이때 자식 요소에 존재하는 모든 마진 병합 현상이 사라지게 되므로 주의해야 한다. 부모 요소에만 주고 싶다면 overflow: hidden을 주면 된다.
• 부모 요소에 display: flex나 grid 적용

📦 box-sizing

• content 영역을 제어할 때 box-sizing 사용
  
  

content-box (기본값)

• border나 padding을 추가하면 요소의 너비나 높이에 추가가 되어 해당 box의 크기는 그만큼 커진다.
• 개발 과정에서 디자인을 어렵게 만들고, 예상 했던 레이아웃을 벗어난다.

border-box (기본으로 적용해서 사용한다.) ✔️

• border와 padding을 포함한 크기로 계산
• border나 padding을 추가해도 그만큼 더 커지지 않고 사용자가 지정한 너비와 높이 값에 포함된다. 그만큼 content는 줄어든다.

overflow: auto

• 박스를 벗어나는 콘텐츠 처리

margin vs padding 차이점

• padding은 content 영역에 포함되지만, margin은 포함 안된다.
  ➡️ 그래서 마우스 포인터 영역을 넓게 하고 싶다면 패딩을 준다.
• padding은 요소의 크기에 영향을 주지만, margin은 영향을 미치지 않는다.
• margin은 요소 바깥 여백 공간을 조정한다.
  ➡️ 요소 사이의 공간(간격)을 만들고, 조절한다.
• margin은 auto 적용 가능하지만, padding은 적용할 수 없다.
  ➡️ auto 값으로 가운데 중앙 정렬 가능하다.