[CSS] CSS 배경 관련 속성

배경 관련 속성 정리

CSS 기본 개념 및 속성 정리에서는 간단하게 배경색인 background-color 만 다뤘다.

자주 사용하는 배경 관련 속성을 조금 더 정리 해보려 한다.

배경 이미지

url('/imageUrl 혹은 이미지 파일 경로')이라는 문법으로 배경 이미지를 넣는다.

// 이미지 파일 경로
background-image: url('../../princess/mika.png');

배경의 위치

기본값은 left top(왼쪽 위)이고, 가운데 정렬을 하려면 아래처럼 center를 쓴다.

background-position: left top; // 왼쪽 위 (지정하지 않았을 때 기본값)
background-position: left;     // 왼쪽
background-position: right;    // 오른쪽
background-position: top;      // 위 
background-position: bottom;   // 아래
background-position: center;   // 가운데

배경의 반복

기본값은 repeat(반복)이고, no-repeat으로 하면 반복되지 않게 할 수 있다.

background-repeat: repeat;    // 반복하기 (지정하지 않았을 때 기본값)
background-repeat: no-repeat; // 반복 안 함

 

---

그라디언트

배경색에 시작 색상과 종료 색생을 지정하여 그라데이션을 만들어줄 수 있다.

// 기본 사용법
background-image: linear-gradient(#000000, #ffffff);
 
// 기본 방향의 각도는 180도이다. (위에서 아래로 내려오는 방향)
// 이 각도를 바꾸고 싶다면 맨 앞에다가 각도를 써준다. 각도의 단위는 deg이다.
background-image:
  linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
  
// 이미지에도 그라데이션을 줄 수 있다.
// 쉼표(,)로 구분하여 그라디언트, 이미지주소 순서로 입력한다.
background-image:
  linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)),
  url('../../princess/mika.png');

 

---

그림자

가로, 세로 위치, 흐린 정도(Blur), 퍼지는 정도(Spread), 색상의 순서로 쓴다.

/*
  가로: 5px
  세로: 10px
  흐린 정도(Blur): 15px
  퍼지는 정도(Spread): 8px
  색상: rgba(0, 0, 0, 0.6)
*/
box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);

 

---

불투명도

요소 전체의 불투명도를 조절할 때 사용한다.

0에서 1 사이의 소수 값으로 단위 없이 쓰며 rgba와 마찬가지로 0에 가까울수록 투명해진다.

opacity: 0;    // 투명
opacity: 0.6;
opacity: 1;    // 불투명