색상과 배경을 위한 스타일

웹에서 색상 표현하기

16진수 표기법 #ffff00(#ff0)

rgb와 rgba 표기법 rgb(255,0,0), rgba(255,0,0,0.5) (a는 알파, 투명도, 1은 완전 불투명, 0은 완전 투명)

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

색상 이름 표기법 red, yellow, black

색상 추출 사이트 이용하기 https://www.webfx.com/web-design/color-picker/

Color Picker by WebFX – Free HTML Color Chooser

배경 색과 배경 이미지

background-color 속성 - 배경 색 지정하기  background-color:green;(상속 x)

 

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

background-clip : border-box(테두리까지 적용) | padding-box(패딩까지 적용) | content-box(내용만 적용)

 

background-image 속성 - 웹 요소에 배경 이미지 넣기 background-image:url(~~);(배경 이미지 크기가 작으면 반복돼)

 

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

repeat(화면에 가득 찰 때까지 가로와 세로로 반복), no-repeat(한번만 표시)

repeat-x(창 너비와 같아질 때까지 가로로 반복), repeat-y(창 높이와 같아질 때까지 세로로 반복)

 

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

auto(원래 배경 이미지 크기), contain(요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소)

cover(배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소), <크기 값>, <백분율>

 

background-position 속성 - 배경 이미지 위치 조절하기 수평left, center, right /// 수직top, center, bottom

 

background-origin 속성 - 배경 이미지 배치할 기준 조절하기 border-box, padding-box, content-box

 

background-attachment 속성 - 배경 이미지 고정하기 scroll(기본값), fixed(스크롤되도 배경이미지 고정)

 

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

속성 값이 다르므로 입력 순서 상관x

 

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

-webkit-, -moz-, -o- 써야돼(지원하지 않는 브라우저도 있어)

선형 그러데이션

기본형 : linear-gradient(<각도> to <방향> color-stop, [color-stop,...]);

 

방향(to top, to left, to right, to bottom) (-webkit- 그러데이션 시작 위치 기준, -moz-,-o- 끝 위치기준, to 사용x)

각도(12시가 0 시계방향으로 증가, 동쪽 90, 남쪽 180)

 

색상 중지 점

  	.grad {
  		background: #06f; /* css3 미지원 브라우저 */
  		background-image: -webkit-linear-gradient(top, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
  		background-image: -moz-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
  		background: -o-linear-gradient(bottom, #06f, white 30%, #06f); /* 초기 모던 브라우저 */
  		background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 최신 모던 브라우저 */
  	}

원형 그러데이션

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

모양 : circle, ellipse(타원형, 기본형)

위치 : 표준구문은 모양,크기 다음에 at으로 위치, 브라우저 접두사 붙이는 구문은 at없이 구문의 맨 앞부분

left, center, right중 하나, top, center, bottom 중 하나

  	.grad {
  		background: blue;
  		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);
  	}

크기

색상 중지 점

그러데이션 색상뿐만 아니라 색상이 바뀌는 위치도 함께 지정할 수 있다.

    .grad1{
		background:skyblue;
	  	background:-webkit-radial-gradient(red, yellow, skyblue);
		background:-moz-radial-gradient(red, yellow, skyblue);
		background:-o-radial-gradient(red, yellow, skyblue);
		background:radial-gradient(red, yellow,skyblue); //50
    }
    .grad2{
		background:skyblue;
	    background:-webkit-radial-gradient(red, yellow 20%, skyblue);
		background:-moz-radial-gradient(red, yellow 20%, skyblue);
		background:-o-radial-gradient(red, yellow 20%, skyblue);
		background:radial-gradient(red, yellow 20%, skyblue); //20
    }

그러데이션 반복

선형은 repeating-linear-gradient

원형은 repeating-radial-gradient

		.grad1 {
			background: #ccc; /* css3 미지원 브라우저 */
			background: -webkit-repeating-radial-gradient(circle, white, #ccc 10%); /* 초기 모던 브라우저 */
			background: -moz-repeating-radial-gradient(circle, white, #ccc 10%); /* 초기 모던 브라우저 */
			background: -o-repeating-radial-gradient(circle, white, #ccc 10%); /* 초기 모던 브라우저 */
			background: repeating-radial-gradient(circle, white, #ccc 10%); /* 최신 모던 브라우저 */
		}
		.grad2 {
			background: #ccc; /* css3 미지원 브라우저 */
			background: -webkit-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 초기 모던 브라우저 */
			background: -moz-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 초기 모던 브라우저 */
			background: -o-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 초기 모던 브라우저 */
			background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); /* 최신 모던 브라우저 */
		}