20. color 지정하는 법(+ variable)

<color 지정하는 법>

1. color 입력해서 나오는 색상 적어서 쓰기

2. rgb기법 사용하기

3. 색상코드 사용하기

4. 다른 사이트에 있는 색을 스포이드로 따오기

 

 

 

1) color :

color:를 하자 색상이 나옴

color를 적고 :를 하면 많은 색상들이 나옴.

스크롤을 하거나 방향키로 내려가며 원하는 색을 찾아서 사용.

 

 

2) rgb 기법 사용하기

값을 입력해서 원하는 색을 찾음

red, green, blue의 색을 조합하여 색을 표현할 수도 있음.

rgb 뿐 아니라 rgba를 적어서 a=투명도까지 설정할 수 있음.

 

 

 

3) 색상코드 사용하기

색상코드로 색을 적용한 모습

색상코드를 알고 있다면 색상코드를 작성해서 색을 표현할 수도 있음.

 

 

 

4) 다른 사이트에서 스포이드로 색 따오기

 

크롬의 확장 프로그램 중 하나인

color pcker 같은 프로그램을 사용하여 색상을 가져올 수도 있음.

 

 

 

 

5) variable (변수)

메인 컬러가 계속해서 사용되는 경우,

반복해서 적거나 수정을 할 때 쓰인 곳마다 수정을 해야해서 번거로움.

그럴 때 variable을 사용하면 편리함.

반복되는 색상들

:root{

 --main-color:를 통해 메인 색상을 지정해주고 바꿀 수 있음.

 

root는 기본적인 모든 document의 뿌리.

 

변수 작성 시 -(dash) 꼭 사용해야 함.

--변수이름-color:로 작성함.

빈 공간이 있으면 안 됨.

 

p에 변수를 적용한 모습

color: var(--내가 정한 변수이름-color)해주어 변수를 불러와 적용가능.