size와 element 위치를 도와주는 CSS의 general concept 이다

Height and Width

  • inline element의 default width 는 content
  • inline 아닌 element는 width, height properties에서 가져온다. (display)

Border

  • 어떤 element도 주위에 border를 가지고 있을 수 있다.
  • border property는 style, width, color를 명시
  • style은 1개만 명시되어야 한다
Border Style

Border width and color

  • Width
    • pixel, thin, medium, large
  • Color
    • Name – “blue”
    • RGB
    • hex
    • transparent
Specifying Individual Sides

Margin

  • 추가적인 border outside 공간 – 이웃사이
  • Positive margin
    • element right/down 움직임
  • Negative margin
    • element left/upward 움직임

Padding

  • element와 border 사이에 inside 공간
  • Positive padding
    • border가 element에서 outward로 움직임
  • Negative padding
    • border가 element 넘어서 움직임

Margin and Padding

  • 둘다 color를 가지고 있지 않다 (transparent)
  • border와 같이 1 ~ 4 value를 정의할 수 있다.
margin과 padding 설명
div{
    width: 100px;
    height: 50px;
    padding: 10px;
    margin: 5px;
    border: 1px solid black;
}

width = 132px, height = 82px가 된다.

Centering an Element

  • 수평으로 center는 margin: 0 auto;
  • display: block
  • not float
  • 절대적인 좌표나 fixed 를 가지면 안됨
  • auto가 아닌 width를 가져야함

box-sizing

  • 수학의 일부
  • options:
    • content-box: default additive
    • border-box: width는 content, padding, border를 고려

Mearsurements

  • Absolute – 특정한 size를 세팅
    • px, mm, cm…
  • Fluid – element 주위에 relative 사이즈 설정
    • %, vw, vh
    • em (for font): 1 em은 현재 크기, .75는 75%
    • rem (for font): 1 rem 은 root element의 현재 크기

Review

  • 디자인 스케치는 box model에 완료되어야 한다. (margin, border, padding, content)
  • 복잡성을 줄이는 box-model 사용
  • margin은 항상 고려해야 한다.

공부 위치 – https://www.coursera.org/learn/introcss/lecture/VDg21/02-01-box-model