CSS 쉽게 배우기 | 색상

CSS에서 배경 색, 글 색, 테두리 색, 그라데이션 그리고 그림자까지 모두 마스터하기

 

안녕하세요

이번편부터는 본격적으로 CSS로 할 수 있는 것들을 볼 거예요

그중 제일 먼저 색을 볼게요

 

아무리 예쁜 디자인이라도 색이 없으면 소용없잖아요

 

그럼 요소의 어디에 색을 입힐 수 있는지 볼게요

CSS 속성	적용 범위
color	텍스트 색
background / background-color	배경 색
border-color	테두리 색
box-shadow	박스 그림자
text-shadow	텍스트 그림자

 

 

 

색 지정하기

CSS에서 색을 지정하는 방법은 3가지가 있습니다

1. 색 이름을 사용하기
2. 색상코드(hex code) 사용하기
3. RGB 값 사용하기

 

 

색 이름 사용하는 방법

색 이름을 사용할경우 그 색의 이름을 적어주면 됩니다

background-color: red;
background-color: blue;
background-color: lightblue;
background-color: gray;

 

 

색상 코드 (hex code) 사용하기

색상 코드, 즉 hex code를 사용하려면 그 색의 코드를 먼저 찾아야겠죠

구글에서 color picker이라고 검색하면 색의 코드를 찾을 수 있는 도구가 있습니다

hex code는 #로 시작합니다

코드의 길이는 6자이고, 알파벳과 숫자를 섞어 사용합니다

 

hex code의 시작은 #000000 으로 검은색이고, 끝은 #FFFFFF으로 하얀색입니다

검은색과 하얀색, 그리고 이 사이에 있는 모든 색을 사용할 수 있습니다

 

hex code에서 숫자는 0부터 9까지, 알파벳은 A부터 F까지 입니다

0	1	2	3	4
5	6	7	8	9
A	B	C	D	E
F

여기서 6개를 조합하면 색이 나타납니다

알파벳은 대/소문 상관없습니다

 

hex code가 6자리인 이유는 처음 2자리는 빨강, 중간 2자리는 초록, 마지막 2자리는 파랑을 뜻하기 때문입니다

#  FF       57      33
  빨강     초록    파랑

background-color: #FF5733

 

hex code를 줄여서 사용할 수도 있습니다

#000 은 #000000과 같습니다
#0 f0 은 #00 ff00과 같습니다

 

 

 

RGB 사용하기

RGB는 빨강, 초록, 파랑의 값을 직접 사용하는 방법입니다

hex code와 비슷하지만 사용하는 값의 범위가 다릅니다

rgb(0, 0, 0) 검은색
rgb(255, 255, 255) 하얀색

이렇게 rgb는 0부터 255까지의 숫자만을 사용합니다

hex code와 비교하자면 0 = 0, FF = 255입니다

 

rgb의 업그레이드 버전으로 rgba가 있습니다

rgba에서 a는 alpha를 뜻하며 색의 투명도를 조절할 수 있습니다

alpha값의 범위는 0.0부터 1.0까지이며 0.1 단위로 조절할 수 있습니다

0.0은 완전 투명(안보임), 1.0은 완전 불투명(잘 보임)입니다

 

 

위 세 가지 방법은 배경뿐만 아니라, 텍스트와 테두리, 그림자, 그라데이션에서 사용할 수 있습니다

 

 

 

 

테두리 색 바꾸기

테두리의 색을 바꾸려면

border-color: 색

테두리는 색 말고도, 굵기, 테두리 타입, 그리고 테두리의 반경을 바꿀 수 있습니다

border-width: px
border-style: [dotted, solid, dashed, double, groove, ridge, inset, outset, none, hidden]
border-radius: [왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래]

테두리 반경은 각 코너를 따로 선택할수도 있습니다
border-top-left-radius  왼쪽 위
border-top-right-radius 오른쪽 위
border-bottom-right-radius  오른쪽 아래
border-bottom-left-radius  왼쪽 아래

 

 

 

 

 

그림자 색 바꾸기

요소에 그림자를 추가하면 입체감을 표현할 수도 있고, 배경 색을 어둡게해서 텍스트가 더 잘보이게 할수도 있습니다

