1. Box Model

📍 Box

• Box는 컨텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다.
  

📍 Box Sizing

box-sizing의 기본값은 content-box이다. 이때 박스의 너비와 높이는 컨텐츠 영역만을 대상으로 하여 값이 설정된다.
컨텐츠 영역뿐만 아니라 패딩, 테두리 영역까지 포함한 영역을 바탕으로 요소의 너비와 높이 값을 지정하고 싶을 땐 box-sizing: border-box 속성을 사용하면 된다.

* {
	box-sizing: border-box
}

위처럼 css 파일의 상위에 전체 요소들에 box-sizing 잡는 기준을 재설정하고 시작하기도 한다.

---

2. Display

📍 display : box 타입을 결정짓는 CSS 속성으로, layout 정의에 사용된다.

• 종류 : block, inline, inline-block, none
  
  

1. display: block

• "길막", 공간을 차지해서 다른 요소가 공간을 차지하지 못하게 한다.

• width, height, padding, border, margin 등의 속성을 사용할 수 있다.

• display 요소의 width를 선언하지 않은 경우, width 값은 부모의 content-box의 100%가 된다.
  

• display 요소의 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채운다.
  

  • margin: 0 auto; : 중앙정렬
    -> 빈 공간을 채운 margin을 왼쪽, 오른쪽 나눠 배치하겠다는 의미

    
    

• 부모의 height를 선언하지 않은 경우, 부모의 height 값은 자식요소의 height 합이 된다.
  

• block 요소 : div, h1~h6, p, ol, ul, li, table, form
  
  

---

2. display: inline

• 컨텐츠를 옆으로 흐르게 하는 "흐름"
  

• 흐름을 박살내는 속성들은 사용이 불가능하다. (위아래 관련 속성+ width, height)
  ➡️ width, height, padding-top, padding-bottom, border-top, border-bottom, margin-top, margin-bottom 사용 불가

• inline 요소 : span, a, strong, img, br, input, textarea, select, button
  
  

---

3. display: inline-block

• block의 장점 + inline의 장점
• 기본적으로 가로로 흐르면서 block처럼 영역을 잡을 수 있다.
  ➡️ width, height, padding-top,... 등 display: inline에서 사용할 수 없었던 속성들 사용가능