[CSS] 배경 이미지
배경 이미지 삽입 (background-image)
background-image라는 속성에 url(...)이라는 문법으로 배경 이미지를 삽입한다. 배경 이미지는 여러개를 삽입할 수 있다.
배경의 위치 (background-position)
기본 값은 left top (왼쪽 위)이고 가운데 정렬을 하기 위해서는 center을 쓰면된다.
background-position : top;
background-position : right;
background-position : center;
배경의 반복 (background-repeat)
기본 값은 repeat이고, no-repeat으로 하면 반복되지 않게 할 수 있다.
배경의 크기 (background-size)
직접 가로 세로 크기를 지정할 수도 있고, 비율을 유지하면서 영역에 꽉 차게(cover)하거나, 영역 안에서 최대한 크게(contzin)할 수도 있다.
가로 세로 크기를 지정하는 것은 사진의 크기를 지정하는 것이지 배경 영역의 크기를 지정하는 것이 아니다.
1) 직접 가로 세로 크기를 지정하는 경우
2) 영역 안에서 최대한 크게 크기 설정하는 경우 (contain)
3) 비율을 유지하면서 영역 꽉 차게 설정하기 (cover)
그라디언트 (linear-gradient())
그라데이션을 설정하는 문법으로 기본적으로 시작 색상과 종료 색상으로 사용할 수 있다.
0.8 투명도의 흰색으로 시작하여 불투명한 흰색으로 그라데이션을 적용하겠다는 의미이다.
밑으로 갈수록 흰색으로 변하는 것을 확인할 수 있다.
기본 방향의 각도는 180도로 위에서 아래로 내려오는 방향이다. 하지만 앞에다 90deg와 같이 각도를 써주면 방향을 바꿀 수 있다. 90deg는 왼쪽에서 오른쪽으로 가는 방향이다.
두 색상 사이에 %를 두어, 첫번째 색상을 전체에서 어느정도 영향을 미치도록 할 것인지 지정해 줄 수 있다.
그림자 (box-shadow)
가로, 세로 위치, 흐린정도(blur), 퍼지는 정도(spread), 색상 순서로 쓴다.
불투명도 (opacity)
요소 전체의 불투명도를 조절할 때 사용하며 0에서 1 사이의 소수값으로 단위 없이 쓰면 된다.
결과
정리
