# 배경 레이아웃과 margin collapse



{% embed url="https://startbootstrap.com/previews/agency" %}

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FKO4TFMVWzixLtFOO0KPo%2FScreenshot_91.png?alt=media&#x26;token=a8896ed5-729e-4944-9014-4db793032d0e" alt=""><figcaption></figcaption></figure>

이번 시간엔 큰 배경이 있고 그 위에 버튼이나 메뉴가 있는 것 들을 만들어 봅시다.



새로운 layout2.html 파일 생성&#x20;

{% embed url="https://unsplash.com/ko" %}
고해상도 무료 이미지 찾는 사이트
{% endembed %}

```css
.main-background{
    width: 100%;
    height: 500px;
    background-image: url(../img1.png);
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
    background-attachment : fixed;
}
```

background-size는 px, % 단위도 가능하고

cover는 배경으로 꽉채워주세요

contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻입니다.



background-attachment는 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶으면 써보도록 합시다.



* 배경 두개 겹치기&#x20;

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



* margin collapse 현상

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

div 박스 안에 p 태그를 사용했습니다.

p 태그에 상단 margin을 주기 위해 margin-top을 주게 되면

div와 p가 동시에 margin-top이 생기게 됩니다. 뭔가 이상합니다.



이 현상은 margin collapse effect 라고 부르는 일종의 버그입니다.

원래 박스들의 테두리가 만나면 margin이 합쳐집니다.&#x20;

(박스가 내부에서 만나든 외부에서 만나든 상관없습니다.)

정확히 말하면

1\. 마진을 하나로 합쳐주고

2\. 혹여나 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용하게 됩니다.



그래서 두 박스의 테두리가 **겹치지 않도록** 해주시면 보다 더 정확한 마진 노가다를 하실 수 있습니다.&#x20;

강의 예제에선 부모 박스에 padding을 1px 이렇게 조금 주는 것으로 쉽게 해결 가능합니다.

불만이 있다면 웹표준을 관리하는 www.w3.org 이라는 단체에 따지도록 합시다. &#x20;





<pre class="language-html"><code class="lang-html">&#x3C;h4 class="main-title">
<strong>    Buy Our Shoes!
</strong>&#x3C;/h4>
</code></pre>

```css
.main-title {
    color: white;
    font-size: 40px;
    margin-top: 300px;
}
```

이런식으로 h4를 만들고 margin top에 margin-top 을 주게 되면&#x20;

![](https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Fz8CafK8Ckbp6zghRctVQ%2FScreenshot_93.png?alt=media\&token=736172bf-0161-46c0-b733-634c7c246aad)

이런식으로 두개가 겹쳐져서 내가 원하는 식으로 margin이 들어가지 않는다.

그래서 main-background 에 margin-top을 준 것처럼 동작한다.&#x20;

그래서 부모 div와 살짝 떨어트려준다.



✨ 과제. h4 밑에 텍스트상자와 버튼 하나씩 넣어서 디자인 해보기.