그림자에는 두 가지가 있는데 하나는 텍스트에 사용하는 text-shadow, 다른 하나는 텍스트가 아닌 요소들에 사용하는 box-shadow입니다

박스 섀도우
box-shadow: [x, y, 흐림, 번짐, 색, 안쪽/바깥쪽/상속]

텍스트 섀도우
text-shadow: [x, y, 번짐, 색]

새도우 연결 사용
box-shadow: [x, y, 흐림, 번짐, 색, 안쪽/바깥쪽/상속], [x, y, 흐림, 번짐, 색, 안쪽/바깥쪽/상속], ...
text-shadow: [x, y, 번짐, 색], [x, y, 번짐, 색],...

그림자는 기본으로 한 번에 가로 세로 위치를 한 번만 지정할 수 있습니다

한마디로 그림자의 위치를

• 오른쪽 위, 오른쪽, 오른쪽 아래
• 아래쪽
• 왼쪽 아래, 왼쪽, 왼쪽 위
• 위쪽

이렇게 만 배치할 수 있습니다

물론 그림자의 값을 연결하면 여러 그림자를 만들 수 있기 때문에 한 번에 여러 방향에 그림자를 배치할 수 있습니다

 

 

 

 

그라데이션 만들기

디자인에 대해서는 문외한이지만 디자인에서 빼놓을 수 없는 게 그라데이션인 거 같아요

CSS에서는 그라데이션을 어떻게 만들 수 있는지 볼게요

 

CSS에는 크게 두 가지의 그라데이션을 만들수 있습니다

• linear (선형)
• radial (방사형)

 

선형 그라데이션

선형 그라데이션은 한쪽 방향으로 가는 그라데이션입니다

선형 그라데이션의 방향은

• 위에서 아래 (기본)
• 아래에서 위로
• 오른쪽으로
• 왼쪽으로
• 오른쪽 위로
• 오른쪽 아래로
• 왼쪽 위로
• 왼쪽 아래로

이렇게 8가지가 있습니다

 

CSS에서 그라데이션은 배경 이미지로 분리돼있어서 배경 색이 아닌 배경 이미지 속성에서 사용됩니다

background-image 또는 background 속성을 사용할 수 있습니다

background-image: linear-gradient(...) ✔
background: linear-gradient(...) ✔
background-color: linear-gradient(...) ❌

 

선형 그라데이션 사용법

linear-gradient([방향/각도], [색-멈춤1], [색-멈춤2], ...)

방향: to bottom, to top, to right, to left, to right bottom, to right top, to left top, to left bottom
각도: 45deg, 90deg, -45deg, ...

색: red/#ff0000/rgb(255,0,0)
멈춤: 한 색에서 다른 색으로 바뀌는 지점. % 또는 px 사용가능
예: linear-gradient(blue, green 45%) 파랑색으로 시작해서 45%지점부터 초록새으로 바뀜

 

 

 

방사형 그라데이션

방사형 그라데이션은 원형으로 퍼지는 그라데이션입니다

background: radial-gradient(모양 크기 at 위치, 색-멈춤1, 색-멈춤2, ...)

모양: ellipse(기본), circle
크기: farthest-corer(기본), closest-cide, closest-corder, farthest-side
위치: center(기본), top, right, bottom, left, %, px
색: red/#ff0000/rgba(255,0,0)
멈춤: 선형 그라데이션과 같음

 

선형 그라데이션과 같이 방사형 그라데이션도 배경 색이 아닌 배경 이미지에 적용됩니다

background: radial-gradient(...) ✔
background-image: radial-gradient(...) ✔
background-color: radial-gradient(...) ❌

 

 

 

 

그라데이션을 반복할 수도 있습니다

background: repeating-linear-gradient(...) 선형 그라데이션 반복
background: repeating-radial-gradient(...) 방사형 그라데이션 반복

 

 

 

 

 

 

이렇게 CSS에서 색으로 할 수 있는 것들을 알아봤습니다

솔직히 그라데이션은 잘 사용 안 해서 설명이 잘 됐을지 좀 걱정이네요

 

다음 편에서는 배경으로 재미있는 걸 해볼게요

 

수고하셨습니다

 

 

끝!