CSS요소5 - 색상과 배경
색상 표현
1. HEX(16진수)
#으로 시작해서 여섯개의 문자가 붙는 16진수의 색상표현
- 6자리가 동일한 문자이면 3자리로 축약해서 사용가능
#000000→#000(검은색)#ffffff→#fff(흰색)
2. rgb
red, green, blue의 정도를 0~255사이의 숫자로 나타낸다
rgb(red, green, blue);rgb(0, 0, 0)(검은색)rgb(255, 255, 255)(흰색)
3. rgba
rgb와 동일하지만 투명도를 명시할 수 있다
rgba(red, green, blue, alpha);
색상과 배경
▶️ color
글자의 색상을 지정한다
p {
color: skyblue;
}
- 키워드: blue, red, green 등등 (transparent는 투명)
▶️ opacity
투명도를 지정할 수 있다
.box {
background-color: #000;
opacity: 0.5;
}
- 0부터 1까지의 값을 입력할 수 있다.
- 소수점 앞의 0을 생략할 수 있다 (0.5 -> .5)
- 0은 완전히 투명하기 때문에 보이지 않는다
- 1은 투명도가 아에 없으므로 불투명(기본)
- 내부의 모든 요소에 영향을 준다
▶️ background-color
배경색상을 지정한다
.box {
background-color: #000;
}
▶️ background-image
배경으로 이미지를 지정할 수 있다.
.box{
background-image: url("file-path");
}
- 기본값은
none - 만약
background-color와 같이 사용이 되면background-image가 위로 올라온다 background: url("file-path")단축속성을 이용해서 이렇게 표현도 가능
▶️ background-repeat
.box{
background-image: url("file-path");
background-repeat:
}
- 기본값은
repeat repeat: 요소의 크기를 채울만큼 반복한다repeat-x: 가로방향으로 채운다repeat-y: 세로방향으로 채운다no-repeat: 반복하지 않고 한번만 나온다
▶️ background-position
background-image의 위치를 지정할 수 있다
.box {
background-image: url("file-path");
background-position: x, y;
/* background-position: 100px, 200px; */
}
- x축과 y축을 설정할 수 있다
- 기본적으로 왼쪽 상단을 기준으로 한다(얼마나 떨어져있는지 명시)
- 키워드:
top,bottom,left,right,center - 이미지스프라이트를 이용해서 사진을 보여줄때 많이 사용된다
▶️ background-origin
원점(기준)을 지정할 수 있다.
.box {
background-image: url("file-path");
background-origin: border-box;
}
border-box: 배경을 테두리박스에 상대적으로 배치padding-box: 배경을 안쪽 여백에 상대적으로 배치(기본값)content-box: 배경을 컨텐츠 박스에 상대적으로 배치
▶️ background-size
배경의 크기를 지정할 수 있다.
.box {
background-image: url("file-path");
background-size: cover;
}
- 기본값은
auto으로 원본값의 크기를 가진다 contain: 더 짧은 가로 또는 세로에 맞춰 꽉채움(비율 유지)cover: 더 긴 가로 또는 세로에 맞춰 꽉 채움(비율 유지)- 값을 지정할 수 있음 ex)
background-size: 100px 100px;(비율 유지x) - %를 입력할 수 있음 ex)
background-size: 100%;= 가로에 맞춤 - 비율을 유지하고 요소내 여백을 남기려면
100%, 비율을 유지하고 여백을 남기지 않으려면cover를 사용한다
▶️ backgroud
단축속성으로 배경에 관련된 여러가지를 설정할 수 있다
.box {
background: url("파일경로") no-repeat center/100px blue;
}
- 몇개만 선택해서 작성할 수 있다
- 공백(스페이스)로 구분한다
color는 마지막에만 올 수 있다size는position뒤에만 올 수 있고/로 구분한다 (position/size)
background의 8개 하위 속성
background-attachment: 배경이미지를 고정(스크롤 여부)(기본값: scroll)scroll: 페이지와 함께 스크롤(아에 고정)fixed: 페이지와 함께 스크롤되지 않음(부모요소를 스크롤할때 보여지는 배경이 다름)local: 요소 내용과 함께 스크롤(내부요소 스크롤시 같이 스크롤됨)
background-clip: 어느 영역까지 차지할지를 지정(기본값: border-box)border-box: 테두리 영역까지padding-box: 요소 내부 여백까지content-box: 컨텐츠박스까지text: 텍스트 위에만
background-color: 배경의 색상을 지정(기본값: transparent)background-image: 배경을 이미지로 지정(기본값: none)background-origin: 원점을 지정(기본값: padding-box)background-position: 배경의 위치를 지정(기본값: 0% 0%)background-repeat: 배경의 반복을 지정(기본값: repeat)background-size: 배경의 크기를 지정(기본값: auto auto)