배경 레이아웃과 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 밑에 텍스트상자와 버튼 하나씩 넣어서 디자인 해보기.
Last updated