색 정하는 방법

color: CornflowerBlue;
color: #6495ED;
color: rgb(100, 149, 237);

키워드
HEX 값
RGB 값

키워드 색상

이미 지정된 단어들을 이용하여 적용할 수 있다.

RGB

0~255 사이 값으로 RGB(빨강, 초록, 파랑) 형식으로 지정

빛을 기반으로 적용
검정색은 0, 0, 0 흰색은 255, 255, 255

RGBA
알파값을 이용한 투명도 조절이 가능하다.
alpha 값은 0.0 ~ 1까지 조절이 가능하다.

HEX

16진수를 이용하여 #RRGGBB 형식으로 지정

0~f 사이값을 이용
검정색은 #000000 흰색은 #ffffff
둘씩 같은 숫자일 경우 생략가능
➡ 검정 #000 흰색 #fff

HSL

색조, 채도, 밝기를 이용하여 HSL(색조, 채도, 밝기) 형식으로 지정

색조
0~360으로 0은 빨간색 120은 초록 240은 파란색.

참고용 사진

채도
0~100% 로 0%는 흑백, 100%는 원색을 갖는다.

밝기
0~100%로 0%는 흰색 100%는 검정색 (다른 옵션과 무관)

---

적용 범위

배경색

background-color: red;

red

글자색

color: blue;

blue-text

테두리색

border: 1px solid purple;

green border

---

배경

단색 배경

background-color

<div style="background-color: red; width: 300px; height: 300px"></div>

위에서 배운 색상 적용 값 모두 적용 가능

이미지 적용

background-image

<div style="background-image: url('flower.jpg'); width: 300px; height: 300px"></div>

로컬 내 파일 경로 혹은 사진 주소 사용 가능.

---

선택 옵션

반복 옵션

background-repeat

속성명	설명	속성명	설명
repeat	기본 값, 상하 모두 반복 (비율 유지)	no-repeat	반복하지 않음
repeat-x	가로 반복	repeat-y	세로 반복
round	비율 맞추지 않고 크기에 맞춤	space	처음, 마지막을 모서리에 고정 고르게 공백 생성

스크롤 여부

background-attachment

속성명	설명	속성명	설명
scroll	스크롤시 배경도 같이 스크롤	fixed	스크롤시 배경은 고정 값, 스크롤되지 않음

위치 옵션

background-position

1. 키워드로 적용 : x상, y상 좌표
   하나만 적용시 y좌표는 자동으로 가운데 정렬

left top	center top	left bottom
left center	center center	center bottom
left bottom	center bottom	right bottom

2. 단위로 적용: x상, y상 좌표
   %, cm, px, em 등 적용 가능하며 기준점은 좌에서 우, 상에서 하
   키워드와 함께 적용시 해당 위치에서 적용 가능하며 bottom 50% right 40% 처럼 수직방향을 먼저 지정할 수도 있다.