U E D R , A S I H C RSS

마크업/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%를 계산해 화면에서 빠져나가지 않음주세요
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:29:25
Processing time 0.0124 sec