CSS 3번째 - 색상/배경 스타일

색상을 표현하는 방법

 .16진수, #RRGGBB, 00~ff 순으로 색상 양 표시 

 .rgb/rgba, rgb(R,G,B,a), RGB는 0~255 표시, a는 투명도 값으로 0(투명)~1(불투명)

 .hsl/hsla, hsla(<hsl>, <saturaton>, <lightness>, <alpha>);

 .색상 이름 표기법, red/yellow/black, web-safe color

 .색상 추출 사이트, ColorPicker (www.colorpicker.com)

 

배경 스타일

 

background-color 속성 - 배경 색 지정

 .background-color:<색상>;

 

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

 .background-clip : border-box (테두리까지) | padding-box (패딩영역) | content-box (내용 부분)

 

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

 .background-image : url(파일경로);

 .jpg/gif/png 파일 사용 

 .웹문서 기준 상대 경로나 http:// 절대 경로 사용 가능

 .여러 개 이미지 사용 시 첫 번째 이미지부터 순서대로 표시

 .채우는 요소보다 크기가 작은 이미지의 경우 가로와 세로 반복

 

background-repeat 속성 - 이미지 반복 방법 지정

 .repeat : 가득 찰 때까지 이미지를 가로, 세로 반복

 .repeat-x/y : 한쪽 방향으로만 반복

 .no-repeat : 배경이미지 한번 만 표시

 

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

 .auto : 원래 이미지 크기만큼 표시

 .contain : 요소안에 들어오도록 확대/축소

 .cover : 이미지로 요소를 모두 덮도록 이미지를 확대/축소(짤릴 수 있음)

 .<크기 값> : 너비와 높이 값 지정, 너비만 지정 시 비율 자동 계산하여 높이 지정

 .<백분율> : 요소의 크기 기준으로 백분율 값 지정하여 확대/축소

 

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

 .background-position : <수평><수직> ; 

 .수평 - left | center | right | <백분율> | < 길이 값> 

 .수직 - top | center | bottom | <백분율> | <길이 값>

 .하나만 지정시 수평 값으로 간주, 수직은 center 로 인식 

 .백분율(%), 길이(px) 는 왼쪽 모서리에 맞춰 시작 

 

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

 .border-box | padding-box | content-box

 

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

 .scroll(기본 값) | fixed

 

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

 

gradation과 브라우저 접두사

 .-webkit- : 사파리5.1~6.0

 .-moz- : 파이어폭스 3.6~15

 .-0- : 오페라 11.1~12.0

 

선형 gradation

 .liner-gradient( <각도> | <방향>, color-stop, [color-stop,...]);

 .방향 - to top | to left | to right | to bottom

 .-webkit- : gradation 시작 위치 기준

 .-mox- : gradation 끝 위치 기준, to 사용 안함

 .-o- : gradation 끝 위치 기준, to 사용 안함

 .각도 - 'deg' 표기, 시계 방향으로 북쪽부터 0도 

 .color-stop : 색상과 위치 (#000, white 30%, #000)

 

원형 gradation

 .radial-gradient(<최종 모양> <크기> at <위치>, color-start, [color-stop...]

 .모양 : circle | ellipse(기본 값)

 .위치 : <수평>, <수직> | 30% 20%, 기본값은 center

 .크기 : closest-side (가장 가까운 요소의 모서리) | closest-corner | farthest-side | farthest-corner(기본 값)

 

gradation 반복

 .repeating-linear-gradient

 .repeating-radial-gradient