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 width and color
- Width
- pixel, thin, medium, large
- Color
- Name – “blue”
- RGB
- hex
- transparent

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를 정의할 수 있다.

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
Leave A Comment