배경(background)이란?
▶ 배경(background)이란 색상, 이미지, 반복여부, 위치, 고정여부 등의 기술적인 부분을 시각적 요소로 표현한 것을 말합니다. CSS에서는 일반적으로 색상, 이미지, 그라디언트 등을 사용하여 요소를 꾸미는 데 사용됩니다.
01. background-color
▶ 요소의 배경 색상을 지정하는 속성으로 아래와 같은 형식처럼 사용합니다.
1
| background-color: #abcdef;
|
| 속성 값 | 속성 설명 |
|---|
| 색상값 | 색상명, HEX값, RGB값, HSL값, RGBA값, HSLA값 |
| transparent | 투명 (기본값) |
02. background-image
▶ 요소의 배경에 들어갈 이미지를 지정하는 속성으로 아래와 같은 형식처럼 사용합니다.
용량이 클 경우 속도 저하의 원인이 될 수 있기 때문에 해상도가 큰 이미지는 꼭 필요한 상황이 아니면 지양하는 것이 좋습니다.
1
| background-image: url(img/bgimg.png);
|
| 속성 값 | 속성 설명 |
|---|
| url(~) | 이미지의 경로와 파일명을 기술함 |
| none | 배경 이미지 없음 (기본값) |
03. background-repeat
▶ 배경 이미지를 어떻게 반복시킬지 지정하는 속성으로 아래와 같은 형식처럼 사용합니다.
1
| background-repeat: no-repeat;
|
| 속성 값 | 속성 설명 |
|---|
| repeat | 배경 이미지를 가로, 세로 반복하여 배치 (기본값) |
| no-repeat | 배경 이미지를 한 개만 배치 |
| repeat-x | 배경 이미지를 가로로만 반복 배치 |
| repeat-y | 배경 이미지를 세로로만 반복 배치 |
| space | 배경 이미지를 반복하다가 마지막 이미지가 가로로 잘리지 않도록 배치하기 위해 이미지 사이가 벌어짐 |
| round | 배경 이미지를 반복하다가 마지막 이미지가 세로로 잘리지 않도록 배치하기 위해 이미지가 납작하게 찌그러짐 |
▶ 만약 배경 이미지가 요소 안에 있는 콘텐츠들과 겹치지 않도록 하고 싶을 경우 padding속성과 함께 사용하면 됩니다.
※ padding: 100px -> 상하, 좌우 모두 100px 만큼의 여백을 두라는 의미
1
2
| padding: 100px
background-repeat: no-repeat;
|
04. background-position
▶ 배경 이미지를 원하는 위치로 옮겨주는 속성으로 아래와 같은 형식처럼 사용합니다.
한 개만 배치할 경우 기본적으로는 좌측 상단에 나타나는데 background-position을 이용하면 가로, 세로 위치 지정이 가능합니다.
1
| background-position: 50% top;
|
| 위치 | 속성 설명 |
|---|
| 가로 위치 | left, right, center, px값 등 (기본값: left) |
| 세로 위치 | top, bottom, center(middle아님), px값, %값 등 (기본값: top) |
▶ 만약 배경 이미지가 요소 안에 있는 콘텐츠들과 겹치지 않도록 하고 싶을 경우 padding속성과 함께 사용하면 됩니다.
※ padding: 100px -> 상하, 좌우 모두 100px 만큼의 여백을 두라는 의미
1
2
| padding: 100px
background-position: 50% top;
|
05. background-attachment
▶ 배경 이미지를 요소 내에 고정시킬지, 화면에 고정시킬지 지정하는 속성으로 아래와 같은 형식처럼 사용합니다.
1
| background-attachment: fixed;
|
| 속성 값 | 속성 설명 |
|---|
| scroll | 배경 이미지가 화면을 스크롤하면 따라감 (기본값) |
| fixed | 배경 이미지가 화면을 스크롤해도 따라가지 않음 |
06. background-size
▶ CSS3에서 배경 이미지의 크기를 변경하는 속성으로 아래와 같은 형식처럼 사용합니다.
1
| background-size: 120px(=가로) 90px(=세로);
|
| 속성 값 | 속성 설명 |
|---|
| background-size: 120px 90px; | 배경 이미지의 가로 크기 80px,세로 크기 60px라는 의미 |
| background-size: 50% 100%; | 배경 이미지의 가로 크기 50%,세로 크기 100%라는 의미 |
| background-size: auto; | 배경 이미지를 원래 크기로 배치하고 남는 공간은 비움 |
| background-size: contain; | 배경 이미지를 잘리지 않도록 배치하고 남는 공간은 비움 |
| background-size: cover; | 배경 이미지를 빈 공간없이 요소에 꽉 채우고 나머지는 잘림 |
07. background-origin
▶ CSS3에서 배경 이미지의 시작점을 정하는 속성으로 아래와 같은 형식처럼 사용합니다.
1
| background-origin: border-box;
|
| 속성 값 | 속성 설명 |
|---|
| border-box | 배경 이미지가 테두리 좌측 상단 모퉁이에서 시작함 |
| padding-box | 배경 이미지가 안여백의 좌측 상단 모퉁이에서 시작함 (기본값) |
| content-box | 배경 이미지가 콘텐츠의 좌측 상단부터 시작함 |
08. background-clip
▶ CSS3에서 배경의 영역을 지정하는 속성으로 아래와 같은 형식처럼 사용합니다.
1
| background-clip: border-box;
|
| 속성 값 | 속성 설명 |
|---|
| border-box | 배경이 테두리를 포함한 영역에 배치 (기본값) |
| padding-box | 배경이 테두리를 제외한 안쪽 영역에 배치 |
| content-box | 배경이 안여백을 제외한 콘텐츠 영역에만 배치 |
09. Image Sprit
▶ 이미지가 많아지면 속도가 느려지는 단점을 보완하기 위해 사용하는 속성으로 아래와 같은 형식처럼 사용합니다.
Image Sprit은 사용하는 여러 이미지들을 하나로 저장한 후 background-position을 이용하여 잘라 사용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| .nav {
display: flex;
}
.nav a {
display: block;
width: 40px;
height: 40px;
background-image: url('sprites.png');
}
.home {
background-position: 0 0; /* 스프라이트 이미지 내에서 홈 아이콘의 위치 */
}
.about {
background-position: -40px 0; /* 스프라이트 이미지 내에서 about 아이콘의 위치 */
}
.contact {
background-position: -80px 0; /* 스프라이트 이미지 내에서 contact 아이콘의 위치 */
}
|
🔔 위의 코드 예시는 sprites.png라는 이미지 스프라이트를 사용하여 네비게이션 메뉴 아이콘을 표현하고 있습니다.
각 아이콘은 background-position 속성을 사용하여 스프라이트 이미지 내에서의 위치를 지정하고 있으며, 각각의 링크 요소에는 스프라이트 이미지 내에서의 위치를 지정하고 있습니다.
10. 배경에 gradient 적용하기
▶ CSS3에서는 배경에 gradient를 적용하여 다양한 효과를 줄 수 있으며, 형식에는 여러개가 있습니다.
아래는 예시들입니다.
① 기본형 : 기본형은 위에서 아래로 색상을 채워주며, 세로 방향입니다.
1
| background: linear-gradient(red, yellow, green);
|
② to top : 색상값 앞에 ‘to top’을 사용하면 시작위치가 아래에서 위로 변경됩니다.
1
| background: linear-gradient(to top, red, yellow, green);
|
③ to right / to left : 기본형인 세로 방향을 가로 방향으로 바꿀 경우 색상값 앞에 to right나 to left를 사용합니다.
1
| background: linear-gradient(to right / to left, red, yellow, green);
|
④ to bottom right : 사선 방향으로 변경할 경우 색상값 앞에 사용하면 되며, 좌측 상단->우측 하단 방향으로 책상이 채워집니다.
1
| background: linear-gradient(to bottom right, red, yellow, green);
|
⑤ edg : 각도를 변경할 경우 edg를 사용하여 원하는 각도 값을 사용합니다. 이 때 각도는 아래가 0°이며, 시계방향으로 돌아가며 채워집니다.
1
| background: linear-gradient(200edg, red, yellow, green);
|
⑥ 패턴 반복 : 일정한 패턴의 gradient를 반복시킬 경우 repeating-linear-gradient를 사용합니다.
1
| background: repeating-linear-gradient(red, yellow, green);
|
⑦ 타원형 : radial-gradient를 사용하면 원형으로 변경됩니다. 기본형은 타원형이며, 안쪽에서 바깥으로 색상이 채워집니다.
1
| background: radial-gradient(red, yellow, green);
|
⑧ 정원형 : 색상값 앞에 circle을 사용하면 타원형이 아닌 정원형으로 변경됩니다.
1
| background: radial-gradient(circle, red, yellow, green);
|
⑨ 원형 패턴 반복 : 일정한 원형 패턴의 gradient를 반복시킬 경우 repeating-radial-gradient를 사용합니다.
1
| repeating-radial-gradient(red, yellow, green);
|
⑩ 색상 영역 변경 : 색상 옆에 %를 붙이면 원하는 영역으로 변경이 가능합니다.
1
| background: radial-gradient(red 5%, yellow 10%, green 15%);
|
11. multiple background 기능
▶ CSS3에서는 여러 개의 배경 이미지를 동시에 적용할 수 있습니다.
배경 이미지의 위치, 반복 여부 등 개수만큼 지정이 가능하며 이 경우 먼저 기재된 이미지가 가장 앞에 배치되고 뒤로 갈수록 바닥에 배치됩니다.
1
2
3
4
5
6
7
| .container {
height: 400px;
background-image: url('background1.jpg'), url('background2.jpg'); /* 두 개의 배경 이미지를 설정 */
background-size: cover, contain; /* 각 배경 이미지의 크기 설정 */
background-position: center, top right; /* 각 배경 이미지의 위치 설정 */
background-repeat: no-repeat; /* 배경 이미지 반복 설정 */
}
|
🔔 위의 코드 예시는 .container 요소에 두 개의 배경 이미지를 설정하고 있습니다. 첫 번째 배경은 background1.jpg이고, 두 번째 배경은 background2.jpg입니다.
각 배경 이미지의 크기와 위치는 background-size, background-position 속성을 사용하여 설정하였으며, background-repeat: no-repeat;로 배경 이미지의 반복을 막았습니다.
