이번엔 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이 있다.
- backgounrd-attachment : 요소의 배경 이미지 스크롤 특성. 기본값은 이미지가 요소를 따라서 같이 스크롤 하는 scroll 이다. fixed는 이미지가 뷰포트에 고정되어 스크롤을 할 수 없다. 말로 쓰면 조금 이해하기 어려운 것 같다..
scroll의 경우는 우리가 자주 보다시피 이미지가 배경에 고정되어있고 아래로 스크롤하면 그림도 화면과 함께 따라올라가 없어진다.
fixed의 경우는 이미지가 뷰포트에 고정되어있으므로 이미지의 위치는 달라지지 않고, 이미지의 보이는 부분만 달라진다고 생각하면 될 것 같다!
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
패스트캠퍼스 챌린지 15일차 - Part1. Ch8 (0) | 2021.11.15 |
---|---|
Java & SpringBoot로 시작하는 웹프로그래밍 : 자바 인강 - Ch.1 (0) | 2021.11.14 |
패스트캠퍼스 챌린지 13일차 - Part1. Ch8 (0) | 2021.11.13 |
패스트캠퍼스 챌린지 12일차 - Part1. Ch8 (0) | 2021.11.12 |
패스트캠퍼스 챌린지 11일차 - Part1. Ch8 (0) | 2021.11.11 |