21.Dec.16 CSS // 배경관련함수 및 Margin Collapse
배경 관련 함수 및 사진 필터 함수
background-image: url(../img/shoes.jpg);
✔️../ 의 의미는 상위 폴더로 이동하라는 의미임 현재 이 css파일이 css폴더에 있으므로, css폴더의 상위 폴더인 html로 이동해서 img폴더로 경로가 이동되는 것임
background-size: 100%;
✔️내 상위 바디 태그의 100%로 설정해줘라 라는 의미 즉 화면에 크기에 따라 크기가 변함 다만 이럴경우, 화면의 크기가 작아질때 그림이 반복되는 경우가 있는데 그런경우는 no-repeat을 통해 막아줄 수 있다.
✔️추가: background-size: cover--> 배경 짤려도 상관없으니, 사이즈를 줄이고 늘리더라도 빈공간(여백)없이 배경으로 해당 div를 꽉채워라 라는 명령어
background-size: cover
✔️여백이 생겨도 괜찮으니 배경 짤리게 하지 말아줘
background-position: center;
✔️배경 위치 조정 가능
background-attachment: fixed;
✔️scroll이 될 때 배경 위치 조정 가능
background-repeat: no-repeat;
✔️사이즈가 커지거나 작아져서 사진여백이 생길때, 자동으로 사진이 반복되는걸 막아줌.
filter: brightness(70%);
✔️박스에 보정(필터) 입히기, 보면 contrast sepia 등등 많은 수식이 있다.
Margin Collapse
<h4> 태그에 margin을 줬는데, 오히려
<div clas="main-background"> ←여기에 margin이 붙어서 내려감
<h4 class="main-title">Buy Our Shoes!</h4>
그 이유는 약간의 버그인데, <div> 박스와 <h4> 박스가 겹쳐있는 상태임. → 이럴경우 margin도 합쳐짐. 이것이 Margin collapse 현상이다.
✔️해결책 : div 박스에 padding 1px 정도 넣어서 안겹치게만 해주면 바로 작동함
