웹 문서에는 문서 전체뿐 아니라 특정 부분이나 글자 등 여러 요소에 배경을 넣을 수 있는데, 배경에는 단순한 색상이나 이미지를 사용할 수도 있습니다. 또한 그러데이션을 넣거나 색의 투명도도 조절할 수 있습니다.
웹에서 색상 표현하기
16진수 표기법
#ffff00처럼 # 기호 다음에 6자리의 16진수로 표시하는 것으로 가장 기본적인 방법입니다.
#RRGGBB형식으로 표시하며, 두자리씩 중복될 경우 #ff0로 줄여서 표기할 수 있습니다.
rgb와 rgba표기법
| 기본형 | 설명 |
| rgb(red 값, green 값, blue 값); | 빨간색, 초록색, 파란색의 양을 나타낸다 |
| rgba(red 값, green 값, blue 값, alpha 값); | 빨간색, 초록색, 파란색, 불투명도값을 나타내며 1은 완전 불투명한 값이고 0은 투명한 값입니다. |
hsl과 hsla 표기법
| 기본형 | 설명 |
| hsl(<hue 값>, <saturation 값>, <lightness 값>); | hue는 각도, saturation은 채도로 %로 표시하고 아무것도 섞이지 않은 상태가 채도가 높다. , lightness는 밝기로 %로 표시하며 높을수록 밝다. |
| hsla(<hue 값>, <saturation 값>, <lightness 값>, <alpha 값>); | 앞의 세 값은 위와 같고 alpha는 불투명도를 나타낸다. |
색상 이름 표기법
모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상이라고 하며 기본 16가지 색상을 포함해 모두 216가지입니다.
배경 색과 배경 이미지
background-color 속성
배경 색 지정하기
| 기본형 | 설명 |
| background-color: <색상> | 16진수, rgb값 또는 색상 이름을 사용해 지정합니다. |
배경 색 스타일과 상속
글꼴이나 글자 크기 등은 <body>태그 선택자에서 지정하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한, 문서 전체에 똑같이 적용되었으나, 예외적으로 background-color값은 상속되지 않습니다.
* 배경의 기본색은 투명색(transparent)입니다.
background-clip 속성
배경 적용 범위 조절하기
박스 모델 관점에서 배경 적용 범위를 조절할 수 있다. 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 (padding) 범위까지 적용할지, 아니면 내용 부분에만 적용할지 선택할 수 있습니다.
| 기본형 | 설명 |
| background-clip: border-box | 박스 모델의 가장 외곽인 테두리(border)까지 적용합니다. |
| background-clip: padding-box | 박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용합니다. |
| background-clip: content-box | 박스 모델에서 내용 부분에만 적용합니다. |
background-image 속성
웹 요소에 배경 이미지 넣기
웹 요소에 배경 이미지 넣기 배경 이미지는 웹에서 사용 가능한 파일인 jpg, gif, png 파일을 사용하며 이것을 'url(파일 경로)'형식으로 사용합니다.
| 기본형 | 설명 |
| body {background-image: url('bg1.png');} #area {background-image: url('bg2.png');} |
배경 이미지는 여러 개를 사용할 수 있는데 이럴 경우, 첫 번째 이미지부터 순서대로 표시합니다. |
background-repeat속성
배경 이미지 반복 방법 지정하기
배경 이미지를 반복하지 않게 할 수도 있고 반복하더라도 가로 반복이나 세로 반복 등 반복 방향을 지정할 수 있습니다.
| 기본형 | 설명 |
| background-repeat : repeat | 브라우저 화면에 가득 찰 때까지 배경이미지를 가로와 세로로 반복합니다. |
| background-repeat : repeat-x | 브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복합니다. |
| background-repeat : repeat-y | 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복합니다. |
| background-repeat : no-repeat | 배경 이미지를 한 번만 표시하고 반복하지 않습니다. |
background-size 속성
배경 이미지 크기 조절하기
| 기본형 | 설명 |
| background-size: auto | 원래 배경 이미지만큼 표시됩니다. |
| background-size: contain | 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소합니다. |
| background-size: cover | 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소합니다. |
| background-size: <크기 값> | 너비 값과 높이 값을 지정합니다. 너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정합니다. |
| background-size: <백분율> | 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 그 크기에 맞도록 배경이미지를 확대하거나 축소합니다. |
background-position 속성
배경 이미지 위치 조절하기
| 기본형 | 설명 |
| background-position: <수평 위치> <수직 위치>; | 수평 위치 값과 수직 위치 값을 함께 표시 |
| 수평 위치 : left | center | right | <백분율> | <길이 값> | 수평 위치에 들어갈 수 있는 값 |
| 수직 위치 : top | center | bottom | <백분율> | <길이 값> | 수직 위치에 들어갈 수 있는 값 |
background-origin 속성
배경 이미지 배치할 기준 조절하기
| 기본형 | 설명 |
| background-origin: border-box | 박스 모델의 가장 외곽인 테두리(border)가 기준이 된다. |
| background-origin: padding-box | 박스 모델에서 테두리를 뺀 패딩(padding)이 기준이 된다. |
| background-origin: content-box | 박스 모델에서 내용 부분이 기준이 됩니다. |
background-attachment속성
배경 이미지 고정하기
| 기본형 | 설명 |
| background-attachment: scroll | 화면 스크롤과 함께 배경 이미지도 스크롤됩니다. |
| background-attachment: fixed | 화면이 스크롤되더라도 배경 이미지는 고정됩니다. |
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 |
축약형의 다양한 속성 확인하는 사이트
https://www.w3.org/TR/css-backgrounds-3/#background
CSS Backgrounds and Borders Module Level 3
Abstract This draft contains the features of CSS relating to borders and backgrounds. The main extensions compared to level 2 are borders consisting of images, boxes with multiple backgrounds, boxes with rounded corners and boxes with shadows. CSS is a la
www.w3.org
그라데이션 효과로 배경 꾸미기
그라데이션 브라우저 접두사
| 접두사 | 브라우저 버전 |
| -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>
선형 그라데이션
| 기본형 | 설명 |
| linear-gradient( <각도> to <방향>, volor-stop, [color-stop,...]); | 그라데이션의 방향을 설정한다., 색상의 수(한개면 단색) |
방향
그라데이션의 방향을 지시할 때는 끝 지점을 기준으로 'to'키워드와 함께 사용합니다.
background: linear-gradient(to right bottom, blue, white);와 같이 사용합니다.
| 속성 값 | 설명 |
| to top | 아래에서 시작해 위로 그라데이션이 만들어집니다. |
| to left | 오른쪽에서 시작해 왼쪽으로 그라데이션이 만들어집니다. |
| to right | 왼쪽에서 시작해 오른쪽으로 그라데이션이 만들어집니다. |
| to bottom | 위에서 시작해 아래로 그라데이션이 만들어집니다. |
각도
| 기본형 | 설명 |
| background: linear-gradient(45deg, #ff0000, #ffffff); | 각도는 위가0deg, 오른쪽이 90deg, 아래가 180deg, 왼쪽이 270deg입니다.(시계방향) |
색상 중지 점(color-stop)
선형 그라데이션을 만들기 위해서는 바뀌는 부분의 색을 지정해주어야 하는데, 바뀌는 지점을 색상 중지점이라고 합니다.
| 기본형 | 설명 |
| background: linear-gradient(to bottom, #06f, white 30%, #06f); | 방향, 시작색, 중지 점 색상과 위치, 끝색 |
원형 그라데이션
| 기본형 | 설명 |
| radial-gradient( <최종 모양> 크기 at <위치> color-stop, [color-stop...]) | 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀝니다. |
| background: radial-gradient(circle, white, yellow, red); | 모양 크기 at 위치, color-stop, color-stop, color-stop |
위치
그라데이션이 시작하는 원의 중심도 지정할 수 있습니다. '모양'과 '크기'속성 다음에 at키워드와 함께 위치값을 지정합니다. 사용할 수 있는 값은 키워드(left, center, right중 하나, top, center, bottom중 하나)입니다.
크기
1. closet-side 속성 값
가까운 모서리에 그라데이션 가장자리가 닿을 때 까지 그라데이션을 그립니다.
2.closest-corner
그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 요소의 코너에 닿도록 합니다.
3. farthest-side
그라데이션 가장자리가 그라데이션 중심에서 가장 먼 모서리와 만나도록합니다.
4. farthest-corner
그라데이션 가장자리가 그라데이션 중심에서 가장 먼 코너에 닿도록 합니다.(기본값)
색상 중지 점(color-stop)
| 기본형 | 설명 |
| background-radial-gradient(red, yellow 20%, skyblue); | 색옆에 %값을 넣으면 그라데이션 조절 가능 |
그라데이션 반복 패턴 만들기
| 기본형 | 설명 |
| background: repeating-linear-gradient(yellow, red 20px); | 그라데이션을 반복한다. |
'HTML > 색상과 배경을 위한 스타일' 카테고리의 다른 글
| 색상과 배경을 위한 스타일예제 (0) | 2021.08.14 |
|---|