CSS 배경넣기, margin collapse effect 해결방법

 

1. 배경 CSS 속성

• background-size는 px, % 단위도 가능
• cover는 배경으로 전체적으로 짤리지 않게 하는 속성
• contain은 배경이 짤리지 않게 하는 속성
• background-attachment는 웹사이트가 스크롤될 때 배경이 동작하는 속성

.main-background {
  background-image : url(../img/shoes.jpg);
  background-size : cover;
  background-repeat : no-repeat;
  background-position : center;
  background-attachment : fixed;
}

 

 

2. 배경 2개 겹치기

.main-background {
  background-image : url(../img/shoes.jpg), url(person.jpg);
}

 

 

3. 배경에 검은색 틴트 효과 넣기

• linear-gradient 이건 색이 점진적으로 변하는 gradient를 줄 수 있는 키워드
  • 투명도 0.5의 검은색을 입힌 후에 배경겹치기에 사용

.main-background {
  background-image: linear-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0.5) ), url(이미지경로~~) ;
}

 

 

4. margin의 주의해야 할 점

• div 박스 안에 p 태그를 사용
• p 태그에 상단 margin을 주기 위해 margin-top을 주게 되면 div와 p가 동시에 margin-top이 생기게 됩니다

<div class="배경">
  <p>안에 글씨</p>
</div>

• 이러한 현상을  margin collapse effect 합니다.
•  박스들의 테두리가 만나면 margin 합쳐지는 현상
•  두 박스의 테두리가 겹치지 않도록 하면 해결이 됩니다.
  • padding 을 주는 방법
    • padding 만큼 박스의 크기가 커지게 만들기 때문에 디자인의 통일성에 변화가 생길수 있습니다.
  • display: inline-block  주는 방법
    • 부모 요소에만 주고 싶다면, overflow : hidden
  • 부모 요소에 display: flex, grid 주는 방법
    • 박스 레이아웃이 변동될 가능성이 있습니다.
  • 경계를 만드는 방법
    • 부모와 자식 사이의 상하 마진이 겹치는 경우에만 사용이 됩니다.