07-1 웹에서 색상 표현하기
1.16진수 표기법
웹 문서에서 색상을 표현하는 첫 번째 방법은 #ff0000처럼 #기호 다음에 6자리의 16진수로 표시하는 것으로 가장 기본적인 방법이다.
#RRGGBB 형식으로 표시한다. 각 색상마다 하나도 섞이지 않았음을 표시하는 00부터 해당 색이 가득 섞였음을 표시하는 ff까지 사용할 수 있는 값은 #000000부터 #ffffff까지 이다.
| 십진수 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 16진수 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f |
2.rgb와 rgba 표기법
여기서는 16진수가 아닌 십진수로 표현한다.
하나도 섞이지 않았을 때는 0으로 표시하고 가득 섞였을 때는 255로 표시하며 그 사이 값으로 각 색상의 양을 조절한다.
예를 들어 글자를 빨간 색으로 표시하고 싶다면 color: rgb(255,0,0); 으로 지정한다.
기본형) rgb(red 값, green 값, blue 값)
rgba(red 값, green 값, blue 값, alpha 값)
a는 불투명도 값을 나타내는 것으로 0부터 1까지의 값 중에서 사용할 수 있다.
1은 완전히 불투명한 것이고 숫자가 작아질수록 조금씩 투명해지다가 0이 되면 완전히 투명해진다.
3.hsl과 hsla 표기법
hsl은 hue(색상), saturation(채도), lightness(밝기)를 나타낸다.
기본형) hsl(<hue 값>, <saturation 값>, <lightness 값>);
hsla(<hue 값>, <saturation 값>, <lightness 값>, <alpha 값>);
색상(hue)은 색의 3요소 중 하나로 각도를 기준으로 색상을 둥글게 배치한 색상환으로 표시한다.
0도에는 빨간색, 120도에는 초록색, 240도에는 파란색이 배치되고 그 사이사이에 나머지 색들이 배치된다.
채도(saturation)도 색의 3요소 중 하나로 '%'로 표시하는데 아무 것도 섞이지 않은 상태가 채도가 가장 높은 상태이다.
채도가 0%면 회색톤, 100%면 순색으로 표시된다.
밝기(lightness)도 %로 표시하는데 0%가 가장 어둡고 100%가 가장 밝다.
4.색상 이름 표기법
red, yellow, black 처럼 잘 알려진 색상 이름으로 표시할 수도 있다.
모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(web-safe color)라고 하는데 기본 16가지 색상을 포함해 모두 216가지이다.
5.색상 추출 사이트 이용하기
색상을 표현하는 여러 방법을 배웠지만 각 색상에 해당하는 색상 이름이나 색상 값을 기억하기는 너무 어렵다.
대표적인 색상 추출 사이트 인 ColorPicker
07-2 배경 색과 배경 이미지
1. background-color 속성-배경 색 지정하기
기본형) background-color: <색상>
배경 색 스타일과 상속
글꼴이나 글자 크기 등은 <body> 태그 선택자에서 지정하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한, 문서 전체에 똑같이 적용되었다.
하지만 예외적으로 background-color 값은 상속되지 않는다.
2. background-clip 속성- 배경 적용 범위 조절하기
배경을 넣고 싶은 요소들마다 속성을 입력하면 배경을 넣을 수 있지만 박스 모델 관점에서 배경 적용 범위를 조절할 수도 있다.
즉, 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있다.
| 속성 값 | 설명 |
|---|---|
| border-box | 박스 모델의 가장 외곽인 테두리(border)까지 적용한다. |
| padding-box | 박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용한다. |
| content-box | 박스 모델에서 내용 부분에만 적용한다. |
3. background-image 속성- 웹 요소에 배경 이미지 넣기
배경 이미지에는 웹에서 사용 가능한 파일인 jpg나 gif, png 파일을 사용하며 이것을 url 형식으로 사용한다.
파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수도 있고, https://로 시작하는 절대 경로를 사용할 수도 있다.
기본형) background-image: url(파일 경로)
배경 이미지는 여러 개를 사용할 수 있는데 이럴 경우, 첫 번째 이미지부터 순서대로 표시한다.
4. background-repeat 속성- 배경 이미지 반복 방법 지정하기
배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시된다. 이때 background-repeat 속성을 사용하면 배경 이미지의 반복을 설정할 수 있다.
| 속성 값 | 설명 |
|---|---|
| repeat | 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복 |
| repeat-x | 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복 |
| repeat-y | 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복 |
| no-repeat | 배경 이미지를 한번만 표시하고 반복하지 않는다. |
5.background-size 속성- 배경 이미지 크기 조절하기
배경 이미지를 여러 크기로 조절할 수 있다.
| 속성 값 | 설명 |
|---|---|
| auto | 원래 배경 이미지 크기만큼 표시된다. |
| contain | 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 한다. |
| cover | 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다. |
| <크기 값> | 너비 값과 높이 값을 지정한다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정한다. |
| <백분율> | 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경 이미지를 확대하거나 축소한다. |
6. background-position 속성- 배경 이미지 위치 조절하기
배경 이미지는 제목이나 본문에서 한쪽에 이미지를 표시할 때도 이용할 수 있다. 이때 background-position 속성을 이용해 배경 이미지가 표시되는 위치를 조절한다.
기본형) background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이 값>
수직 위치: top | center | bottom | <백분율> | <길이 값>
키워드 표시법
배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성 값이다.
수평 위치는 left, center, right 중에 선택할 수 있고, 수직 위치는 top, bottom, center 중에 선택할 수 있다.
백분율(%) 표시법
주어진 요소의 해당 위치에 배경 이미지의 위치를 백분율로 맞춘다는 뜻이다.
background-position:0% 0%;라면 배경 이미지를 넣으려는 요소의 왼쪽 모서리에 배경 이미지의 왼쪽 모서리를 맞춘다.
또 다른 예로 background-position:30% 60%;라면 배경 이미지를 넣으려는 요소의 왼쪽 모서리로부터 가로 30%, 세로 60%의 위치에 배경 이미지의 가로, 세로가 30%, 60%인 위치를 맞춘다.
길이(px) 표시법
배경 이미지의 위치를 길이로 직접 지정할 수도 있다.
7. background-origin 속성- 배경 이미지 배치할 시준 조절하기
background-postiton 속성을 이용해 배경 이미지를 배치할 때 기준이 필요하다 이렇게 배경 이미지를 배치할 기준은 background-origin 속성으로 지정한다.
| 속성 값 | 설명 |
|---|---|
| border-box | 박스 모델의 가장 외곽인 테두리가 기준이 된다. |
| padding-box | 박스 모델에서 테두리를 뺀 패딩이 기준이 된다. |
| content-box | 박스 모델에서 내용 부분이 기준이 된다. |
8. background-attachment 속성- 배경 이미지 고정하기
지금까지 배운 것으로는 스크롤을 내렸을 때 배경 이미지도 함께 이동한다. 하지만 background-attachment 속성을 이용하면 배경 이미지를 고정할 수 있다.
| 속성 | 설명 |
|---|---|
| scroll | 화면 스크롤과 함께 배경 이미지도 스크롤 된다. 기본값 |
| fixed | 화면이 스크롤되더라도 배경 이미지는 고정된다. |
8. background 속성- 속성 하나로 배경 이미지 제어하기
지금까지 설명한 배경 이미지 관련 속성을 background라는 하나의 속성으로 줄여 사용할수 있다.
background: url('images/bg3.jpg') no-repeat fixed right bottom;
| 속성 | 속성 값 |
|---|---|
| background-image | url('images/bg3.jpg') |
| background-repeat | no-repeat |
| background-attachment | fixed |
| background-position | right bottom |
| background-clip | border-box |
| background-origin | padding-box |
| background-size | auto |
07-3 그러데이션 효과로 배경 꾸미기
1. 그러데이션과 브라우저 접두사
모던 브라이주 초기 버전에서는 그러데이션을 사용하기 위해 -webkit-이나 -moz-, -o- 같이 브라우저 제조업체를 표시하는 접두사를 붙여 사용해야만 했다.
그 이후 현재의 표준화된 구문이 완성되었지만 아직 웹상에서는 이전 브라우저가 남아 있다.
따라서 현재의 표준화된 구문 외에도 그러데이션을 지원하지 않는 브라우저와 접두사를 붙여 사용하는 브라우저까지 고려해 함께 입력해야한다.
이때 선형 그러데이션 함수나 원형 그러데이션 함수를 이용해 만드는 배경은 크기가 없는 배경 이미지이므로 그러데이션 값을 background-image 속성 값이나 background 속성 값으로 지정한다.
| 접두사 | 브라우저 버전 |
|---|---|
| -webkit- | 사파리 5.1~6.0 |
| -moz- | 파이어폭스 3.6~15 |
| -o- | 오페라 11.1~12.0 |
<style>
.grad{
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);/*표준 구문*/
}
</style>2.선형 그러데이션
선형 그러데이션이란 색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다.
이것을 만들어 주는 함수는 linear-gradient인데 색상이 어느 방향으로 바뀌고 어떤 색상으로 바뀌는지 알려 주어야 한다.
기본형) linear-gradient(<각도> to <방향>, color-stop, [color-stop, ..]);
방향
그러데이션 방향을 지시할 때는 끝 지점을 기준으로 'to' 키워드와 함께 사용한다.
| 속성 값 | 설명 |
|---|---|
| to top | 아래에서 시작해 위로 그러데이션이 만들어진다. |
| to left | 오른쪽에서 시작해 왼쪽으로 그러데이션이 만들어진다. |
| to right | 왼쪽에서 시작해 오른쪽으로 그러데이션이 만들어진다. |
| to bottom | 위에서 시작해 아래로 그러데이션이 만들어진다. |
선형 그러데이션은 CSS3 속성이기 때문에 HTML5와 CSS3 지원이 가능한 모던 브라우저에서만 사용할 수 있다.
그러므로 브라우저 접두사를 붙여 사용해야 하는데 접두사와 함께 선형 그러데이션을 사용할 때는 붙이는 기준이 약간씩 다르므로 구분해서 사용해야 한다.
| 접두사 | 브라우저 버전 | '위치'속성 값 |
|---|---|---|
| -webkit- | 사파리 5.1~6.0 | 그러데이션 시작 위치 기준 |
| -moz- | 파이어폭스 3.6~15 | 그러데이션 끝 위치 기준. 키워드 to 사용 X |
| -o- | 오페라 11.1~12.0 | 그러데이션 끝 위치 기준. 키워드 to 사용 X |
각도
선형 그러데이션에서 색상이 바뀌는 방향을 알려주는 또 다른 방법은 각도이다.
이때의 각도는 그러데이션이 끝나는 각도이고 그 값은 'deg'로 표기한다. CSS에서 각도는 맨 위 부분이 0deg이고 시계 방향으로 회전하면서 90deg, 180deg가 된다.
접두사를 붙여야하는 이전 버전의 모던 브라우저에서도 각도는 똑같이 사용한다.
예)왼쪽 아래에서 오른쪽 위로 변하고 빨간색에서 흰색으로 변하는 선형 그러데이션
<style>
.grad{
background:#ff0000;/*css3 미지원 브라우저*/
background:-webkit-linear-gradient(45deg,#ff0000,#ffffff);
background:-moz-linear-gradient(45deg,#ff0000,#ffffff);
background:-o-linear-gradient(45deg,#ff0000,#ffffff);
background:linear-gradient(45deg,#ff0000,#ffffff);
}
</style>색상 중지 점(color-stop)
색상 그러데이션을 만들기 위해서는 바뀌는 부분의 색을 지정해 주어야 하는데 바뀌는 지점을 색상 중지 점(color-stop)이라고 한다.
색상 중지 점을 지정할 때는 색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있다.
예)시작 색상과 끝 색상을 #06f로 하고 시작 위치에서 30% 지점에 흰색을 두어 위에서 아래로 부드럽게 연결되는 그러데이션
<style>
.grad{
background:#06f;/*css3 미지원 브라우저*/
background-image:-webkit-linear-gradient(top, #06f, white 30%, #06f);
background-image:-moz-linear-gradient(bottom, #06f,white 30%, #06f);
background:-o-linear-gradient(bottom, #06f,white 30%, #06f);
background:linear-gradient(to bottom, #06f, white 30%, #06f);
}
</style>3. 원형 그러데이션
원형 그러데이션은 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다.
원형 그러데이션에서는 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 한다.
기본형) radial-gradient(<최종 모양><크기>at<위치>, color-stop, [color-stop...])
모양
원형 그러데이션에서 만들어지는 모양은 circle(원형)과 ellipse(타원형)이다.
따로 지정하지 않으면 ellipse로 인식한다.
background:radial-gradient(white,yellow,red)
//모양을 따로 지정하지 않아 타원으로 나타남
background;radial-gradient(circle,white,yellow,red)
//모양을 원으로 지정함위치
그러데이션이 시작하는 원의 중심도 지정 할 수 있다.
선형 그러데이션과 마찬가지로 '위치'속성 부분은 표준 구문과 이전 구문 사이에 큰 차이가 있기 때문에 주의해야 한다.
표준 구문에서는 '모양'과'크기' 속성 다음에 at 키워드와 함께 위치 값을 지정하는데 브라우저 접두사를 붙이는 구문에서는 at 키워드 없이 구문의 맨 앞부분에 위치를 표시한다.
예) 10% 10% 위체에서 흰색에서 파란색으로 변하는 원형 그러데이션
<style>
.grad{
background:blue;/*css3 미지원 브라우저*/
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);크기
그러데이션을 지정할 때 원의 크기도 지정할 수 있다.
1) closet-side 속성 값
이 속성 값을 사용하면 원의 경우, 그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 모서리와 만나고 타원의 경우, 그러데이션 중심에서 가장 가까운 요소의 수평축이나 수직축과 만난다.
closet-side 속성을 적용하면 왼쪽 모서리에 그러데이션 가장자리가 닿을 때까지 그러데이션을 그린다
<style>
#div1{
width:100px;
height:100px;
background:darkgreen;
background:-webkit-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
background:-moz-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
background:-o-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
background:radial-gradient(circle closet-side at 30% 40%, white,yellow, green);
}
</style>
<ul>
<li id="div1"></li>
</ul>2) closest-corner 속성 값
그러데이션 가장자리가 그러데이션 중심에서 가장 가까운 요소의 코너에 닿도록 한다. 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 그러데이션을 그린다.
3)farthest-side 속성 값
원의 경우, 그러데이션 가장자리가 그러데이션 중심에서 가장 먼 모서리와 만나거나 타원의 경우, 그러데이션 가장자리가 그러데이션 중심에서 가장 먼 모서리와 만나도록 한다.
4)farthest-corner 속성 값
그러데이션 가장자리가 그러데이션 중심에서 가장 먼 코너에 닿도록 한다. 기본 값이다.
색상 중지 점(color-stop)
선형 그러데이션처럼 원형 그러데이션에서 색상이 바뀌는 부분을 색상 중지 점이라고 하는데 그러데이션 색상뿐만 아니라 색상이 바뀌는 위치도 함께 지정할 수 있다.
색상 중지 점의 위치를 지정하지 않았을 때
background:radial-gradient(red,yellow,skyblue);
색상 중지 점의 위치를 지정했을 때
background:radial-gradient(red,yellow 20%, skyblue);
4. 그러데이션을 사용해 패턴 만들기
선형 그러데이션과 원형 그러데이션은 패턴을 한 번 만든 후 요소를 채울 만큼 반복해 표시할 수 있다.
선형 그러데이션을 반복할 때는 repeating-linear-gradient를 사용하며 원형 그러데이션의 반복은 repeating-radial-gradient를 사용한다.
background:repeating-linear-gradient(yellow,red 20px);
//빨간색과 노란색이 겹쳐 주황색처럼 표시된다.
background:repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
//시작 색상과 끝 색상을 명확히 구분해 주면 색상이 중간에 섞이지 않고 두 개이상의 색상을 반복적으로 표시 할 수 있다.
