색상과 배경을 위한 스타일

웹에서 색상 표현하기

1. 16진수 표기법 #ffff00처럼 # 기호 다음에 6자리의 16진수로 표기하는 것으로 가장 기본적인 방법이다. #RRGGBB 형식으로 표시한다. 입력 가능한 값은 #000000(검정색)~#ffffff(흰색)까지이다.

2. rgb와 rgba 표기법 16진수가 아닌 십진수로 표현한다. rgb(red값, green값, blue값), rgba(red값, green값, blue값, alpha 값(불투명도0~1)) 입력가능한 값은 0~255까지이다.

3. hsl과 hsla 표기법 hsl(hue(색상), saturation(채도), lightness(밝기)), hsla(hue(색상), saturation(채도), lightness(밝기), alpha)

4. 색상 이름 표기법

색상 추출 사이트 Color Picker 참조

배경 색과 배경이미지

• background-color : 배경 색 지정

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

  background-color값은 상속되지 않는다.

• background-clip : 배경 적용 범위 조절

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

  박스 모델의 가장 외각 테두리(border-box), 테두리를 뺀 패딩(padding-box), 내용부분에만(content-box) 등 박스 모델관점에서 배경 적용 범위를 조절 할 수 있다.

• background-image : 웹 요소에 배경 이미지 넣기

  background-image: url(파일경로)

• background-repeat : 배경 이미지 반복 방법 지정

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

  repeat가 default값으로 화면에 가득찰 때까지 가로와 세로로 반복하며, -x와 -y는 각각 가로, 세로로 반복한다.

• background-size : 배경 이미지 크기 조절

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

  • auto : 원래 배경 이미지 크기만큼

  • contain : 배경 이미지의 너비/높이 비율을 유지하면서 확대/축소하는데 너비나 높이가 짧은 부분에 맞춤.

  • cover : 배경 이미지의 너비/높이 비율을 유지하면서 확대/축소하는데 너비나 높이가 긴 부분에 맞춤.

  • <크기 값> : 너비 값과 높이 값을 지정

  • <백분율> : 원래 배경 이미지를 기준으로 확대, 축소

• background-position : 배경 이미지 위치 조절

  background-position: <수평위치> <수직위치>;
  수평위치 : left | center | right | <백분율> | <길이 값>
  수직위치 : top | center | bottom | <백분율> | <길이 값>

• background-origin : 배경 이미지 배치할 기준 조절

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

  박스 모델의 가장 외각 테두리(border-box), 테두리를 뺀 패딩(padding-box), 내용부분에만(content-box) 등 박스 모델관점에서 배경 적용 범위를 조절 할 수 있다.

• background-attachment : 배경 이미지 고정

  background-attachment: scroll | fixed

  scroll은 배경 이미지도 스크롤 되며, fixed는 이미지가 고정된다.

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

그라데이션 효과로 배경 꾸미기

접두사	브라우저 버전	선형 위치 속성
-webkit-	사파리 5.1 ~ 6.0	그라데이션 시작 위치 기준
-moz-	파이어폭스 3.6 ~ 15	그라데이션 끝 위치 기준, 키워드 to 사용하지않음
-o-	오페라 11.1 ~ 12.0	그라데이션 끝 위치 기준, 키워드 to 사용하지않음

선형 그라데이션

linear-gradient(<각도> to <방향> , color-stop, [color-stop,...])

방향 속성 값	설명
to top	아래에서 위로
to left	오른쪽에서 왼쪽으로
to right	왼쪽에서 오른쪽으로
to bottom	위에서 아래로

• 각도는 deg로 표시한다. 270deg 이런식으로 표시.

#방향
background: -webkit-linear-gradient(left top, blue, white);
background: -moz-linear-gradient(right bottom, blue, white);
background: -o-linear-gradient(right bottom, blue, white);
background: linear-gradient(to right bottom, blue, white);
#각도
background: -webkit-linear-gradient(45deg, #ff0000, #ffffff;
background: -moz-linear-gradient(45deg, #ff0000, #ffffff);
background: -o-linear-gradient(45deg, #ff0000, #ffffff);
background: linear-gradient(45deg, #ff0000, #ffffff);
# 색상 중지 점(시작색상, 중지 점 색상과 위치, 끝색상)
background: linear-gradient(to bottom, #06f, white 30%, #06f);

원형 그라데이션

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

• 모양(circle, ellipse)

• 위치(원의 중심 지정할 수 있음) : 브라우저 접두사를 붙일 때는 at키워드 없이 구문의 맨 앞에 위치를 표시.

  background: -webkit-radial-gradient(10% 10%, circle, white,blue);
  background: -moz-radial-gradient(10% 10%, circle,white,blue);
  background: -o-radial-gradient(10% 10%, circle, white,blue);
  background: radial-gradient(circle at 10% 10%,white,blue);

• 크기

  • closest-side : 가장 가까운 모서리에 닿을때까지 그라데이션을 그림

  • closest-corner : 가장 가까운 코너에 닿을때까지 그라데이션 그림

  • farthest-side : 가장 먼 모서리에 닿을때까지 그라데이션을 그림

  • farthest-corner : 가장 먼 코너에 닿을때까지 그라데이션을 그림

그라데이션 반복

• 선형그라데이션 반복 : repeating-linear-gradient

• 원형그라데이션 반복 : repeating-radial-gradient

참고

• Do it! HTML5+CSS3 웹 표준의 정석

• MDN web docs