background
1. background-color
- 배경색을 주고 싶을 때 사용
- hex, rgb, rgba로 색상 표현
2. background-image
- 배경으로 이미지를 넣고 싶을 때 사용
- url() : 괄호 안에 이미지 경로 작성
1. 상대 경로 입력
2. unsplash.com - 원하는 이미지 선택 -
copy image address 복붙
- ex) background-image : url(" 파일 경로")
3. background-repeat
- 배경 이미지의 반복 여부 결정
- repeat(기본값) / no-repeat(이미지 반복 X)
4. background-size
- 배경 이미지 크기 조절
- contain(요소 안에 이미지가 원래 비율로 전부 들어갈 수 있도록)
cover(요소 안에 빈 공간이 남기지 않고 꽉 차도록)
auto 80% 등 사용자가 조절 가능
5. background-position
- 배경 이미지의 위치 조절
- ex) background-position : 10px 30px; // 왼쪽에서 10px, 위에서 30px 안쪽으로 이동
- 주로 center center 사용
'TIL > CSS' 카테고리의 다른 글
| animation (0) | 2022.07.13 |
|---|---|
| transition (0) | 2022.07.13 |
| Typography (0) | 2022.07.06 |
| flexbox (0) | 2022.06.29 |
| Position (0) | 2022.06.15 |