React/etc

CSS 속성 선언 순서

Jieunny 2021. 12. 26. 14:48
  • CSS 기술하는 순서
    • Position
      • position
      • z-index
      • top
      • bottom
      • left
      • right
      • transform
    • Layout
      • float
      • clear
    • Display
      • display
      • flex-direction
      • flex-wrap
      • justify-content
      • align-content
      • align-items
      • order
      • flex-grow
      • flex-shrink
      • flex-basis
      • align-self
    • Visibility
      • visibility
      • overflow
      • clip
    • Box model (밖에서 안으로 향하는 순서로 나열, border는 색상과 함꼐 선언하는 경우가 많으므로 Color에 포함)
      • box-sizing
      • width
      • min-width
      • max-width
      • height
      • min-height
      • max-height
      • margin
      • padding
    • Color
      • color
      • border
      • border-radius
      • background
      • box-shadow
      • opacity
    • Text
      • font
      • font-family
      • font-size
      • font-weight
      • font-style
      • font-size-adjust
      • line-height
      • letter-spacing
      • white-space
      • word-break
      • text-overflow
    • Animation
      • transition
      • animation
    • Others
      • cursor
      • outline
      • outline-width
      • outline-style
      • outline-color
      • outline-offset
    • Pseudo elements
      • :hover
      • :focus
      • :active
      • :first-child
      • :last-child
      • ::before
      • ::after