배경 레이아웃과 margin collapse

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

새로운 layout2.html 파일 생성

.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는 웹사이트가 스크롤될 때 배경이 신기하게 동작하게 만들고 싶으면 써보도록 합시다.

배경 두개 겹치기

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

margin collapse 현상

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

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

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

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

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

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

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

정확히 말하면

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

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

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

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

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

<h4 class="main-title">
    Buy Our Shoes!
</h4>

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

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

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

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

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

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

PreviousCSS Selector NextPosition과 좌표 레이아웃

Last updated 9 months ago

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