background-image 관련속성

css 진짜 하기싫은데... 그래도 가장 티나는거라 조금씩이라도 해놔야될듯...

 

• background-image: url (~~) , url( ~~) 하면 두개도 넣을 수 있음
• background-size - contain / cover 주로 두개 많이쓰는데

contain은 말그대로 포함하는 것 , 원본 사진 크기 상관없이 내가 div 설정해놓은 것 안에 사진이 다 들어가게 해줌 - 배경 안짤리게 할 때

cover는 덮는 거 , 짤려도 상관없이 지정해놓은 div안을 꽉 채워주는 느낌

 

 

• background-position - 말그대로 이미지의 위치를 지정해줌 . right center left도 되고 %로 나타낼수도 있음
• cover로 설정을 해놓으면 어차피 꽉차니까 위치가 변하지는 않지만 , 크기를 줄였다 늘렸을 때 이미지가 한쪽으로 치우쳐지게 됨. 이럴 때 center로 해놓으면 줄여도 사진 정렬이 딱 가운데에 있음 ( 나중에 반응형 더 공부한다음에 봐야될듯 )

 

• background-repeat

background 속성은 만약에 사진이 들어가고도 공간이 남는다? 그러면  사진이 반복돼서 들어감. 이거 싫으면 no-repeat 설정해주면 됨

• background-attachment - 배경이미지를 어떻게 고정할건지 ? scroll, fixed

 scroll은 기본값 - 배경이미지가 스크롤시 페이지와 함께 스크롤 처리

fixed - 스크롤을 올리거나 내려도 사진은 그 자리 그대로 고정되어있음 

사진 위에 글같은거 쓸 때 티남

 

•  margin-collapse 현상

- 간단하게 말하면 박스들이 테두리가 붙게 되면 1 박스 2박스가 있을 때 2 박스에 margin을 주면 1 박스에 마진이 생김 

- 해결방법은 두 박스가 안 겹치게 하면 됨. 1 박스에 padding을 주면 두개가 겹치지 않기 때문에 2 박스에 margin 정상적으로 됨

- 윗부분에서 붙던 아래부분에서 붙던 똑같이 발생함