사진 배경에 내용을 넣을 수 있다.
css에서 사진을 넣는다
.main-background { background-image : url(../img/none.jpg)}
한 장의 사진을 넣는 방법이며 (.../폴더/사진이름) ...은 상위폴더로의 이동이다. 같은 폴더에서는 .main-background { background-image : url(shoes.jpg)} 이미지의 이름만 입력 하면 된다.
배경 사진을 두장 겹칠 수 도 있다.
.main-background { background-image : url(../img/none.jpg), url(none2.jpg); } ,콤마로 이미지 두개를 첨부하면 된다.
배경관련 css 속성
.main-background {
background-image : url(../img/shoes.jpg);
background-size : cover;
background-repeat : no-repeat;
background-position : center;
background-attachment : fixed;
}
cover는 배경으로 꽉 채우기, cotain은 배경이 짤리기 않게 꽉 채우기
주의해야할 margin 버그
<div class="배경">
<p>안에 글씨</p>
</div>
p태그 상단에 margin을 주기 위해 margin-top를 주게 되면
div와 p가 동에서 margin-top이 생기게 된다
이 현상이 margin collpse effect라는 버그이다.
박스들은 테두리가 만나면 margin이 합쳐진다.박스가 내부, 외부 상과이 합쳐진다.
마진을 하나로 합치고, 혹여나 둘 다 마진이 있으면 더 큰 마진을 적용하게 된다.
해결책으로는 두 박스가 겹쳐지지 않게 하던가 부모 박스에 padding을 1px 주는 것으로 해결 가능
