마크업/10월10일

Difference between r1.1 and the current

@@ -1,4 +1,4 @@

~~마크업/10월10일의 내용을 써~~ * boxmodel: 요소의 margin, padding 등을 box 형식으로 나타낸 것

* boxmodel: 요소의 margin, padding 등을 box 형식으로 나타낸 것

* margin: 요소 주변에 만들어내는 공간
* padding: border 내부와 콘텐츠 사이에 만들어내는 공간

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%를 계산해 화면에서 빠져나가지 않음주세요