[CSS] 색상과 배경을 위한 스타일

1. 웹에서 색상 표현하기

rgb와 rgba 표기법

 rgb(red 값, green 값, blue 값);

 rgba(red 값, green 값, blue 값, alpha 값);

 

hsl과 hsla 표기법

 hsl(<hue 값>, <saturation 값>, <lightness 값>);

 hsla(<hue 값>, <saturation 값>, <lightness 값>, <alpha 값>)

 

색상 이름 표기법

 모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(web-safe-color)라고 한다.

 16가지 기본 색상인 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,   yellow 를 포함해 216가지가 있다.

 

2. 배경 색과 배경 이미지

background-color 속성 - 배경 색 지정하기

 background-color : <색상>

 

background-clip 속성 - 배경 적용 범위 조절하기

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

속성 값	설명
border-box	박스 모델의 가장 외곽인 테두리(border)까지 적용
padding-box	박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용
content-box	박스 모델에서 내용 부분에만 적용

background-image 속성 - 웹 요소에 배경 이미지 넣기

 background-image : url(파일 경로)

 

background-repeat 속성 - 배경 이미지 반복 방법 지정하기

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

속성 값	설명
repeat	브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복
repeat-x	브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복
repeat-y	브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복
no-repeat	배경 이미지를 한 번만 표시하고 반복하지 않음

background-size 속성 - 배경 이미지 크기 조절하기

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

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

background-position 속성 - 배경 이미지 위치 조절하기

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

 수평 위치 : left | center | right | <백분율> | <길이 값>

 수직 위치 : top | center | bottom | <백분율> | <길이 값>

 

background-origin 속성 - 배경 이미지 배치할 기준 조절하기

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

속성 값	설명
border-box	박스 모델의 가장 외곽인 테두리(border)가 기준
padding-box	박스 모델에서 테두리를 뺀 패딩(padding)이 기준
content-box	박스 모델에서 내용 부분이 기준

 

background-attachment 속성 - 배경 이미지 고정하기

 background-attachment : scroll | fixed

속성 값	설명
scroll	화면 스크롤과 함께 배경 이미지도 스크롤됨 (기본 값)
fixed	화면이 스크롤되더라도 배경 이미지 고정

background 속성 - 속성 하나로 배경 이미지 제어하기

 background : url('image.jpg') no-repeat fixed right bottom;

속성	속성 값
background-image	url(image.jpg)
background-repeat	no-repeat
background-attachment	fixed
background-position	right bottom
background-clip	border-box
background-origin	padding-box
background-size	auto