CSS 색상 & 배경 정리

Flex·2022년 2월 20일

HTML/CSS/JS

CSS 모음

목록 보기

7/14

CSS 색상과 배경에 관한 내용들을 정리해보았다.

🎨 color

color : 글씨와 글씨 장식(밑줄, 윗줄, 취소선 등) 색을 지정한다.

크게 세가지 방법으로 정의할 수 있다.

키워드 사용 (blue, transparent 등)
RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 rgb(), rgba()의 함수형 표기법)
HSL 실린더형 좌표계 사용 (hsl(), hsla()의 함수형 표기법)

16진수(HEX) 표기법 : # + 0~9 + A~F 의 형식으로 표현하는 방법이다.
색상 값은 6자리이며, 앞에서부터 두자리씩 Red, Green, Blue 를 뜻한다.
RGB 표기법 : 0~255 의 세가지 숫자로 표현하는 방법이다.
CSS에서 RGB 표기법으로 사용하려면 rgb() 함수형 표기법을 사용한다.
rgba() 표기법 : rgb() 표기법에 투명도를 추가하여 지정한다.
마지막에 0~1 까지의 투명도 값을 추가한다.
ex) 0.2 = 20%, 0.8 = 80%

Example

div {
  color: limegreen;
  background-color: rgba(170, 223, 207, 0.9);
}

🦊 MDN Link - color

🎨 opacity

opacity : 요소의 불투명도를 설정한다.

불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대이다.
기본값은 1 / 100% 이다.
0.0 ~ 1.0 의 숫자 / 0% ~ 100% 의 백분율 의 값을 가질 수 있다.
불투명도 설정 시 내부 콘텐츠까지 함께 반영된다.

Q) rgba() 의 a 와 opacity 는 뭐가 다른가요? 🤔

A) rgba() 의 a 는 해당 속성을 가진 요소에만 적용되는 반면,
opacity 는 내부의 요소 전체를 포함하여 적용이 된다는 점이 다릅니다!

🦊 MDN Link - opacity

🎨 background-color & background-image

background-color : 요소의 배경색을 지정한다.
background-image : 요소의 배경 이미지를 한 개나 여러 개 지정한다.

color 는 image 뒤에 렌더링 된다.
--> z-index 관점에서 image 가 더 우선순위(큰 값) 를 가진다.
이미지는 background-image: url("...") 처럼 url() 함수 표기법으로 넣는다.
여러 개의 이미지를 넣을 때는 ,(쉼표) 로 구분한다.
이미지에 투명한 부분이 존재하면 해당 부분은 background-color 로 채워진다.

🦊 MDN Link - background-color

🦊 MDN Link - background-image

🎨 background-repeat

background-repeat : 배경 이미지의 반복 방법을 지정한다.

가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있다.
repeat : 요소의 배경 영역을 채울 때까지 이미지를 반복한다. 마지막 반복 이미지가 넘칠 경우 잘라낸다.
repeat-x | repeat-y : 각각 가로축, 세로축 반복이다.
--> 일반 repeat 은 둘을 합한 스타일로 표현된다.
no-repeat : 이미지를 반복하지 않는다. 따라서 배경 이미지 영역이 다 차지 않을 수 있다.

🦊 MDN Link - background-repeat

🎨 background-position

background-position : 배경 이미지의 위치를 설정한다.

초기값은 왼쪽 상단이다.
background-position: x축값 y축값; 형식으로 선언해준다.
top, bottom, left, right, center 의 키워드값도 존재한다.
--> 키워드값으로 작성하면 순서에 상관없이 적용된다.
ex) top center = center top

🦊 MDN Link - background-position

🎨 background-origin

background-origin : 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정한다.

border-box : 배경을 테두리 박스에 상대적으로 배치한다.
padding-box : 배경을 안쪽 여백(padding) 박스에 상대적으로 배치한다.
content-box : 배경을 콘텐츠(content) 박스에 상대적으로 배치한다.
원점의 기준을 정해주는 것이라고 생각하자!
--> margin 은 외부 영역이기 때문에 기준점에 포함하지 않는다.

🦊 MDN Link - background-origin

🎨 background-size

background-size : 요소 배경 이미지의 크기를 설정한다.
그대로 두거나 / 늘리고 줄이거나 / 공간에 맞출 수 있다.

디폴트값은 auto 이다. --> 이미지의 원본 크기를 가진다.
키워드값 혹은 지정값을 넣을 수 있다.
지정값은 background-size: 가로값 세로값; 형식으로 선언해준다.

키워드값 두가지

contain : 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정한다.

cover : 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정한다.

✅ 두가지 모두 이미지의 비율을 유지하며 요소의 크기에 맞춰진다.

🦊 MDN Link - background-size

🎨 background (단축 속성)

background : 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정한다.

Example

/* <background-color> 사용 */
background: limegreen;

/* <bg-image>와 <repeat-style> 사용 */
background: url("image.jpg") repeat-y;

/* <box>와 <background-color> 사용 */
background: border-box red;

/* 단일 이미지, 중앙 배치 및 크기 조절(80%) */
background: no-repeat center/80% url("../img/image.png");

속성의 값들은 spacing(여백) 으로 구분한다.
<background-color> 값은 마지막 레이어만 가질 수 있다.
<bg-size> 값은 <position> 바로 뒤에만 위치할 수 있으며 / 문자로 구분해야 한다.
--> position/size 의 순서.
ex) center/80%
따로 지정하지 않은 속성은 자동으로 기본값(initial) 을 가진다.