css로 색 꾸미는 방법에 대하여 알아보기

css로 색 꾸미는 방법에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 css에서 색을 꾸미는 방법에 대하여 알아보도록 하겠습니다.

사실 css의 핵심 요소 중 하나라고 할 수도 있는 색은

우리가 보는 웹페이지를 다채롭게 만드는데 일조를 합니다.

그리고 시인성 측면에서도 큰 기여를 하기 때문에 매우 중요한 요소입니다.

그래서 이번 시간에는 css에서는 색을 어떻게 다룰 수 있고,

어떻게 꾸밀 수 있는지 한 번 알아보도록 하겠습니다.

 

1. css로 표현하는 색

css에서 색은 크게 3가지 방법으로 표현이 됩니다.

• RGB
• RGBA
• HSL

 

그중에서 가장 많이 사용이 되는 RGB를 이용을 하여 나타내는 방법을 알아볼 것이고,

RGB 표현법만 알아도 css를 자유롭게 사용하는 데는 전혀 지장이 없습니다.

 

1 - 1. 16진수 코드로 색 표현하기

우리가 css를 쓰면서 가장 많이 쓰게 되는 방법들 중 하나입니다.

우리가 색깔의 이름을 직접 쓰는 경우도 있지만,

css 기본 스타일에 색의 이름이 저장이 되어있지 않다면

우리가 색깔의 이름을 직접 입력했을 때 인식을 하지를 못합니다.

그래서 보통은 16진수 코드를 직접 색의 이름을 입력하는 것보다 더 많이 씁니다.

그래서 제가 하나의 예시로 css에 정의가 되어있는 색상 중에 'blueviolet'이라는 색상이 있는데,

그걸 한 번 16진수 코드로 표현을 해보겠습니다.

color : #8A2BE2;

이렇게 표현을 할 수가 있습니다.

여기에서 '#'은 코드의 이름을 적기 전에 쓰는 일종의 선언문자 같은 겁니다.

그래서 먼저 '#'을 붙인 후에 16진수 코드를 입력합니다.

그리고 색깔에 관련된 16진수 코드는 6자리 입니다.

또한, 각각의 코드는 2개의 자리씩 끊어서 읽는데,

제일 왼쪽이 빨강, 가운데가 초록, 오른쪽이 파랑입니다.

그래서 이를 해석을 해보면 빨강은 16진수 8A(10진수 : 130), 초록은 16진수 2B(10진수 : 43),

파랑은 16진수 E2(10진수 : 226)으로 나타내어져 있음을 알 수가 있습니다.

반응형

 

1 - 2. RGB로 표현하기

RGB는 10진수 체계로 표현이 됩니다.

그리고 컴퓨터에서 표현을 하기 때문에 0 ~ 255 사이의 숫자로 표현을 합니다.

그 이유는 색깔을 나타내는 10진수는 8자리의 2진수로 이루어져 있기 때문입니다.

그래서 총 256개의 숫자로 구성이 됩니다.

제가 앞서 표현했던 'blueviolet'을 RGB 방식으로 표현을 해보도록 하겠습니다.

color : rgb(138, 43, 226);

이렇게 표현이 됩니다.

그리고 이 방법은 조금 추리는 게 힘이 듭니다.

이 색깔의 비율을 적절히 맞춰서 선언을 한다는 것 자체가 매우 어려운 일이기 때문입니다.

그래서 위에 제시한 16진수 코드를 쓰는 방법을 추천을 드리는 겁니다.

 

 1 - 3. 색 이름으로 표현하기

제가 알려드리는 방법들 중에서는 가장 직관적인 방법입니다.

바로 색깔의 이름을 직접 입력하는 방법입니다.

css에는 대략 140개 정도의 색깔이 정의가 되어있습니다.

그래서 그 컬러의 이름이 css에 정의가 되어있다면 직접 쓰시는 게 가장 쉽습니다.

하지만 제가 앞서 말씀을 드린 것처럼, 색깔은 정말 가지각색인데,

css에 정의가 된 색이 아닐 경우에는 무조건 16진수 코드를 써야만 합니다.

 

여기까지 css로 색을 표현하는 방법에 대하여 알아보았습니다.

다음 포스팅에서는 색 프로퍼티에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~