우당탕탕 개발일지
[두잇 HTML5+CSS3 웹표준의 정석] CSS Part7 본문
웹에서 색상 표현하기
16진수 표기법
# 기호 다음에 6자리의 16진수로 표시하는 것이다. RR자리에는 빨간색, GG자리에는 초록색, BB자리에는 파란색의 양을 표시한다. 각 색상마다 하나도 섞이지 않았을을 표시하는 것은 00, 가득 섞였음음을 표시하는 것은 ff까지 사용할 수 있다. #000000는 검정색이고 #ffffff은 흰색인다. 예를들어 #ffff00은 빨간색과 초록색은 가득 섞였음을 표시하고 파란색은 전혀 섞이지 않았음을 나타낸다.
rgb와 rgba표기법
rgb)
16진수 표기법처럼 빨간색, 초록색, 파란색 순서로 표기하지만 16진수가 아닌 십진수로 표기한다. 하나도 섞이지 않았을 때는 0(흰색), 가득 섞였을 때는 255(검정색)으로 표시한다. 예를 들어 빨간색을 표시하고 싶으면 rgb(255,0,0)으로 표시한다.
rgba)
끝에 붙는 a, 즉 알파(alpha)는 불투명도 값을 나타내면 0(완전투명)부터 1까지의 값 중에서 사용가능하다. 숫자가 작아질수록 조금씩 투명해진다. 투명도를 표기할때 0.5대신 소수점 앞에 0을 빼고 .5라고 표기할 수 있습니다.
hsl과 hsla표기법
: hue(색상), saturation(채도), lightness(밝기)를 나타낸다.
- 색상을 하나의 각도를 기준으로 표시하는데 120도에는 초록색, 240도에는 파란색이 배치되고 그 사이사이에 나머지 색들이 배치됩니다.
채도는 색의 3요소 중 하나로 %로 표시하는데 아무것도 섞이지 않은 상태가 채도가 가장 높은 상태이다. 채도가 0%이면 회색톤, 100%이면 순색으로 표시됩니다. 밝기도 %로 표시하는데 0%가 가장 어둡고 100%가 가장 밝다.
rgba와 똑같이 hsla도 뒤에 붙는 알파는 투명도를 표시합니다.
색상 이름 표기법
모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(web-safe color)라고 하는데 기본 16가지 색상을 포함해 모두 216가지입니다.
색상 추출 사이트 이용하기
16진수 색상 값이나 rgb 값 등 색상 값을 원하는 형태로 추출할 수 있는 사이트는 Color picker ( www, colorpicker.com)
배경 색과 배경 이미지
background-color 속성
: 배경 색 지정하기
- 웹 문서 전체의 배경색을 지정하려면 body요소에 속성을 넣으면 된다.
예시)
background-color : #00ff00
background-color : rgb(0,255,0)
background-color : green;배경 색 스타일과 상속
-배경색을 상속되지 않습니다. <body>태그에 background-color속성을 이용해 웹문서의 배경을 초록색으로 지정하면 문서에 삽입하는 표나 목록 등 초록색이 그대로 비치는데 이것은 상속되어 초록색으로 나타나는 것이 아닌 모든 웹 문서 요쇼의 배경이 투명하기 때문에 그런것이다.
background-clip 속성
: 배경 적용 범위 조절하기
- 배경을 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용부분에만 적용할지 선택할 수 있다.
| border-box | 가장 외곽인 테두리까지 적용한다. |
| padding-box | 테두리를 뺀 패딩 범위까지 적용한다. |
| content-box | 내용 부분에만 적용한다. |
background-image 속성
: 웹 요소에 배경 이미지 넣기
- jpg, gif, png 파일을 사용하며 이것을 'url(파일경로)' 형식으로 사용한다. 문서 전체의 배경을 이미지를 지정하려면 <body> 태그에 지정하고 특정 영역에 만들고 싶다면 클래스 선택자나 id 선택자를 이용해 지정하면 된다.
이때 파일 경로에는 작은따옴표(또는 큰 따옴표)를 붙여도 되고 안 붙여도 됩니다.
background-repeat 속성
: 배경 이미지 반복 방법 지정하기
- 배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시됩니다. 이때 background-repeat 속성을 이용하면 반복을 하지 않게 할 수도 있고 가로반복, 세로반복 등 반복 방향을 지정할 수도 있다.
| repeat | 브라우저 화면에 가득 찰 때까지 배경이미지를 가로세로 반복한다. |
| repeat-x | 브라우저 창 너비와 같아질 때까지 배경이미지를 가로로 반복합니다. |
| repeat-y | 브라우저 창 높이와 같아질 때까지 배경이미지를 세로로 반복합니다. |
| no-repeat | 배경 이미지를 한 번만 표시하고 반복히지 않는다. |
background-size 속성
: 배경 이미지 크기 조절하기
- 배경이미지의 여러 크기로 조절하는 것이다.
| auto | 원래 배경 이미지 크기만큼 표시된다. |
| contain | 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 |
| cover | 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소 |
| <크기> | 너비 값과 높이값을 지정한다. 너비 값만 지정할 경우, 원래 배경 이미지크기를 기분으로 축소/확대 비율을 자동으로 계산해 높이값을 지정한다. |
| <백분율> | 배경 이비지가 들어갈 요소의 크기를 기준으로 백분율 값 지정 |
background-position 속성
: 배경 이미지 위치 조절하기
- 배경 이미지가 표시되는 위치를 조절한다.
background-position: <수평위치> <수직위치>;
수평위치 : left ㅣ center ㅣ right ㅣ <백분율> ㅣ <길이 값>
수직위치 : top ㅣ center ㅣ bottom ㅣ <백분율> ㅣ <길이 값>* 앞의 값은 수평위치 값이고 뒤의 값은 수직위치값이다. 만약 값을 하나만 지정할 경우, 그 값은 수평위치로 간주하고 수직위치값을 center 또는 50%로 간주한다. *
키워드 표시법)
- 수평 위치는 left,right, ceter중에서 선택하고 수직위치는 top, bottom,center 중에서 선택한다. 예를 들어 background-position:center bottom; 이라면 브라우저 창의 중앙 하단에 배치한다. 만약 background-position:center center; 일경우 background-position:center; 라고 줄여 쓸 수 있습니다.
백분율(%) 표시법)- 예를 들어 background-position:30% 60%; 일 경우 왼쪽 모서리로부터 가로 30% 세로 60%의 위치에 배경이미지 위치를 맞춥니다.
길이(px) 표시법- 백분율과 마찬가지로 이미지의 위치를 길이(px)로 직접 지정한다.
background-origin 속성
: 배경 이미지 배치할 기준 조절하기이 속성에서 사용할 수 있는 값은 background-clip과 같다.
| border-box | 테두리가 기준이 됩니다. |
| padding-box | 테두리를 뺀 패딩이 기준이 됩니다. |
| content-box | 내용 부분이 기준이 됩니다. |
* 만약 속성이 border-box라면 테두리 영역부터 이미지가 시작됩니다. *
background-attachment 속성
: 배경 이미지 고정하기
- 기본적으로 스크롤을 내렸을 때 배경 이미지도 함께 이동한다. 하지만 이 속성을 사용하면 배경 이미지는 고정된다.
| scroll | 기본값이며 배경이미지도 함께 스크롤된다. |
| fixed | 화면이 스크롤되더라도 배경 이미지는 고정된다. |
background 속성
: 속성 하나로 배경 이미지 제어하기
- background 관련 속성을 하나의 속성으로 줄여 사용할 수 있습니다.
그라데이션 효과로 배경 꾸미기
그라데이션과 브라우저 접두사
현재 표준화된 구분 외에 그라데이션을 지원하지 않는 브라우저는 전용 브라우저 접두사를 붙여서 사용해야한다.
그라데이션 값은 background나 background-image를 속성값으로 지정한다.
| -webkit- -moz- -o- |
사파리 5.1~6.0 파이어폭스 3.6~15 오페라 11.1~12.0 |
예시)
background: linear-gradient() /*표준구문*/
background: -webkit-linear-gradient() /*사파리*/
background: -moz-linear-gradient() /*파이어폭스*/
background: -o-linear-gradient() /*오페라*/
선형 그라데이션
: 수직이나 수평 또는 대각선 방향으로 일정하게 변하는것을 말한다.
linear-gradient(<각도> to<방향>, color-stop, [color-stop,...])
방향
: 끝 지점을 기준으로 'to'키워드와 함께 사용한다.
- 예를 들어 왼쪽에서 오른쪽으로 변하는 그라데이션이라면 'to right'라고 적는다. 기본값은 'to bottom'이다.
| to top to left to right to bottom |
아래에서 위로 오른쪽에서 왼쪽으로 왼쪽에서 오른쪽으로 위에서 아래로 |
| -webkit- -moz- -o- |
그라데이션 시작 위치 기준, 키워드 to 사용하지않음 그라데이션 끝 위치 기준, 키워드 to 사용하지않음 그라데이션 끝 위치 기준, 키워드 to 사용하지않음 |
예시)
background: linear-gradient(to right bottom) /*표준구문*/
background: -webkit-linear-gradient(left top) /*사파리*/
background: -moz-linear-gradient(right bottom) /*파이어폭스*/
background: -o-linear-gradient(right bottom) /*오페라*/
각도
: 그라데이션이 끝나는 각도이고 'deg'로 표기한다.
예시)
background: linear-gradient(45deg, blue, white) /*표준구문*/
background: -webkit-linear-gradient(45deg, blue, white) /*사파리*/
background: -moz-linear-gradient(45deg, blue, white) /*파이어폭스*/
background: -o-linear-gradient(45deg, blue, white) /*오페라*/
색상 중지 점(color-stop)
: 색상이 바뀌는 부분의 색을 지정해주는 것을 색상 중지 점이라한다.
- 색상과 함께 중지 점의 위치를 함께 설정해준다.
예시)
background: linear-gradient(to right bottom, blue, white 30%, blue) /*표준구문*/
원형 그라데이션
모양
: 모양은 circle(원형), ellipse(타원형)이 있다. 따로 지정하지 않으면 기본값인 타원형으로 인식한다.
radius-gradient(<최종모양> <크기> at<위치>, color-stop, [color-stop...])
예시)
background: radius-gradient(white, yellow, red;) /*타원형*/
background: radius-gradient(circle, white, yellow, red;) /*원형*/
위치
: 그라데이션이 시작하 원의 중심을 지정할 수 있다.
- 모양, 크기 속성 다음에 at키워드와 함께 위치 값을 지정한다.
* 접두사를 붙이는 구분에서는 at 키워드 없이 구문의 맨 앞부분에 위치를 표시한다 *
예시)
background: radius-gradient(circle at 10% 10%, white, blue;) /*최신모던브라우저*/
background: radius-gradient(10% 10% circle, white, blue;) /*초기모던브라우저*/
크기
: 원의 크기를 지정할 수 있다.
- 그라데이션이 속성값의위치에 닿을 때 까지 그라데이션을 그린다.
1. closet-side 속성값
-원의 경우) 가장 가까운 요소의 모서리와 만난다.
-타원형의 경우) 그라데이션 중심에 가장 가까운 요소의 수평축아니 수직축과 만난다.
2. closet-corner 속성값
-그라데이션 중심에서 가장 가까운 요소의 코너에 닿을 때까지 그라데이션을 그린다.
3. farthest-side 속성값
- 가장 먼 모서리와 만난다.
4. farthest-corner
- 그라데이션 중심에서 가장 먼 코너에 닿도록 하며 기본 값이다.
예시)
background: radius-gradient(circle closet-side at 10% 10%, white, blue;) /*최신모던브라우저*/
색상 중지 점
: 색상이 바뀌는 위치를 지정할 수 있다.
( 선형 그라데이션과 동일)
background: radius-gradient(red, white 20%, blue;) /*최신모던브라우저*/
'HTML & CSS > Do it! 시리즈' 카테고리의 다른 글
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part9 (0) | 2022.01.26 |
|---|---|
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part8 (0) | 2022.01.26 |
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part6 (0) | 2022.01.21 |
| [두잇 HTML5+CSS3 웹표준의 정석] CSS Part5 (0) | 2022.01.20 |
| [두잇 HTML5+CSS3 웹표준의 정석] HTML Part4 (0) | 2022.01.19 |