CSS_background, 마진상쇄

▶️ background 속성들

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

cover는 배경으로 꽉 채워달라는 뜻, contain은 배경이 잘리지 않도록 꽉 채우라는 뜻이다. background attachment는 웹사이트가 스크롤될 때 배경이 신기하게 동작하도록 하고 싶으면 써보자.

---

▶️ 배경겹치기 잡다한 팁

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

linear-gradient 이건 색이 점진적으로 변하는 gradient를 줄 수 있는 키워드인데 여기에 투명도 0.5의 검은색을 입힌 후에 배경겹치기를 해주면 된다.

---

▶️ 마진상쇄

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

• 여기서 p 태그에 margin-top을 부여하면 div와 p가 동시에 margin-top이 생기게 된다. 이는 마진상쇄라는 일종의 버그이다.
• 마진상쇄가 일어나면 마진을 하나로 합치고, 두개 마진이 겹칠 경우 더 큰 마진을 하나만 적용한다.
• 테두리가 겹치지 않도록 해주면 정확한 마진 노가다를 할 수 있다. 예를 들면 부모박스에 padding을 1px 주는 것도 방법 중 하나이다.

---