245 lines
5.9 KiB
Markdown
245 lines
5.9 KiB
Markdown
# 배경 및 색상
|
|
웹페이지의 디자인을 풍부하게 만들려면 배경(Background)과 색상(Color) 관련 속성을 잘 활용해야 해!
|
|
|
|
| 속성 | 설명 | 옵션 |
|
|
|---|---|---|
|
|
| background | 요소의 배경 | |
|
|
| color | 글자 색상을 지정 | |
|
|
| opacity | 요소의 투명도 | 0 ~ 1 |
|
|
|
|
## background
|
|
```css
|
|
.box {
|
|
background: lightblue url('background.jpg') no-repeat center/cover;
|
|
}
|
|
```
|
|
|
|
### background-color
|
|
요소의 배경 색을 지정
|
|
* 색상 값: red, #ff0000, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), transparent 등
|
|
```css
|
|
.box {
|
|
background-color: lightblue;
|
|
}
|
|
```
|
|
|
|
### background-image
|
|
배경에 이미지를 추가할 때 사용
|
|
```css
|
|
.box1 {
|
|
background-image: url('background.jpg');
|
|
}
|
|
.box2 {
|
|
background-image: linear-gradient(to right, red, blue);
|
|
}
|
|
```
|
|
|
|
### background-size
|
|
배경 이미지를 어떻게 크기 조정할지 결정
|
|
* auto : 원본 크기 유지 (기본값)
|
|
* cover : 요소를 덮도록 확대 (비율 유지)
|
|
* contain : 요소 안에 맞춤 (비율 유지)
|
|
* 100px 200px : 가로 100px, 세로 200px 크기로 조정
|
|
```css
|
|
.box {
|
|
background-image: url('background.jpg');
|
|
background-size: cover;
|
|
}
|
|
```
|
|
|
|
### background-position
|
|
배경 이미지가 요소 안에서 어디에 배치될지를 지정
|
|
* left top : 왼쪽 상단 (기본값)
|
|
* center center: 정중앙
|
|
* right bottom : 오른쪽 하단
|
|
* 50% 50% : 가로 50%, 세로 50% (중앙 정렬)
|
|
```css
|
|
.box {
|
|
background-image: url('background.jpg');
|
|
background-position: center;
|
|
}
|
|
```
|
|
|
|
### background-repeat
|
|
배경 이미지가 반복되는 방식 설정
|
|
* repeat : 가로와 세로로 반복 (기본값)
|
|
* repeat-x : 가로 방향으로만 반복
|
|
* repeat-y : 세로 방향으로만 반복
|
|
* no-repeat : 반복 없음
|
|
```css
|
|
.box {
|
|
background-image: url('pattern.png');
|
|
background-repeat: no-repeat;
|
|
}
|
|
```
|
|
|
|
### background-attachment
|
|
배경 이미지가 스크롤될 때 움직이는 방식 설정
|
|
* scroll : 스크롤 시 배경도 함께 이동 (기본값)
|
|
* fixed : 배경을 고정 (스크롤해도 움직이지 않음)
|
|
* local : 콘텐츠 안에서만 스크롤됨
|
|
```css
|
|
.box {
|
|
background-image: url('background.jpg');
|
|
background-attachment: fixed;
|
|
}
|
|
```
|
|
|
|
### background-clip
|
|
배경이 요소의 어느 영역까지 확장될지를 결정
|
|
* border-box : 테두리까지 확장 (기본값)
|
|
* padding-box : 패딩까지만 적용
|
|
* content-box : 내용 영역까지만 적용
|
|
```css
|
|
.box {
|
|
background-color: lightblue;
|
|
background-clip: padding-box;
|
|
}
|
|
```
|
|
|
|
### background-origin
|
|
배경 이미지가 시작되는 기준점을 결정
|
|
* border-box : 테두리를 기준으로 시작
|
|
* padding-box : 패딩을 기준으로 시작 (기본값)
|
|
* content-box : 내용 영역을 기준으로 시작
|
|
```css
|
|
.box {
|
|
background-image: url('background.jpg');
|
|
background-origin: content-box;
|
|
}
|
|
```
|
|
|
|
## color
|
|
글자 색상을 지정
|
|
```css
|
|
p {
|
|
color: red; /* 글자를 빨간색으로 설정 */
|
|
}
|
|
```
|
|
```css
|
|
p {
|
|
color: rgba(255, 0, 0, 0.5);
|
|
}
|
|
```
|
|
|
|
## opacity
|
|
요소 전체의 투명도를 조절
|
|
* 0 ~ 1 값 사용
|
|
```css
|
|
.box {
|
|
background-color: black;
|
|
opacity: 0.5;
|
|
}
|
|
```
|
|
> opacity를 사용하면 요소 전체가 투명해지므로,
|
|
배경만 투명하게 하려면 rgba()를 사용해야 함!
|
|
> ```css
|
|
> .box {
|
|
> background-color: rgba(0, 0, 0, 0.5); /* 배경만 투명 */
|
|
> }
|
|
> ```
|
|
|
|
## 색상 값
|
|
CSS에서는 다양한 방식으로 색상을 표현할 수 있어.
|
|
|
|
### 색상 이름 (Color Keywords)
|
|
CSS는 기본적으로 140개 이상의 색상 이름을 제공해.
|
|
red, blue, green, yellow 같은 이름을 사용하면 쉽게 색상을 지정할 수 있어.
|
|
|
|
* 기본 색상: red, blue, green, yellow, black, white
|
|
* 밝은 색상: lightblue, lightgreen, lightgray
|
|
* 어두운 색상: darkblue, darkred, darkgray
|
|
* 투명한 색상: transparent
|
|
|
|
```css
|
|
h1 {
|
|
color: red; /* 빨간색 */
|
|
}
|
|
p {
|
|
color: lightblue; /* 연한 파란색 */
|
|
}
|
|
```
|
|
### HEX 코드 (#RRGGBB)
|
|
HEX 코드(16진수)는 빨강(R), 초록(G), 파랑(B) 값을 조합하여 색상을 표현하는 방식이야.
|
|
#RRGGBB 형식으로 사용되며, 각 값은 00(0%) ~ FF(100%) 사이의 숫자로 표현돼.
|
|
```css
|
|
h1 {
|
|
color: #ff0000; /* 빨강 */
|
|
}
|
|
p {
|
|
color: #00ff00; /* 초록 */
|
|
}
|
|
span {
|
|
color: #0000ff; /* 파랑 */
|
|
}
|
|
```
|
|
> 세 자리 HEX 값은 자동으로 확장됨! (#F00 = #FF0000)
|
|
```css
|
|
h1 {
|
|
color: #f00; /* 빨강 */
|
|
}
|
|
```
|
|
### RGB (rgb(R, G, B))
|
|
RGB는 빨강(R), 초록(G), 파랑(B) 값을 0~255 범위의 숫자로 지정하는 방식이야.
|
|
16진수를 이해하기 어려울 때 더 직관적으로 사용할 수 있어!
|
|
|
|
```css
|
|
h1 {
|
|
color: rgb(255, 0, 0); /* 빨강 */
|
|
}
|
|
p {
|
|
color: rgb(0, 255, 0); /* 초록 */
|
|
}
|
|
span {
|
|
color: rgb(0, 0, 255); /* 파랑 */
|
|
}
|
|
```
|
|
### RGBA (rgba(R, G, B, A))
|
|
RGBA는 RGB 색상에 투명도(A: Alpha) 값을 추가한 형식이야.
|
|
A 값은 0(완전 투명) ~ 1(완전 불투명) 사이의 숫자로 설정돼.
|
|
```css
|
|
h1 {
|
|
color: rgba(255, 0, 0, 0.5); /* 반투명 빨강 */
|
|
}
|
|
p {
|
|
color: rgba(0, 255, 0, 0.3); /* 더 투명한 초록 */
|
|
}
|
|
span {
|
|
color: rgba(0, 0, 255, 0.8); /* 조금만 투명한 파랑 */
|
|
}
|
|
```
|
|
### HSL (hsl(H, S, L))
|
|
HSL은 색상(Hue), 채도(Saturation), 밝기(Lightness) 를 기준으로 색상을 지정하는 방식이야.
|
|
직관적으로 색상을 조절할 수 있는 장점이 있어!
|
|
* H (색상) : 0~360 (빨강: 0, 초록: 120, 파랑: 240)
|
|
* S (채도) : 0% (회색) ~ 100% (선명한 색)
|
|
* L (밝기) : 0% (검정) ~ 100% (흰색)
|
|
```css
|
|
h1 {
|
|
color: hsl(0, 100%, 50%); /* 빨강 */
|
|
}
|
|
p {
|
|
color: hsl(120, 100%, 50%); /* 초록 */
|
|
}
|
|
span {
|
|
color: hsl(240, 100%, 50%); /* 파랑 */
|
|
}
|
|
```
|
|
### HSLA (hsla(H, S, L, A))
|
|
HSLA는 HSL 색상에 투명도(A: Alpha) 값을 추가한 방식이야.
|
|
RGBA와 동일하게 투명도를 0(완전 투명) ~ 1(완전 불투명) 범위로 조절 가능!
|
|
```css
|
|
h1 {
|
|
color: hsla(0, 100%, 50%, 0.5); /* 반투명 빨강 */
|
|
}
|
|
p {
|
|
color: hsla(120, 100%, 50%, 0.3); /* 더 투명한 초록 */
|
|
}
|
|
span {
|
|
color: hsla(240, 100%, 50%, 0.8); /* 조금만 투명한 파랑 */
|
|
}
|
|
```
|
|
|
|
|
|
|