[🦁FE DAY8(2)] CSS Box Model-박스의 구성과 유형

HTML 요소들은 모두 안에 박스들을 가지고 있다.
따라서 우리가 보는 사이트의 UI들은 모두 박스로 이루어져있다!

1. 박스의 구성

• content box
  : 요소의 콘텐츠가 되는 영역. width, height로 크기 조절이 가능하다.
• padding box
  : 콘텐츠와 테두리 사이의 공간. <padding>과 관련 속성으로 크기 조절이 가능하다.
• border box
  : 콘텐츠와 패딩을 둘러싸는 테두리. <boder>와 관련 속성으로 크기와 스타일을 지정할 수 있다.
• margin box
  : 보더 바깥 쪽 영역으로 요소와 요소 사이의 공백. <margin>과 관련 속성으로 크기조절이 가능하다.

(이미지 출처: 제주코딩베이스캠프)

2. 박스의 유형

1. 블록 박스

   • 사용 가능한 공간을 양 옆으로 100% 사용한다.
     (사용하지 않은 공간은 margin으로 채움)
     

   • width, height로 크기조절을 할 수 있다.

   • padding, margin, border로 박스 스타일을 컨트롤할 수 있고, 해당 속성이 적용되면 다른 요소들을 밀어냄.
     
     ↑ h1에 margin을 상하좌우 50px씩 주었는데 밑에 있는 p 영역을 침범하지 않고 밀어낸다.

2. 인라인 박스

   • 인라인 박스는 컨텐츠 크기만큼의 크기만 가지기 때문에 한 줄에 여러 인라인박스가 올 수 있다.
     

   • width, height로 크기조절을 할 수 없다.

   • padding, border -> 사용 가능
     margin -> 좌우만 사용가능 (상하는 x)
     해당 속성들의 '상하' 값은 다른 요소들을 밀어내지 않는다.
     
     ↑ span에 padding을 상하좌우로 50px씩 주었는데 밑에 있는 요소의 영역을 침범했다 (밀어내지 않음). 여기서 주의할 점은 상하로는 다른 요소의 영역을 밀어내지 않고 침범하지만 좌우로는 다른 요소의 영역을 침범하지 않고 밀어낸다.

2.1 display 속성

display속성으로 박스의 성질을 지정할 수 있다.
크게 외부 디스플레이 타입과 내부 디스플레이 타입으로 나뉜다.

1. 외부 디스플레이 타입
   : 외부의 다른 박스들과의 배치에 영향을 미친다.

   • 'inline'으로 박스의 유형 지정하기

   div { display: inline }

   • 'block'으로 박스의 유형 지정하기

   div { display: block }

   • 'inline-block'으로 박스의 유형 지정하기

   div { display: inline-block }

   inline-block
   : inline과 block의 특징을 동시에 가지고 있는 박스 유형

   • inline 처럼 한 줄에 여러 요소가 올 수 있다.
   • block 처럼 width, height, margin, padding 등 모든 값을 지정할 수 있다. 또한, padding, margin 속성이 적용되면 다른 요소의 영역을 침범하지 않고 밀어낸다.

   (이미지 출처: 위니브)

2. 내부 디스플레이 타입

   • flex: 내부 자식 요소들의 위치를 부모 요소안에서 x축 또는 y축으로 배치하는 속성이다.
   • grid: 내부 자식 요소들의 위치를 부모 요소안에서 x축과 y축을 이용해 배치하는 속성이다.