- boxmodel: 요소의 margin, padding 등을 box 형식으로 나타낸 것
- margin: 요소 주변에 만들어내는 공간
- padding: border 내부와 콘텐츠 사이에 만들어내는 공간
- display 속성
- block: 한 줄에 한 요소만이 들어갈 수 있음
- margin, padding, height, width 등 모두 적용 가능
- inline: 한 줄에 여러 요소가 들어갈 수 있음
- margin, padding이 적용되긴 하나 요상하게 적용됨
- inline-block: inline의 흐름을 따르되 block처럼 취급
- none: 해당 요소가 없는 것 처럼 취급
- cf) visibility: hidden은 공간을 차지하되 보여주지 않는다.
- inline 내부에 block이 올 수 없음
- 예외: p 내부의 block요소(문단 내에 문단이 올 수 없음), a 내부의 a 등
- width
- 100% 입력과 auto 입력이 다름
- 100%: padding 등의 입력으로 요소가 커졌을 때 100%에 더해 요소가 삐져나옴
- auto: 요소가 커졌을 때 더한 뒤 100%를 계산해 화면에서 빠져나가지 않음주세요
