CSS - 색상과 배경

조성주·2023년 2월 11일

목록 보기

12/14

✅색상과 배경

css로 요소의 내용의 색상과 배경을 변경할 수 있다.

1. 색상 - HEX(16진수), rgb, rgba

color : 키워드 사용 또는 rgb, hex, rgb 3차원 좌표계 

color : red;
color : #ffffff;
color : rgb(12, 123, 123);
color : rgba(12, 123, 123, 0.2);

1) 16진수(HEX) : 16진수로 색상을 표현한다.

#00FF4F  // 두개씩 잘라서 00은 R, FF는 G, 4F는 B이다.

00은 채도가 제일 어두운
FF는 채도가 제일 밝은

2) rgb

rgb범위 : rgb(0, 0, 0) ~ rgb(255, 255, 255)

3) rgba

rgb와 사용법은 거의 동일하지만 마지막에 불투명도를 설정할 수 있다.
rgba(124, 123, 122, 0.3)

opacity

불투명도를 설정한다. 기본값은 1이다.
opacity는 모든 곳에 영향을주지만 자식 요소가 상속하지는 않는다.
자식 요소도 불투명하게 유지하고 싶으면 background 속성을 사용하면 된다.

background: rgba(0, 0, 0, 0.4);

2. background-color, background-image

background-color

요소의 배경색을 입힌다.

background-image

배경에 이미지를 넣는다.

background-image를 사용하면 해당 이미지를 다음과 같은 속성들로 제어할 수 있다.

1) background-repeat-x

배경이미지의 x축 반복을 설정한다.

2) background-repeat-y

배경이미지의 y축 반복을 설정한다.

3) background-repeat

배경이미지의 반복을 설정한다.
background-repeat-x 와 background-repeat-y의 단축속성이다.

background-repeat : no-repeat;

4) background-position

배경이미지의 위치를 설정한다.
background-position-x와 background-position-y의 단축속성이다.

// 배경이미지의 x축 위치를 지정한다.
background-position-x : 20px 또는 20% 또는 left

// 배경이미지의 y축 위치를 지정한다.
background-position-y : 20px 또는 20% 또는 left

// 배경이미지의 x축 y축을 한번에 지정한다.![](https://velog.velcdn.com/images/tjdwn9753/post/f3bdf387-d75c-4991-a5ec-ee29efd679a3/image.png)

background-position : 20px 50%;

// 키워드 하나만 적용하면 x축, y축 둘 다 center로 적용된다.
background-position : center;

3. background-origin

배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정한다.
초기값은 padding-box이다.

content-box로 하면 content-box에 왼쪽 위가 원점이 된다.
border-box로 하면 border-box에 왼쪽 위가 원점이 된다.

margin은 외부영역이기 때문에 불가능하다.

4. background-size

background-size

배경 이미지의 크기를 설정한다.

background-size : cover // 꽉 채우는데 빈 공간이 생기지 않게 한다.
background-size : contain // 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정한다.

contain / cover : 이미지의 비율을 유지하며 요소의 크기에 맞춰진다.