07 색상과 배경을 위한 스타일

07-1 웹에서 색상 표현하기

16진수 표기법

# 다음에 6자리의 16진수로 표시하는 방법. ex) #ffff00
앞에서부터 두 자리식 ##RRGGBB 형식이다. 각 색상마다 하나도 섞이지 않았을 경우 00, 가득 섞였을 경우 ff로 표시된다.

rgb와 rgba 표기법

rgb(255, 0, 0) 이나 rgba(255, 0, 0, 0.5) 처럼 십진수로 표시하는 방법.
rgba의 맨 끝의 a는 불투명도 값을 나타낸다. 1이 불투명, 0이 투명.

hsl과 hsla 표기법

hsl은 차례대로 hue saturation lightness (색상, 채도, 밝기)를 나타낸다.
hue는 색의 3요소 중 하나로 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시.
saturation은 %로 나타내는데, 아무 것도 섞이지 않은 상태가 채도가 가장 높다. 채도가0일 경우 회색톤, 100일 경우 순수 색으로 표시
lightness는 0-100%로 어두움-밝음 정도를 표시한다.
ex) hsla(360, 100%, 0%, 0.5) - 빨간 색을 50% 투명하게

색상 이름 표기법

색상 이름을 영단어로 표기하는 방식.
모든 브라우저에서 표현할 수 있는 web-sate color는 총 16가지이다.

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

07-2 배경 색과 배경 이미지

background-color 속성 - 배경 색 지정

배경을 넣고 싶은 요소의 속성에 background-color 속성을 지정한다.

“배경 색 스타일과 상속 - background-color 값은 상속되지 않는다!!”

background-clip - 배경 적용 범위 조절

박스 모델 관점에서 배경 적용 범위를 조절할 수 있다. 즉 테두리(border)까지 적용할 것인지, 테두리를 빼고 패딩(padding)까지 적용할 것인지, 내용 부분에만 적용할 것인지 범위를 조절할 수 있다.

border-box - 박스 모델의 가장 외곽인 테두리(border)까지 적용
padding-box - 박스 모델에서 테두리를 뺀 패딩(padding)까지 적용
content-box - 내용 부분에만 적용

background-image - 웹 요소에 배경 이미지 넣기

웹에서 사용 가능 jpg, gif, png 파일을 url 형식으로 사용한다.
문서 전체의 배경 이미지를 지정하려면 <body> 태그에 지정하고, 특정 영역에 지정하려면 해당 클래스나 id 선택자를 이용해 태그에 이미지를 지정한다.
```
body { background-image: url(파일 경로) }
/* 파일 경로에 작은 따옴표, 큰 따옴표, 생략 모두 가능. */
```
배경 이미지를 여러 개 사용할 경우, 첫 번쨰 이미지부터 순서대로 표시
이미지가 채우려는 요소 크기보다 작을 경우, 가로와 세로로 반복된다.

background-repeat - 배경 이미지 반복 방법 지정

repeat - (기본) 브라우저 화면에 가득 찰 때까지 가로와 세로로 반복 ()
repeat-x - 브라우저 창 너비와 같아질 때까지 가로로 반복
repaeat-y - 브라우저 창 높이와 같아질 때까지 세로로 반복
no-repeat - 한 번만 표시하고 반복하지 않음

background-size - 배경 이미지 크기 조절

auto - 원래 이미지 크기만큼 표시
contain - 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소
- 요소에 이미지가 가득 차고, 흰 여백이 생긴다.
cover - 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소
- 요소에 이미지가 가득 차고, 이미지가 잘릴 수 있다.
<크기 값> - 너비와 높이 값 지정. 너비만 지정할 경우, 원래 배경 이미지 크기를 기준으로 비율을 자동 계산해 높이 값을 지정한다.
<백분율> - 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값 지정.
- 이미지 크기 기준이 아니라 들어갈 곳의 크기 기준
- background-size: 100% 100% 할 경우 이미지가 요소의 가로세로에 맞게 채워짐

background-position - 배경 이미지 위치 조절

배경 이미지를 제목이나 본문에서 한 쪽에 사용할 수 있다.
값을 하나만 지정할 경우 수평값으로 간주하고, 수직 위치 값은 50%(center)로 간주한다.

background-position: <수평> <수직>;
수평 : left | center | right | <백분율> | <길이값(px)>
수직 : top | center | bottom | <백분율> | <길이값(px)>

background-origin - 배경 이미지 배치할 기준 조절

background-clip과 마찬가지로 이미지를 배치할 기준을 지정한다.

border-box - 테두리 기준
padding-box - 패딩 기준
content-box - 내용 기준

background-attachment - 배경 이미지 고정하기

스크롤을 내렸을 때 배경 이미지도 함께 이동하지만, 이를 고정할 수 있다.

scroll - (기본) 화면과 함께 배경 이미지도 스크롤
fixed - 스크롤 내려도 이미지 고정

background - 속성 하나로 배경 이미지 제어하기

여러 개의 속성을 줄여서 한번에 사용할 수 있다.

07-3 그라데이션 효과로 배경 꾸미기

