CSS 3 (BOX 크기, 배치, 단위)

CSS BOX MODEL

• width 컨텐츠 영역 너비
• height 컨텐츠 영역 높이

---

border : 테두리 영역

border: width | style | color ;

• border-width

  • px (일반적으로 불변하므로 주로 절대단위 사용)

• border-color

• border-style

  • none
  • hidden
  • solid

• box-sizing

  • border-box 너비에 테두리 굵기를 포함

• border-radius 테두리 둥글게

---

padding : 테두리-컨텐츠 사이 공간

• 영역 지정
  • 1 value : whole sides
  • 2 values : vertical | horizontal
  • 4 values : top | right | bottom | left

---

margin : 테두리 바깥 공간

• 영역 지정

  • 1 value : whole sides
  • 2 values : vertical | horizontal
  • 4 values : top | right | bottom | left

• body 요소에 margine=0;이나 margin= 0 auto; 적용하는 것이 일반적

---

Display Property

inline

• 너비, 높이 옵션 무시
• padding / margine 옵션 가로만 적용 가능

block

• width, height, margin, padding 모두 적용 가능

inline-block

• 배치는 inline 법칙을 따르지만, 모든 옵션 적용 가능

none

• 공간을 차지하지만 보이지 않음

---

CSS units

relative

%

• width 기준 : 부모 요소 대비 비율
• line-height 기준 : 요소 자체 폰트 크기 대비 비율

em

• 부모 요소의 폰트 크기 대비 배율
• cons 기준에 따라 다른 크기가 적용돼 일관성을 해침

rem

• root HTML 요소의 폰트 크기 대비 배율

absolute

px