본 문서는 웹 페이지의 시각적 완성도를 높이는 핵심 CSS 속성인 불투명도(opacity)와 배경(background) 설정 방법을 다룬다.
기본적인 색상 및 이미지 적용부터 반복, 위치, 크기 제어, 그리고 복합적인 레이어링을 가능하게 하는 다중 배경 기법을 학습한다.
01. opacity
설명
요소 전체의 불투명도를 설정한다. 배경색뿐만 아니라 자식 요소와 텍스트 등 모든 콘텐츠의 투명도에 영향을 미친다.
| 값 | 설명 |
|---|---|
0 ~ 1 |
0은 완전 투명, 1은 완전 불투명 (예: 0.5는 반투명) |
배경색만 투명하게 하려면
rgba()나hsla()를 사용해야 한다. 자식 요소가 부모의opacity를 무시할 수 없다.
“`html
“`
“`html
“`
02. background
설명
배경과 관련된 여러 속성(color, image, repeat, attachment, position 등)을 한 번에 선언할 수 있는 축약 속성이다.
| 속성 | 설명 |
|---|---|
background-attachment |
배경 이미지의 스크롤 여부 설정 |
background-clip |
배경이 그려지는 영역 설정 |
background-color |
배경 색상 설정 |
background-image |
배경 이미지 설정 |
background-origin |
배경 이미지의 기준 위치 설정 |
background-position |
배경 이미지의 초기 위치 설정 |
background-repeat |
배경 이미지의 반복 방식 설정 |
background-size |
배경 이미지의 크기 설정 |
개별 속성을 선언하기 전에
background축약 속성으로 전체를 리셋(초기화)하는 패턴이 자주 쓰인다. 자세한 내용은 🔗MDN 참고. 단축 속성을 쓸 때 명시하지 않은 하위 속성은 모두 각자의 초기값으로 되돌려지므로 주의해야 한다. 또한background-size는background-position뒤에 슬래시(/)로 구분해 적어야 한다(예: center / cover).
| 속성 | 초기값 |
| ———————– | ————- |
| `background-image` | `none` |
| `background-position` | `0% 0%` |
| `background-size` | `auto auto` |
| `background-repeat` | `repeat` |
| `background-origin` | `padding-box` |
| `background-clip` | `border-box` |
| `background-attachment` | `scroll` |
| `background-color` | `transparent` |
03. background-color, background-image
설명
단일 요소에 배경색과 배경 이미지를 동시에 지정할 수 있다. 이미지가 로드되지 않거나 투명한 영역이 있을 때 배경색이 표시된다.
| 값 | 설명 |
|---|---|
color |
유효한 CSS 색상 값 |
url('경로') |
배경으로 사용할 이미지의 경로 |
이미지와 색상을 함께 선언하면 이미지가 항상 색상 위에(앞에) 렌더링된다.
“`html
어니스트…
헤밍웨이가 한때 좌익의 편에 있었다는 것은 몰랐었다. 그는 인간이 위대한 것은 위험을 감수한다는 데 있다고 했다. 사자도 호랑이도 위험을 감수하겠지만 왠지 그 말이 마음에 들었다. 글을 쓰지 못하는 그의 손을 보며 아이러니하게도 쓸게 너무 많은 나는 행복해야겠구나… 싶었다.
“`
“`html
어니스트…
헤밍웨이가 한때 좌익의 편에 있었다는 것은 몰랐었다. 그는 인간이 위대한
것은 위험을 감수한다는 데 있다고 했다. 사자도 호랑이도 위험을 감수하겠지만
왠지 그 말이 마음에 들었다. 글을 쓰지 못하는 그의 손을 보며 아이러니하게도
쓸게 너무 많은 나는 행복해야겠구나… 싶었다.
“`
04. background-repeat
설명
배경 이미지가 요소의 크기보다 작을 때 어떻게 반복될지 설정한다.
| 값 | 설명 |
|---|---|
repeat |
기본값. 수평 및 수직 방향으로 모두 반복 |
repeat-x |
수평 방향으로만 반복 |
repeat-y |
수직 방향으로만 반복 |
no-repeat |
반복하지 않음 (한 번만 표시) |
space / round |
여백을 두거나 크기를 조절하여 잘리지 않게 반복 |
아이콘이나 특정 위치의 장식용 이미지를 넣을 때는 주로
no-repeat을 사용한다. 또한 두 값을 써 가로·세로 축을 따로 지정할 수도 있다(예: 'repeat-x'와 같은 표현을 'repeat no-repeat'처럼 풀어 쓰면 가로로만 반복).
“`html
장미를 닮은 꽃
원예업도 이제는 큰 사업으로 확장되는 경우가 많다. 작은 화분부터 다육 식물에 이르기까지 그 종류도 다양하지만 원래 존재하던 품종만 고집하지 않고 많은 개량종들을 선보이고 있기 때문이다. 이제 원예업은 유전자 공학과도 밀접한 관련을 갖게 되었다.
“`
“`html
장미를 닮은 꽃
원예업도 이제는 큰 사업으로 확장되는 경우가
많다. 작은 화분부터 다육 식물에 이르기까지 그 종류도 다양하지만 원래
존재하던 품종만 고집하지 않고 많은 개량종들을 선보이고 있기 때문이다. 이제
원예업은 유전자 공학과도 밀접한 관련을 갖게 되었다.
“`
05. background-position
설명
배경 이미지의 초기 시작 위치를 지정한다. 키워드, 백분율(%), 길이(px 등) 단위를 조합하여 x축(가로)과 y축(세로) 위치를 정한다.
| 값 | 설명 |
|---|---|
키워드 |
left, right, top, bottom, center |
길이 / % |
0 0(좌상단), 50% 50%(중앙 정렬), 10px 20px |
값이 하나만 주어지면 나머지 한 값은
center(또는 50%)로 간주된다. 길이나 백분율을 쓸 때는 첫 번째가 x(가로), 두 번째가 y(세로) 순서이다. 반면 left, top 같은 키워드는 순서와 무관하게 쓸 수 있으며(top left·left top 동일), 'right 20px bottom 10px'처럼 키워드와 오프셋을 짝지은 4값 구문도 쓸 수 있다.
“`html
최근 게시물
- PC 사양 알아보기
- 미니타워와 미들타워의 차이
- 어깨의 통증과 발목의 통증
- PC 사양 알아보기
- 미니타워와 미들타워의 차이
- 어깨의 통증과 발목의 통증
“`
“`html
패션의 완성은 자연이다.
멋지고도 순수한 자연만큼 패셔너블한게 있을까!
강렬하고 화려해서가 아니라 적절한 시기와 적절한 장소, 그리고 풍요로운 볼거리를 제공해주고 있지 않나.
조심스럽게 살펴보면 자연이 보여주고 있는 모든것이 옷이고 장신구, 신발들이다..
최고의 패션, 자연을 팝니다...
```
```html
패션의 완성은 자연이다.
멋지고도 순수한 자연만큼 패셔너블한게 있을까!
강렬하고 화려해서가 아니라 적절한 시기와 적절한 장소, 그리고 풍요로운 볼거리를 제공해주고 있지 않나.
조심스럽게 살펴보면 자연이 보여주고 있는 모든것이 옷이고 장신구, 신발들이다..
최고의 패션, 자연을 팝니다...
```
07. background-size
설명
배경 이미지의 출력 크기를 지정한다. 이미지의 원래 크기를 유지하거나 비율을 맞춰 요소를 덮도록 조절할 수 있다.
| 값 | 설명 |
|---|---|
auto |
원본 크기 유지 (기본값) |
길이 / % |
지정한 크기 또는 요소 크기 대비 백분율 (너비 높이 순서) |
cover |
비율을 유지하며 요소를 완전히 덮음 (잘릴 수 있음) |
contain |
비율을 유지하며 요소 안에 온전히 들어감 (여백이 생길 수 있음) |
반응형 웹 디자인에서 전체 화면 배경을 구현할 때
background-size: cover가 핵심적인 역할을 한다.
```html
```
```html
```
08. background-origin
설명
배경 이미지의 렌더링이 시작되는 기준 영역(원점)을 지정한다. box-sizing과 유사한 영역 개념을 사용한다.
| 값 | 설명 |
|---|---|
padding-box |
기본값. 테두리 안쪽(패딩 영역 포함)부터 배경 시작 |
border-box |
테두리 영역부터 배경 시작 (테두리 아래로 이미지가 깔림) |
content-box |
콘텐츠 영역(패딩 안쪽)부터 배경 시작 |
이 속성은
background-attachment가fixed인 경우에는 무시된다.
```html
```
```html
```
09. background-clip
설명
요소의 배경(색상 또는 이미지)이 렌더링될 실제 영역을 자르는(clip) 속성이다. background-origin과 값은 같지만 적용 방식이 다르다.
| 값 | 설명 |
|---|---|
border-box |
기본값. 테두리 영역의 바깥쪽 가장자리까지 배경 표시 |
padding-box |
패딩 영역의 바깥쪽 가장자리까지 배경 표시 (테두리엔 배경 없음) |
content-box |
콘텐츠 영역에만 배경 표시 (패딩과 테두리엔 배경 없음) |
text |
텍스트의 형태(전경)로 배경을 클리핑. 투명 글자와 조합하여 텍스트에 이미지를 입힘 |
텍스트에 배경을 입히는
background-clip: text는 이제 주요 모던 브라우저에서 표준으로 지원되지만, 구형 브라우저 호환을 위해-webkit-을 함께 적기도 한다. CSS Backgrounds Level 4에서는 테두리가 그려지는 영역에만 배경을 남기는border-area값도 추가되었다.
```html
```
```html
```
10. sprite image
설명
웹 페이지의 성능 향상을 위해 여러 개의 작은 이미지를 하나의 큰 이미지 파일(스프라이트 시트)로 병합한 후, background-position을 조절하여 원하는 부분만 보여주는 기법이다.
| 값 | 설명 |
|---|---|
background-image |
공통 스프라이트 시트 이미지 선언 |
background-position |
스프라이트 내에서 보여줄 개별 아이콘의 좌표 이동 |
브라우저의 HTTP 요청 횟수를 줄여 로딩 속도를 크게 개선할 수 있어 실무에서 널리 쓰이는 최적화 기법이다. 다만 HTTP/2 이후에는 여러 요청을 한 연결에서 처리하므로 이미지를 합치는 이점이 과거보다 줄었으며, 오늘날에는 아이콘 용도라면 SVG 스프라이트나 아이콘 폰트, 인라인 SVG를 대안으로 쓰기도 한다.
```html
```
```html
```
11. gradient
설명
두 가지 이상의 색상이 점진적으로 부드럽게 변하는 효과를 생성한다. 이미지 대신 CSS만으로 그레이디언트를 만들어 background-image 속성에 적용한다.
| 값 | 설명 |
|---|---|
linear-gradient() |
선형 그레이디언트. 지정된 각도나 방향을 따라 색상이 변함 |
radial-gradient() |
원형/타원형 그레이디언트. 중심점에서 바깥쪽으로 색상이 퍼짐 |
repeating-... |
그레이디언트 패턴을 반복하여 채움 |
구형 브라우저 호환성을 위해 벤더 프리픽스(
-webkit-,-moz-등)를 함께 사용하는 경우가 있다..g1과.g10의 첫 줄 선언은 그레이디언트 미지원 브라우저용 폴백(fallback)이므로 의도된 중복이다. 선형·원형 외에 각도를 따라 회전하는 형태로 색이 돌아가는conic-gradient도 있으며, 각 색상 뒤에 위치값(예: red 0%, yellow 50%)을 붙여 색이 바뀌는 지점을 세밀하게 제어할 수 있다.
```html
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
```
```html
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
It's impossible not only starting good but also keeping it firm!!
```
12. radial-gradient
설명
특정 중심점에서 바깥쪽으로 퍼져나가는 원형(circle) 또는 타원형(ellipse) 그레이디언트를 생성한다. 형태, 크기 조절 키워드, 시작점 위치를 세밀하게 제어할 수 있다.
| 값 | 설명 |
|---|---|
closest-side |
그레이디언트 끝 모양이 중앙에서 가장 가까운 변에 닿음 |
closest-corner |
그레이디언트 끝 모양이 중앙에서 가장 가까운 모서리에 닿음 |
farthest-side |
그레이디언트 끝 모양이 중앙에서 가장 먼 변에 닿음 |
farthest-corner |
기본값. 그레이디언트 끝 모양이 중앙에서 가장 먼 모서리에 닿음 |
at x축 y축형태로 중심점의 위치를 %나 px 단위로 임의 변경할 수 있다. 자세한 내용은 🔗MDN 참고.
```html
```
```html
```
13. multiple-background
설명
하나의 요소에 여러 개의 배경 이미지나 그레이디언트를 쉼표로 구분하여 동시에 적용할 수 있다.
| 특징 | 설명 |
|---|---|
| 렌더링 순서 | 먼저 선언된 이미지일수록 화면의 앞쪽(z-index가 높은 것처럼)에 배치됨 |
| 개별 제어 | 각 이미지마다 background-position, background-repeat 등을 쉼표로 구분해 개별 설정 가능 |
다중 배경을 활용하면 HTML 요소를 추가하지 않고도 복잡한 시각적 레이어링을 구현할 수 있다.
```html
It's impossible not only starting good but also keeping it firm!!
```
```html
It's impossible not only starting good but also keeping it firm!!
```
14. image-set (반응형 배경)
설명
화면의 픽셀 밀도(1배율/2배율)나 지원 포맷에 따라 브라우저가 가장 알맞은 배경 이미지를 스스로 고르게 한다. HTML <img>의 srcset을 CSS 배경에 적용한 것으로 보면 된다. CSS Images Level 4 사양이며 2023년부터 모든 모던 브라우저에서 표준으로 쓸 수 있다.
| 값 | 설명 |
|---|---|
url() 1x |
표준 해상도(1배율) 디스플레이용 이미지 |
url() 2x |
고밀도(레티나, 2배율) 디스플레이용 이미지 |
type("image/형식") |
이미지 포맷 지정. 미지원 포맷은 건너뛰고 다음 후보 선택 |
구형 브라우저는
image-set()을 모른 채 줄 전체를 무시하므로, 평범한url()선언을 폴백으로 먼저 깔고@supports로 감싸는 패턴이 안전하다. 최신 포맷(avif, webp)을 앞에 두면 지원 브라우저가 더 가벼운 파일을 받는다.
```html
```
15. background-blend-mode
설명
한 요소 안의 여러 배경 이미지끼리, 또는 배경 이미지와 배경색을 어떻게 합성(blend)할지 정한다. 포토샵의 레이어 혼합 모드와 같은 개념이다. 다중 배경(13번)과 함께 써야 의미가 있다.
| 값 | 설명 |
|---|---|
normal |
기본값. 합성하지 않음 |
multiply |
곱하기. 겹친 부분이 어두워짐 |
screen |
스크린. 겹친 부분이 밝아짐 |
overlay |
오버레이. 대비를 강조 |
difference |
색 차이. 반전에 가까운 효과 |
luminosity 등 |
그 외 합성 모드 (총 16종) |
사진에 단색을 곱해 색조를 입히는 듀오톤(duotone) 효과에 자주 쓴다. 비슷한 결과를
opacity로 흉내 내면 텍스트까지 흐려지지만, 이 속성은 배경에만 적용되어 글자는 또렷하게 유지된다.
```html
```
16. mask
설명
이미지·그레이디언트·SVG를 형틀(스텐실)처럼 사용해 요소의 일부를 가린다. 마스크 소스에서 불투명(흰색·알파가 있는) 부분은 보이고, 투명한 부분은 잘려 사라진다. 속성 문법은 background-* 속성군과 거의 같아 함께 익히기 좋다.
브라우저 지원은 CSS Masking Level 1 표준으로, 프리픽스 없이 Chrome·Edge 120+, Firefox 53+, Safari 15.4+에서 동작한다. 다만 구형 사파리·웹뷰 호환을 위해 -webkit-mask-*를 함께 적는 패턴이 아직 실무 권장사항이다.
| 속성 | 설명 |
|---|---|
mask-image |
마스크로 쓸 이미지·그레이디언트·SVG 지정 |
mask-mode |
마스크 해석 방식 (alpha, luminance) |
mask-repeat |
반복 방식 (background-repeat와 동일) |
mask-position |
마스크 위치 |
mask-size |
마스크 크기 (cover, contain 등) |
mask-origin |
마스크 기준 영역 |
mask-clip |
마스크 적용 영역 |
mask-composite |
여러 마스크 합성 (add, subtract, intersect, exclude) |
clip-path는 경로(도형)로 잘라내고,mask는 투명도(알파)로 가린다는 점이 다르다. 부드러운 페이드가 필요하면mask, 또렷한 도형 컷이 필요하면clip-path를 쓴다.mask-composite는 표준 값(exclude)과 webkit 구문 값(xor)이 달라 둘을 함께 적을 때 주의한다.
```html
```
```html
```
```html
```
17. 형성퀴즈
설명
앞서 배운 속성들을 종합적으로 활용하여 시안과 동일한 레이아웃과 스타일을 구현하는 실습 문제이다.
| 요구사항 | 설명 |
|---|---|
| 제한사항 | 제공된 HTML 문서는 수정하지 않고 오직 CSS 파일만을 편집할 것 |
| 리소스 | 예제와 동일한 이미지를 활용하여 배경, 불투명도 등을 적용 |
배운 CSS 속성들을 결합하여 실전 퍼블리싱 능력을 기른다.
리소스파일
```html
<body>
<div>
<p class="textBox">
Freedom is not worth having
if it does not include the freedom to make mistakes.
</p>
<p class="people">- Mahatma Gandhi - </p>
</div>
</body>
```