그라데이션과 브라우저 접두사

선형 그라데이션과 원형 그라데이션은 CSS3에 처음 소개된 기능이지만, 초기에는 복잡해서 브라우저 별 접두사를 붙여 사용해야 했다. 지금은 표준화된 구문이 완성되었지만, 아직 구 버전 웹 브라우저가 남아 있으므로 각각의 접두사를 붙여 함께 입력해야 한다.

접두사	브라우저 버전
-webkit-	사파리 5.1 ~ 6.0
-moz-	파이어폭스 3.6 ~ 15
-o-	오페라 11.1 ~ 12.0

.gradient {
    background: blue; /* 그라데이션 지원하지 않는 브라우저 */
    background: -webkit-linear-gradient(left top, blue, white);
    background: -moz-linear-gradient(right bottom, blue, white);
    background: -o-linear-gradient(right bottom, blue, white);
    background: linear-gradient(to right bottom, blue, white);  /* 표준 */      
}

선형 그라데이션

색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것
위치와 각도를 표시하는 방법이 몇 번 바뀌어 브라우저, 버전 별로 조금씩 다름
HTML5와 CSS3 지원이 가능한 모던 브라우저에서만 사용 가능

.grad {
    background: linear-gradient( <각도> to <방향>, color-stop, [color-stop, ...]);
}

방향 - 끝 점을 지점으로 to 키워드와 함께 사용한다. 위치나 각도 옵션을 생략하면 to bottom 으로 인식된다.

접두사	브라우저 버전	‘위치’ 속성 값
-webkit-	사파리 5.1 ~ 6.0	그라데이션 시작 위치 기준
-moz-	파이어폭스 3.6 ~ 15	그라데이션 끝 위치 기준. (to 사용 X)
-o-	오페라 11.1 ~ 12.0	그라데이션 끝 위치 기준. (to 사용 X)

각도 - 그라데이션이 끝나는 각도이며, deg로 표기한다. CSS에서 각도는 맨 윗부분이 0deg이고, 시계 방향으로 회전한다.
색상 중지 점 (color-stop) - 그라데이션을 만들이 위해 색이 바뀌는 지점. 색상만 지정할 수도 있고, 중지점 위치도 함께 지정할 수 있다.

.grad {
    background: linear-gradient(45deg, blue, white 30%, blue)
}

/* 1시 방향으로 가는 그라데이션. 시작의 30% 지점에 흰색, 다시 파란색. */

원형 그라데이션

원의 중심부터 동심원을 그리며 바깥 방향으로 색이 바뀐다.

.grad {
    background: radial-gradient( <모양> <크기> at <위치>, color-stop, [color-stop...]);
}

모양 - circle 과 ellipse. 기본형은 ellipse. circle 선택 시 정원을 그리고, ellipse 선택 시 화면을 넘지 않는 타원을 그린다.
위치 - 그라데이션이 시작하는 원의 중심을 지정할 수도 있다. 생략 시 center. 선형과 마찬가지로 브라우저 및 버전 별로 문법이 조금씩 다르다.
- left | center | right | <백분율>
- top | center | bottom | <백분율>

.gradient {
    background: blue; /* 그라데이션 지원하지 않는 브라우저 */
    background: -webkit-radial-gradient(10% 10%, circle, white, blue);
    background: -moz-radial-gradient(10% 10%, circle, white, blue);
    background: -o-radial-gradient(10% 10%, circle, white, blue);
    background: radial-gradient(circle at 10% 10%, white, blue);  /* 표준 */      
}

크기 - 원의 모양을 나타내는 circle 또는 ellipse와 함께 크기 값을 쓴다.
1. closest-side - 원의 경우, 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 모서리와 만나고 타원의 경우, 그라데이션 중심에서 가장 가까운 요소의 수평축이나 수직축과 만난다.
2. closest-corner - 그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 한다. (그라데이션이 적용되는 요소의 꼭짓점 중 가까운 점)
3. farthest-side - 그라데이션 가장자리가 중심에서 가장 먼 모서리와 만나도록 한다.
4. farthest-corner - (기본) 그라데이션 가장자리가 중심에서 가장 먼 코너에 닿도록 한다.

.grad {
    background: radial-gradient(circle closest-side at 30% 40%, white, blue);
}

색상 중지 점(color-stop)

그라데이션 반복

패턴을 한 번 만든 후 요소를 채울 만큼 반복할 수 있다.
repeating-linear-gradient repeating-radial-gradient 를 사용

** 두 개 이상의 색상을 반복 표시할 때 많이 사용된다.

.grad {
    /* 그라데이션 반복 */
    background: repeating-linear-gradient(yellow, red, 20px);

    /* 두 가지 색상을 반복하는 선형 그라데이션 */
    background: repeating-linear-gradient(yellow, yellow 20px,
         red 20px, red 40px);

    /* 두 가지 색상을 반복하는 원형 그라데이션 */
    background: repeating-radial-gradient(circle, white,
        white 10%, blue 10%, blue 20%);
}

References

Do it! HTML5+CSS3

[CSS3] CSS 색상, 배경, 그라데이션

Study Note