마크업/10월10일

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