[CSS] 백그라운드 이미지 관련 몇 가지 지식

백그라운드 이미지 관련

• background-image: url()
  • image로 백그라운드 채우기
    • 배경 여러개 겹치는것도 가능함
      
      
• background-size: 100%; ⇒ 이미지 사이즈의 백프로로 채우기
  • background-size: cover; ⇒ div박스에 다 채우기
    • contain: 절대 배경이 짤리지 않도록 채우기
      
      
• background-repeat: no-repeat;
  • 이미지 사이즈가 백그라운드보다 작으면 이미지가 반복되는데, 반복 안되게 하기
    
    
• background-position: center;
  • 가운데부터 채우기
    
    
• background-attachment
  • 스크롤 시 어떻게 동작하게 할것인지 결정
    
    
• filter:
  • brightness(50%) → 밝기 조정

margin collapse 현상

• 부모자식의 테두리가 겹쳐있는 경우에는 마진이 하나로 합쳐져버림
  • 이 때는 겹치는 것 중 부모태그에 padding: 1px; 줘버리면 됨