CSS - Colors

 

 

CSS Colors

 

---

 

• CSS에서 컬러를 주는 방법은 다양합니다.
• 16진수 Hex 코드, RGB 값, 영문이름으로 된 컬러, HSL 값 등입니다.
  
  

기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.

 

Welcome to CODING HELL

 

A. 영문명으로 지정하기

- 영문명은 아무거나 적는 것은 허용되지 않고, 브라우저에서 공통으로 지원되는 140여개의 컬러값을 사용합니다.

 

[ 아래의 컬러표 상세보기 ]

 

 

B. 16진수(HEX) 코드로 지정하기

- RGB컬러값을 16진수로 변환한 6자리 코드를 사용하며 '#'으로 시작합니다.

- 대소문자 구문이 없습니다.

- 축약형으로 사용이 가능하다.

- 16진수는 계산기(개발자모드)를 이용하면 쉽게 구할 수 있습니다.

- 또는, 변환을 제공해주는 사이트를 이용 합니다. 10진수를 16진수 코드로 변경해주는 사이트 -> 바로가기

// 축약형
p { color : #FFFFFF } -> p { color : #FFF }
p { color : #335522 } -> p { color : #352 }

 

C. RGB 코드 사용하기

- css rgb() method 사용

- Red, Green, Blue 3가지의 빛의 삼원색을 이용한 컬러 코드 지정방법

- 각 색상별로 0~255 단계로 표현한다.

- RGB코드를 넣으면 HEX로 변경해주는 페이지 바로가기

p { color : rgb(255,215,0) }

 

D. RGBA - 색상에 투명도 지정하기

- css rgba() method 사용

- RGB값 뒤에 마지막으로 오는 것은 alpha 값으로 투명도를 나타낸다. (0 부터 1사이의 값으로 소숫점 표현이 가능하다)

p { color : rgba(255,215,0, 0.5) }

 

E. HEX8 사용하여 투명도 지정하기

- 투명도는 0~100% 백분율로 먼저 값을 지정합니다.

- 예를 들어 20%의 투명도를 색상에 지정하고 싶다면 255 * 0.2 = 51이라는 10진수를 얻어냅니다.

- 얻어낸 투명도의 10진수를 16진수 코드로변경 하면됩니다.최종결과는 '33'을 얻어냅니다.

- 검정색 20%로 지정하려면, #00000033 을 입력하면 됩니다.

- 16진수는 계산기(개발자모드)를 이용하면 쉽게 구할 수 있습니다.

- 또는, 변환을 제공해주는 사이트를 이용 합니다. 10진수를 16진수 코드로 변경해주는 사이트 -> 바로가기

사이트에서 10진수를 16진수로 변경해주는 모습

 

HEX 인기컬러 정리 사이트 

Popular Colors

 

 

 

Color 선택하여 RGB, HSV, 16진수 값 구하기 사이트

Color Picker — HTML Color Codes

 

RGB Color Codes Chart 🎨

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.