4.웹프로그래밍, CSS, 색상은 어떻게 표현할까요? ^^

블로그 목적

CSS색상을 표현하는 방법에 대해서 공부하고 정리해본다.

CSS 관련 색상에 대해서 알아볼까요? ^^

컴퓨터의 색상은 빛의 3원색, 즉 빨간색, 녹색, 파란색을 혼합하여 만들어 짐.

그럼, CSS에서 색상을 표현하는 4가지 방법은 ?

이름

ex) "red"

16진수

ex) #FF0000

10진수

ex) rgb(255, 0, 0)

퍼센트

ex) rgb(100%, 0%, 0%)

16진수로 색상을 나타내는 방법

색상은 기본적으로 16진수 코드로 정의 됨.

16진수 코드 빨간색, 녹색, 파란색 값을 각각 2자리의 16진수로 표시한 것.

가장 낮은 값

0(16진수 00)

가장 높은 값

255(16진수 FF)

하나의 컬러값은 총 6개의 16진수 문자로 되어 있으며, 앞에 #기호를 가지고 있음.

빨간색, 녹색, 파란색값은 0 ~ 255 까지 변화 할 수 있음.

즉, 총 조합의 수는 256 * 256 * 256 = 약 1600만가지..

예를들어, 회색값(gray color) 은 빛의 3원색의 값을 동일하게 하면 만들어짐.

#080808, #101010, #505050 은 모두 회색값.

그러나, 몇년전까지만 해도 컴퓨터는 256가지 정도의 색상만을 지원하였음.

따라서 모든 컴퓨터에서 지원되는 색상만을 사용하려면 안전한색상을 사용하는것을 권유함.

아래는 web safe color 라고 불리는 216(18*12)가지 색상

body 요소의 배경색을 16진수 색상 코드로 변경해보면 아래와 같음.

ex) 배경색을 세팅하는 소스

​​​​​​​이름으로 색상을 나타내는 방법

색상의 이름을 사용하는 방법으로 가장 쉬움. (제 관점에서는 요.. ^^;)

16가지 기본색상은 있고 추가로 150가지의 색상이름을 사용할 수 있음.

가장 많이 사용하는 16가지이름

예시로, W3C에서 정의한 16개의 표준 색상 이름은 다음과 같습니다

body 요소의 배경색을 색상이름으로 변경해보면 아래와 같음.

ex) 배경색을 세팅하는 소스

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​RGB 값으로 색상 표현하기

위에서 알아본거와 같이 RGB 값을 퍼센트로 표현하는 방법

body 요소의 배경색을 RGB 값을 퍼센트로 표현해보면 아래와 같음.

ex) 배경색을 세팅하는 소스

​​​​​​​RGB 값을 정수를 사용해서 표현하는 방법

body 요소의 배경색을 RGB 값을 0~255 사이의 정수를 이용하는 방법

ex) 배경색을 세팅하는 소스

​​​​​​​​​​​​​​​​​​​​​​​​​​​​그럼, 원하는 색상을 찾으려면 어떻게 해야할까요?

가장 일반적인 방법

컬러차트 이용

포토샵과 같은 애플리케이션을 이용

기타 등등

색상에 대한 예시 소스

​​​​​​​웹브라우저 실행화면

결론

컴퓨터에서 색상은 빛의 3원색인 red, green, blue 을 혼합해서 만듬.

CSS 에서 색상을 표현하는 방법은 크게 4가지임

이름

16진수

rgb 10진수

rgb 퍼센트

오늘도 CSS 관련 마술(?) 한가지 획득 완료. 감사합니다 ^^

---

오늘의 명언 한마디

만약 내가 아직까지도 직업은 한우물을 파야 한다는 관념에서 벗어나지 못했다면 이런 기회들을 전부 놓치고 말았을 것이다. 또 한 수많은 강의를 듣고, 많은 책을 읽고, 수없는 패찰의 아픔을 이겨내지 못했다면 이길을 걸어갈 수 없었을 것이다.

기회의 끈을 놓지 않아야 한다고 생각한다. 무엇이든 혼자 할 때 보다 함께 할 때가 동기부여도 되고 격려도 되며, 어려움에 지쳐 있을 때 도움의 손길도 주고 받을 수 있어 좋다.

오늘 걷지 않으면, 내일은 뛰어야 한다고 하지 않는가?

꾸준히 노력하자. 아니 노력해야한다.

​

-오은석(북극성주) 지음, "월급쟁이를 위한 부동산 경매" 중에서

---

오늘의 영어 한마디

Researchers claim that they are breaking new ground in wireless communications.

연구원들은 주장한다. / 그들은 새로운 발견을 하였다고 / 무선통신에

해설

불모지를 개간하려면, 땅에 있는 잡목과 돌을 제거하고, 딱딱하게 굳은 흙을 부드럽게 만들어야 함.

불모지를 새로 개간하는 것처럼, 어떤 새로운 일을 하거나, 어떤 분야의 새로운 것을 발견하면, "break new ground"를 씀

그래서 예문의 "break new ground" 는 어떤 분야에서 새로운 사실을 발견하다라는 의미로 쓰임.