배경 예쁘게 넣는 스킬들 & margin collapse

배경관련 CSS 속성들

.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-attachment는 웹 사이트가 스크롤 할 때 배경이 신기하게 동작하게 만들고 싶다면 써보자.

배경 두개 겹치기

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

콤마로 또 다른 이미지를 첨부하고 싶으면 쓰자. 투명도를 요구하는 png 이미지를 사용하면 더 재밌게 만들 수 있을지도.

배경에 검은색 틴트 주기

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

filter를 쓸 수도 있지만 그것은 배경 안에 글씨까지 전부 변하기에 배경만 바꾸고 싶으면 저런 식으로 써보자.

margin collapse

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

div 박스 안에 p 태그가 들어있다. p 태그 상단에 margin을 주기 위해 maring-top을 이용하면 div, p 태그 모두 margin-top이 적용이 된다. 왜 이럴까?

이러한 현상은 margin collapse effect라고 부르는 일종의 버그로써 원래 박스들의 테두리가 만나면 margin이 합쳐지게 된다. (박스가 내부에서 만나든, 외부에서 만나든 상관 없음)
정확히 말하면
1. 마진을 하나로 합쳐주고
2. 혹여나 둘 다 마진이 있다면 더 큰 마진을 하나만 적용한다.

따라서, 두 박스의 테두리가 겹치지 않도록 해주면 더 정확한 마진 노가다를 할 수 있다. 쉽게 부모 박스에 padding에 1px 이렇게 주는 것으로도 쉽게 해결이 가능하다.