CSS - 색상과 배경

color 정의 방법

16진수 표기법

• #ffff00처럼 #기호 다음에 6자리의 16진수로 표시
• 6자리는 앞부터 두자리씩 묶어 #RRGGBB형식으로 표현
  (검은색 #000000, 흰색 #ffffff)

rgb 와 rgba 표기법

color : rgb(255,255,255);
color : rgba(0,0,0,0.5);

• rgb(red 값, green 값, blue 값);
• rgba(red 값, green 값, blue 값, alpha 값);
• a(alpha)는 불투명도 값을 나타냄(opacity), 0부터 1까지 값 중에서 사용
• 1은 완전히 불투명한 것, 작아질수록 조금씩 투명해지다 0이 되면 완전히 투명

hsl 과 hsla 표기법

hsl(<hue(색상) 값>, <saturation(채도) 값>, <lightness(밝기) 값>);
hsl(<hue(색상) 값>, <saturation(채도) 값>, <lightness(밝기) 값>, <alpha 값>);

• #ffff00처럼 #기호 다음에 6자리의 16진수로 표시
• 6자리는 앞부터 두자리씩 묶어 #RRGGBB형식으로 표현
  (검은색 #000000, 흰색 #ffffff)

배경색 / 배경이미지

background-color

요소의 배경의 색을 지정

background-color: #00ff00;
background-color: rgb(0,255,0);
background-color: green;

background-image

요소의 배경 이미지를 한 개나 여러 개 지정

background-image: url("../../media/examples/lizard.png");

background-repeat

배경 이미지의 반복 방법을 지정, 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있다

background-repeat: repeat | repeat-x | repeat-y | no-repeat

• repeat : 가로와 세로로 반복 (기본값)
• repeat-x : 가로로 반복
• repeat-y : 세로로 반복
• no-repeat : 배경이미지를 한번만 표시하고 반복하지않음

background-position

배경 이미지가 표시되는 위치를 조절

background-position : <수평 위치> <수직 위치>;
background-position: 5px center;

background-origin

배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정

background-origin: border-box | padding-box | content-box

• border-box : 박스 모델의 가장 외곽인 테두리(border)까지 적용 (기본값)

• padding-box : 박스 모델의 테두리를 뺀 패딩(padding) 범위까지 적용

• content-box : 박스 모델에서 내용 부분에만 적용

background-size

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

background-size: auto | contain | cover | <크기 값> | <백분율>

• auto
  원래 배경 이미지 크기 그대로 표시 (기본값)
• contain
  요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소
• cover
  배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소
• 크기값
  너비 값과 높이 값을 지정
  너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정
• 백분율
  배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경 이미지를 확대하거나 축소