패스트캠퍼스 챌린지 14일차 - Part1. Ch8

이번엔 css의 배경과 관련된 내용을 살펴보자!!

• background-color : 요소의 배경 색상을 지정하는 속성으로 기본값은 투명한 transparent이다.
• background-image : 요소의 배경 이미지 삽입 속성. url("경로") 와 같이 값을 넣어주면 된다.
• background-repeat : 요소의 배경 이미지 반복 속성으로 기본값은 바둑판식으로 반복하는 repeat이다. repeat-x는 이미지를 수평 반복, repeat-y는 이미지를 수직 반복, no-repeat는 반복 없는 값이다.
• background-position : 요소의 배경 이미지 위치 속성. top, bottom, left, right, center와 같이 방향으로 입력하거나 px, em, 등 단위로 지정하는 총 2가지의 방법이 있다.
• background-size : 요소의 배경 이미지 크기 속성. 기본값은 이미지의 실제 크기인 auto이다. 단위로 입력하거나, 비율을 유지하며 요소의 더 넓은 너비에 맞추는 cover와 요소의 더 짧은 너비에 맞추는 contain이 있다.

왼쪽이 cover, 오른쪽이 contain

 

• backgounrd-attachment : 요소의 배경 이미지 스크롤 특성. 기본값은 이미지가 요소를 따라서 같이 스크롤 하는 scroll 이다. fixed는 이미지가 뷰포트에 고정되어 스크롤을 할 수 없다. 말로 쓰면 조금 이해하기 어려운 것 같다..

scroll의 경우는 우리가 자주 보다시피 이미지가 배경에 고정되어있고 아래로 스크롤하면 그림도 화면과 함께 따라올라가 없어진다.

아래로 스크롤하면

이미지가 배경과 함께 딸려올라감

fixed의 경우는 이미지가 뷰포트에 고정되어있으므로 이미지의 위치는 달라지지 않고, 이미지의 보이는 부분만 달라진다고 생각하면 될 것 같다!

아래로 스크롤하면

이미지 위치는 그대로, 보이는 부분만 달라짐

---

 

14일..차..

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa