HTML & CSS 기초 - 배경 관련 CSS 속성들 margin 버그

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

background-size는 px, % 단위도 가능하고
cover는 배경으로 꽉채워주세요
contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻입니다.

background-repeat : no-repeat;을 설정해주는 이유는
배경설정을 하고 공간이 남을 경우 해당 이미지로 공간이 차는 부분까지만 채우게 되는데 이러한 반복을 막고자 함이다.

margin collapse 버그

두개의 div가 붙어있을 경우 마진이 서로 만나게 되는데
두개 이상의 마진이 겹치게 될 경우 정확히
1. 두개의 마진을 하나로 합치게 되고
2. 둘 중에 더 큰 마진을 적용하게 된다.

이러한 이유 때문에 박스를 설치할 때 서로의 마진이 겹치지 않도록 띄워주어야 한다. 두