본 문서는 웹 페이지의 시각적 완성도를 높이는 핵심 CSS 속성인 불투명도(opacity)와 배경(background) 설정 방법을 다룬다.
기본적인 색상 및 이미지 적용부터 반복, 위치, 크기 제어, 그리고 복합적인 레이어링을 가능하게 하는 다중 배경 기법을 학습한다.
01. opacity
설명
요소 전체의 불투명도를 설정한다. 배경색뿐만 아니라 자식 요소와 텍스트 등 모든 콘텐츠의 투명도에 영향을 미친다.
| 값 | 설명 |
|---|---|
0 ~ 1 |
0은 완전 투명, 1은 완전 불투명 (예: 0.5는 반투명) |
배경색만 투명하게 하려면
rgba()나hsla()를 사용해야 한다. 자식 요소가 부모의opacity를 무시할 수 없다.

시작 ex2-39-1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>opacity</title>
<style type = "text/css">
</style>
</head>
<body>
<div class="light">겨우 보이는 글</div>
<div class="medium">좀 더 잘 보이는 글</div>
<div class="heavy">쉽게 보이는 글</div>
</body>
</html>
완료 ex2-39-1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>opacity</title>
<style type="text/css">
body {
background-image: url(img/bg_grid.gif);
}
div {
background-color: yellow;
}
.light {
opacity: 0.2;
}
.medium {
background-color: rgba(255, 255, 0, 0.2);
}
.heavy {
opacity: 0.9;
}
</style>
</head>
<body>
<div class="light">겨우 보이는 글</div>
<div class="medium">좀 더 잘 보이는 글</div>
<div class="heavy">쉽게 보이는 글</div>
</body>
</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('경로') |
배경으로 사용할 이미지의 경로 |
이미지와 색상을 함께 선언하면 이미지가 항상 색상 위에(앞에) 렌더링된다.

시작 ex2-39.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지</title>
<style type="text/css">
</style>
</head>
<body>
<p>
어니스트... <br>
헤밍웨이가 한때 좌익의 편에 있었다는 것은 몰랐었다. 그는 인간이 위대한 것은 위험을 감수한다는 데 있다고 했다. 사자도 호랑이도 위험을 감수하겠지만 왠지 그 말이 마음에 들었다. 글을 쓰지 못하는 그의 손을 보며 아이러니하게도 쓸게 너무 많은 나는 행복해야겠구나... 싶었다.
</p>
</body>
</html>
완료 ex2-39.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>배경이미지</title>
<style type="text/css">
p {
width: 500px;
padding: 20px;
background-color: aliceblue;
background-image: url('img/bgimg.png');
}
</style>
</head>
<body>
<p>
어니스트... <br />
헤밍웨이가 한때 좌익의 편에 있었다는 것은 몰랐었다. 그는 인간이 위대한
것은 위험을 감수한다는 데 있다고 했다. 사자도 호랑이도 위험을 감수하겠지만
왠지 그 말이 마음에 들었다. 글을 쓰지 못하는 그의 손을 보며 아이러니하게도
쓸게 너무 많은 나는 행복해야겠구나... 싶었다.
</p>
</body>
</html>
04. background-repeat
설명
배경 이미지가 요소의 크기보다 작을 때 어떻게 반복될지 설정한다.
| 값 | 설명 |
|---|---|
repeat |
기본값. 수평 및 수직 방향으로 모두 반복 |
repeat-x |
수평 방향으로만 반복 |
repeat-y |
수직 방향으로만 반복 |
no-repeat |
반복하지 않음 (한 번만 표시) |
space / round |
여백을 두거나 크기를 조절하여 잘리지 않게 반복 |
아이콘이나 특정 위치의 장식용 이미지를 넣을 때는 주로
no-repeat을 사용한다. 또한 두 값을 써 가로·세로 축을 따로 지정할 수도 있다(예: 'repeat-x'와 같은 표현을 'repeat no-repeat'처럼 풀어 쓰면 가로로만 반복).

시작 ex2-40.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지의 반복여부</title>
<style type="text/css">
</style>
</head>
<body>
<p>
장미를 닮은 꽃<br>
원예업도 이제는 큰 사업으로 확장되는 경우가 많다. 작은 화분부터 다육 식물에 이르기까지 그 종류도 다양하지만 원래 존재하던 품종만 고집하지 않고 많은 개량종들을 선보이고 있기 때문이다. 이제 원예업은 유전자 공학과도 밀접한 관련을 갖게 되었다.
</p>
</body>
</html>
완료 ex2-40.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>배경이미지의 반복여부</title>
<style type="text/css">
p {
padding: 100px;
background-color: antiquewhite;
background-image: url(img/bg_flower.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>
장미를 닮은 꽃<br />원예업도 이제는 큰 사업으로 확장되는 경우가
많다. 작은 화분부터 다육 식물에 이르기까지 그 종류도 다양하지만 원래
존재하던 품종만 고집하지 않고 많은 개량종들을 선보이고 있기 때문이다. 이제
원예업은 유전자 공학과도 밀접한 관련을 갖게 되었다.
</p>
</body>
</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값 구문도 쓸 수 있다.


시작 ex2-41.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지의 위치</title>
<style type="text/css">
</style>
</head>
<body>
<h3>최근 게시물</h3>
<ul>
<li>PC 사양 알아보기</li>
<li>미니타워와 미들타워의 차이</li>
<li>어깨의 통증과 발목의 통증</li>
</ul>
<ul>
<li>PC 사양 알아보기</li>
<li>미니타워와 미들타워의 차이</li>
<li>어깨의 통증과 발목의 통증</li>
</ul>
</body>
</html>
완료 ex2-41.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url('./img/bg_linepttn.png'), url('./img/bg_ar.png');
background-repeat: repeat-y, no-repeat;
background-position: 0 100%, 100% 0%;
}
ul {
list-style: none;
}
.pc1 li {
background-image: url('./img/bg_ar.png');
background-repeat: no-repeat;
background-position-y: 50%;
background-position-x: 0%;
padding: 20px;
text-indent: 20px;
}
.pc1,
.pc2 {
background-image: url('./img/bg_linepttn.png');
background-repeat: repeat-x;
background-position: 0 100%;
}
.pc2 li {
background-image: url('./img/bg_bullet.png');
background-repeat: no-repeat;
/* 같은 위치를 표현하는 다른 방식 — 실습 때 하나씩 주석 해제해 비교 */
/* background-position: 0 50%; */
/* background-position: left center; */
background-position: left 50%;
padding: 20px;
text-indent: 20px;
}
</style>
</head>
<body>
<h1>background-position</h1>
<h3>최근 게시물</h3>
<ul class="pc1">
<li>PC 사양 알아보기</li>
<li>미니타워와 미들타워의 차이</li>
<li>어깨의 통증과 발목의 통증</li>
</ul>
<ul class="pc2">
<li>PC 사양 알아보기</li>
<li>미니타워와 미들타워의 차이</li>
<li>어깨의 통증과 발목의 통증</li>
</ul>
</body>
</html>
06. background-attachment
설명
배경 이미지가 화면을 스크롤할 때 콘텐츠와 함께 스크롤될지, 아니면 뷰포트(또는 요소)에 고정될지 결정한다. 패럴랙스(Parallax) 스크롤링 효과를 낼 때 자주 사용된다.
| 값 | 설명 |
|---|---|
scroll |
기본값. 배경이 요소 자체를 기준으로 고정되며, 페이지 스크롤 시 함께 이동 |
fixed |
배경이 뷰포트(브라우저 창)를 기준으로 고정. 페이지를 스크롤해도 움직이지 않음 |
local |
배경이 요소의 콘텐츠에 고정되어, 요소 내부를 스크롤할 때 함께 이동 |
iOS Safari에서는
fixed값이 성능을 이유로 한 WebKit의 의도적 설계 결정(by design)에 따라 비활성화되어 있어 사실상 동작하지 않는다. 값 자체는 인식되지만 실제 효과가 없으며, 2026년 현재도 수정되지 않고 있다.

시작 ex2-42.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지 고정</title>
<style type="text/css">
</style>
</head>
<body>
<p>패션의 완성은 자연이다.<br>멋지고도 순수한 자연만큼 패셔너블한게 있을까! <br>강렬하고 화려해서가 아니라 적절한 시기와 적절한 장소, 그리고 풍요로운 볼거리를 제공해주고 있지 않나.<br>
조심스럽게 살펴보면 자연이 보여주고 있는 모든것이 옷이고 장신구, 신발들이다..</p>
<p class="bg_fixed"></p>
<p class="btm">최고의 패션, 자연을 팝니다... </p>
</body>
</html>
완료 ex2-42.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지 고정</title>
<style type="text/css">
p { padding: 20px; }
.bg_fixed {
min-height: 200px;
background-image: url(img/bg_fixed.png);
background-position: center;
background-attachment:fixed;
}
.btm {
min-height:200px;
background: #595;
}
</style>
</head>
<body>
<p>패션의 완성은 자연이다.<br>멋지고도 순수한 자연만큼 패셔너블한게 있을까! <br>강렬하고 화려해서가 아니라 적절한 시기와 적절한 장소, 그리고 풍요로운 볼거리를 제공해주고 있지 않나.<br>
조심스럽게 살펴보면 자연이 보여주고 있는 모든것이 옷이고 장신구, 신발들이다..</p>
<p class="bg_fixed"></p>
<p class="btm">최고의 패션, 자연을 팝니다... </p>
</body>
</html>
07. background-size
설명
배경 이미지의 출력 크기를 지정한다. 이미지의 원래 크기를 유지하거나 비율을 맞춰 요소를 덮도록 조절할 수 있다.
| 값 | 설명 |
|---|---|
auto |
원본 크기 유지 (기본값) |
길이 / % |
지정한 크기 또는 요소 크기 대비 백분율 (너비 높이 순서) |
cover |
비율을 유지하며 요소를 완전히 덮음 (잘릴 수 있음) |
contain |
비율을 유지하며 요소 안에 온전히 들어감 (여백이 생길 수 있음) |
반응형 웹 디자인에서 전체 화면 배경을 구현할 때
background-size: cover가 핵심적인 역할을 한다.

시작 ex2-43.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지의 크기</title>
<style type="text/css">
</style>
</head>
<body>
<div class="who who1"></div>
<div class="who who2"></div>
<div class="who who3"></div>
<div class="who who4"></div>
<div class="who who5"></div>
</body>
</html>
완료 ex2-43.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>배경이미지의 크기</title>
<style type="text/css">
.who {
height: 150px;
margin-bottom: 10px;
background: #67758e url("img/bg_size.png") no-repeat;
}
/* width height */
.who1 {
background-size: 100px 200px;
background-position: center;
}
.who2 {
/* 하나만 쓰면 width에 적용 height는 자동 */
background-size: 50px;
}
.who3 {
background-size: 80% 150%;
}
.who4 {
/* cover 식탁커버 */
background-size: cover;
}
.who5 {
height: 500px;
/* 컨테이너 */
background-size: contain;
}
</style>
</head>
<body>
<div class="who who1"></div>
<div class="who who2"></div>
<div class="who who3"></div>
<div class="who who4"></div>
<div class="who who5"></div>
</body>
</html>
08. background-origin
설명
배경 이미지의 렌더링이 시작되는 기준 영역(원점)을 지정한다. box-sizing과 유사한 영역 개념을 사용한다.
| 값 | 설명 |
|---|---|
padding-box |
기본값. 테두리 안쪽(패딩 영역 포함)부터 배경 시작 |
border-box |
테두리 영역부터 배경 시작 (테두리 아래로 이미지가 깔림) |
content-box |
콘텐츠 영역(패딩 안쪽)부터 배경 시작 |
이 속성은
background-attachment가fixed인 경우에는 무시된다.

시작 ex2-44.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지의 원점</title>
<style type="text/css">
</style>
</head>
<body>
<div class="ori1">It's impossible not only starting good but also keeping it firm!!</div>
<div class="ori2">It's impossible not only starting good but also keeping it firm!!</div>
<div class="ori3">It's impossible not only starting good but also keeping it firm!!</div>
</body>
</html>
완료 ex2-44.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>배경이미지의 원점</title>
<style type="text/css">
div {
width: 550px;
padding: 25px;
margin-bottom: 20px;
border: 15px double rgba(0, 0, 0, .6);
background: url('img/bg_origin.png') no-repeat;
background-size: 70px;
}
.ori1 { background-origin: border-box; }
.ori2 { background-origin: padding-box; }
.ori3 { background-origin: content-box; }
</style>
</head>
<body>
<div class="ori1">
It's impossible not only starting good but also keeping it firm!!
</div>
<div class="ori2">
It's impossible not only starting good but also keeping it firm!!
</div>
<div class="ori3">
It's impossible not only starting good but also keeping it firm!!
</div>
</body>
</html>
09. background-clip
설명
요소의 배경(색상 또는 이미지)이 렌더링될 실제 영역을 자르는(clip) 속성이다. background-origin과 값은 같지만 적용 방식이 다르다.
| 값 | 설명 |
|---|---|
border-box |
기본값. 테두리 영역의 바깥쪽 가장자리까지 배경 표시 |
padding-box |
패딩 영역의 바깥쪽 가장자리까지 배경 표시 (테두리엔 배경 없음) |
content-box |
콘텐츠 영역에만 배경 표시 (패딩과 테두리엔 배경 없음) |
text |
텍스트의 형태(전경)로 배경을 클리핑. 투명 글자와 조합하여 텍스트에 이미지를 입힘 |
텍스트에 배경을 입히는
background-clip: text는 이제 주요 모던 브라우저에서 표준으로 지원되지만, 구형 브라우저 호환을 위해-webkit-을 함께 적기도 한다. CSS Backgrounds Level 4에서는 테두리가 그려지는 영역에만 배경을 남기는border-area값도 추가되었다.

시작 ex2-45.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지의 영역</title>
<style type="text/css">
</style>
</head>
<body>
<div class="clip1">It's impossible not only starting good but also keeping it firm!!</div>
<div class="clip2">It's impossible not only starting good but also keeping it firm!!</div>
<div class="clip3">It's impossible not only starting good but also keeping it firm!!</div>
</body>
</html>
완료 ex2-45.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>배경이미지의 영역</title>
<style type="text/css">
div {
width: 550px;
border: brown 15px double;
margin-bottom: 20px;
padding: 25px;
background-color: aquamarine;
}
.clip1 { background-clip: border-box; }
.clip2 { background-clip: padding-box; }
.clip3 { background-clip: content-box; }
</style>
</head>
<body>
<div class="clip1">It's impossible not only starting good but also keeping it firm!!</div>
<div class="clip2">It's impossible not only starting good but also keeping it firm!!</div>
<div class="clip3">It's impossible not only starting good but also keeping it firm!!</div>
</body>
</html>
10. sprite image
설명
웹 페이지의 성능 향상을 위해 여러 개의 작은 이미지를 하나의 큰 이미지 파일(스프라이트 시트)로 병합한 후, background-position을 조절하여 원하는 부분만 보여주는 기법이다.
| 값 | 설명 |
|---|---|
background-image |
공통 스프라이트 시트 이미지 선언 |
background-position |
스프라이트 내에서 보여줄 개별 아이콘의 좌표 이동 |
브라우저의 HTTP 요청 횟수를 줄여 로딩 속도를 크게 개선할 수 있어 실무에서 널리 쓰이는 최적화 기법이다. 다만 HTTP/2 이후에는 여러 요청을 한 연결에서 처리하므로 이미지를 합치는 이점이 과거보다 줄었으며, 오늘날에는 아이콘 용도라면 SVG 스프라이트나 아이콘 폰트, 인라인 SVG를 대안으로 쓰기도 한다.

시작 ex2-46.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>IMAGE SPRITE</title>
<style type="text/css">
</style>
</head>
<body>
<ul class="lnb">
<li><a href="#">Theater</a></li>
<li><a href="#">Secret Garden</a></li>
<li><a href="#">Concert Hall</a></li>
<li><a href="#">Animal Farm</a></li>
</ul>
</body>
</html>
완료 ex2-46.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>IMAGE SPRITE</title>
<style type="text/css">
li {
list-style: none;
margin: 5px;
}
li a {
text-decoration: none;
font-family: "Times New Roman", Times, serif;
color: #333;
display: block;
padding-left: 30px;
background: url('img/bg_sprite.png') no-repeat;
background-size: 26px;
font-size: 25px;
}
.lnb li:nth-child(1) a { background-position: 0 0; }
.lnb li:nth-child(2) a { background-position: 0 -50px; }
.lnb li:nth-child(3) a { background-position: 0 -100px; }
.lnb li:nth-child(4) a { background-position: 0 -150px; }
</style>
</head>
<body>
<ul class="lnb">
<li><a href="#">Theater</a></li>
<li><a href="#">Secret Garden</a></li>
<li><a href="#">Concert Hall</a></li>
<li><a href="#">Animal Farm</a></li>
</ul>
</body>
</html>
11. gradient
설명
두 가지 이상의 색상이 점진적으로 부드럽게 변하는 효과를 생성한다. 이미지 대신 CSS만으로 그레이디언트를 만들어 background-image 속성에 적용한다.
| 값 | 설명 |
|---|---|
linear-gradient() |
선형 그레이디언트. 지정된 각도나 방향을 따라 색상이 변함 |
radial-gradient() |
원형/타원형 그레이디언트. 중심점에서 바깥쪽으로 색상이 퍼짐 |
repeating-... |
그레이디언트 패턴을 반복하여 채움 |
구형 브라우저 호환성을 위해 벤더 프리픽스(
-webkit-,-moz-등)를 함께 사용하는 경우가 있다..g1과.g10의 첫 줄 선언은 그레이디언트 미지원 브라우저용 폴백(fallback)이므로 의도된 중복이다. 선형·원형 외에 각도를 따라 회전하는 형태로 색이 돌아가는conic-gradient도 있으며, 각 색상 뒤에 위치값(예: red 0%, yellow 50%)을 붙여 색이 바뀌는 지점을 세밀하게 제어할 수 있다.

시작 ex2-47.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>gradient의 표현</title>
<style type="text/css">
</style>
</head>
<body>
<p class="g1">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g2">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g3">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g4">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g5">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g6">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g7">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g8">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g9">It's impossible not only starting good but also keeping it firm!!</p>
<p class="g10">It's impossible not only starting good but also keeping it firm!!</p>
</body>
</html>
완료 ex2-47.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>gradient의 표현</title>
<style type="text/css">
p {
padding: 60px;
}
/* 폴백: 그레이디언트 미지원 시 red 단색 */
.g1 {
background: red;
background: linear-gradient(red, yellow, green);
}
.g2 {
background: linear-gradient(to right, red, yellow, purple, green);
}
.g3 {
background: linear-gradient(to bottom right, red, yellow, green);
}
.g4 {
background: linear-gradient(-200deg, red, yellow, green);
}
.g5 {
background: linear-gradient(
to right,
rgba(0, 0, 255, 0),
rgba(0, 0, 255, 0.8)
);
}
.g6 {
background: repeating-linear-gradient(brown, yellow 15%, green 30%);
}
.g7 {
background: radial-gradient(red, yellow, green);
}
.g8 {
background: radial-gradient(
closest-side at 35% 35%,
red 5%,
yellow 15%,
green 60%
);
}
.g9 {
background: radial-gradient(
circle,
red,
rgba(0, 0, 255, 0),
rgba(0, 0, 255, 0.8)
);
}
.g10 {
/* colorzilla generator */
background: #e52d77;
/* vendor prefix
실험적인 기술을 브라우저에서 사용하기 위한 접두어
-webkit- : 크롬, 사파리 , 엣지
-o- : 오페라
-moz- : 파이어폭스
-ms- : 익스
*/
background: -moz-linear-gradient(
left,
#e52d77 0%,
#6b4711 30%,
#28d330 51%,
#e82559 61%,
#c6976b 100%
);
background: -webkit-linear-gradient(
left,
#e52d77 0%,
#6b4711 30%,
#28d330 51%,
#e82559 61%,
#c6976b 100%
);
background: linear-gradient(
to right,
#e52d77 0%,
#6b4711 30%,
#28d330 51%,
#e82559 61%,
#c6976b 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e52d77', endColorstr='#c6976b',GradientType=1 );
}
</style>
</head>
<body>
<p class="g1">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g2">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g3">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g4">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g5">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g6">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g7">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g8">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g9">
It's impossible not only starting good but also keeping it firm!!
</p>
<p class="g10">
It's impossible not only starting good but also keeping it firm!!
</p>
</body>
</html>
12. radial-gradient
설명
특정 중심점에서 바깥쪽으로 퍼져나가는 원형(circle) 또는 타원형(ellipse) 그레이디언트를 생성한다. 형태, 크기 조절 키워드, 시작점 위치를 세밀하게 제어할 수 있다.
| 값 | 설명 |
|---|---|
closest-side |
그레이디언트 끝 모양이 중앙에서 가장 가까운 변에 닿음 |
closest-corner |
그레이디언트 끝 모양이 중앙에서 가장 가까운 모서리에 닿음 |
farthest-side |
그레이디언트 끝 모양이 중앙에서 가장 먼 변에 닿음 |
farthest-corner |
기본값. 그레이디언트 끝 모양이 중앙에서 가장 먼 모서리에 닿음 |
at x축 y축형태로 중심점의 위치를 %나 px 단위로 임의 변경할 수 있다. 자세한 내용은 🔗MDN 참고.


시작 ex2-48.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>중심점 변경</title>
<style type="text/css">
</style>
</head>
<body>
<p class="rg1"></p>
<p class="rg2"></p>
<p class="rg3"></p>
<p class="rg4"></p>
</body>
</html>
완료 ex2-48.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>중심점 변경</title>
<style type="text/css">
p { padding: 60px; background: red; }
.rg1 { background: radial-gradient(closest-side at 35% 35%, red, yellow, green); }
.rg2 { background: radial-gradient(closest-corner at 35% 35%, red, yellow, green); }
.rg3 { background: radial-gradient(farthest-side at 35% 35%, red, yellow, green); }
.rg4 { background: radial-gradient(farthest-corner at 35% 35%, red, yellow, green); }
</style>
</head>
<body>
<p class="rg1"></p>
<p class="rg2"></p>
<p class="rg3"></p>
<p class="rg4"></p>
</body>
</html>
13. multiple-background
설명
하나의 요소에 여러 개의 배경 이미지나 그레이디언트를 쉼표로 구분하여 동시에 적용할 수 있다.
| 특징 | 설명 |
|---|---|
| 렌더링 순서 | 먼저 선언된 이미지일수록 화면의 앞쪽(z-index가 높은 것처럼)에 배치됨 |
| 개별 제어 | 각 이미지마다 background-position, background-repeat 등을 쉼표로 구분해 개별 설정 가능 |
다중 배경을 활용하면 HTML 요소를 추가하지 않고도 복잡한 시각적 레이어링을 구현할 수 있다.

시작 ex2-49.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>다중 배경이미지</title>
<style type="text/css">
</style>
</head>
<body>
<p>It's impossible not only starting good but also keeping it firm!!</p>
</body>
</html>
완료 ex2-49.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>다중 배경이미지</title>
<style type="text/css">
p {
padding: 100px;
background-image: url(img/bg_tree.png), url(img/bg_sun.png),
linear-gradient(to right, rgba(0, 100, 0, 0), rgba(0, 100, 0, 1));
background-repeat: no-repeat, repeat-y;
background-position: bottom left, 90% 15%;
}
</style>
</head>
<body>
<p>It's impossible not only starting good but also keeping it firm!!</p>
</body>
</html>
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)을 앞에 두면 지원 브라우저가 더 가벼운 파일을 받는다.
완료 ex2-50.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>반응형 배경 이미지</title>
<style type="text/css">
.hero {
height: 300px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* 폴백: image-set 미지원 브라우저용 */
background-image: url('img/hero.jpg');
}
@supports (background-image: image-set(url('x.jpg') 1x)) {
.hero {
background-image: image-set(
url('img/hero.avif') 1x type('image/avif'),
url('img/hero@2x.avif') 2x type('image/avif'),
url('img/hero.jpg') 1x
);
}
}
</style>
</head>
<body>
<div class="hero"></div>
</body>
</html>
15. background-blend-mode
설명
한 요소 안의 여러 배경 이미지끼리, 또는 배경 이미지와 배경색을 어떻게 합성(blend)할지 정한다. 포토샵의 레이어 혼합 모드와 같은 개념이다. 다중 배경(13번)과 함께 써야 의미가 있다.
| 값 | 설명 |
|---|---|
normal |
기본값. 합성하지 않음 |
multiply |
곱하기. 겹친 부분이 어두워짐 |
screen |
스크린. 겹친 부분이 밝아짐 |
overlay |
오버레이. 대비를 강조 |
difference |
색 차이. 반전에 가까운 효과 |
luminosity 등 |
그 외 합성 모드 (총 16종) |
사진에 단색을 곱해 색조를 입히는 듀오톤(duotone) 효과에 자주 쓴다. 비슷한 결과를
opacity로 흉내 내면 텍스트까지 흐려지지만, 이 속성은 배경에만 적용되어 글자는 또렷하게 유지된다.
완료 ex2-51.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>배경 합성 모드</title>
<style type="text/css">
.tone {
height: 250px;
padding: 20px;
color: white;
background-image: url('img/photo.jpg');
background-color: #3a4cb8;
background-size: cover;
background-blend-mode: multiply;
}
</style>
</head>
<body>
<div class="tone">사진 위에 색조를 입혀도 글자는 또렷하다</div>
</body>
</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)이 달라 둘을 함께 적을 때 주의한다.
완료 ex2-52.html — 그레이디언트 페이드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>마스크로 아래쪽 페이드</title>
<style type="text/css">
.fade {
height: 300px;
background: url('img/photo.jpg') center / cover no-repeat;
/* 아래로 갈수록 투명해져 콘텐츠 위 캡션이 잘 읽힌다 */
-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent);
mask-image: linear-gradient(to bottom, black 60%, transparent);
}
</style>
</head>
<body>
<div class="fade"></div>
</body>
</html>
완료 ex2-53.html — SVG 모양으로 색 입히기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>마스크로 아이콘 색 변경</title>
<style type="text/css">
.icon {
width: 48px;
height: 48px;
/* 배경색이 곧 아이콘 색이 된다 */
background-color: #e3350d;
-webkit-mask: url('img/star.svg') no-repeat center / contain;
mask: url('img/star.svg') no-repeat center / contain;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
완료 ex2-54.html — mask-composite 컷아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>마스크 합성으로 구멍 뚫기</title>
<style type="text/css">
.cut {
width: 300px;
height: 200px;
background: teal;
/* 전체 면에서 가운데 원을 빼내 구멍을 만든다 */
-webkit-mask:
linear-gradient(black, black),
radial-gradient(circle 40px at center, black 98%, transparent);
-webkit-mask-composite: xor; /* webkit 구문 */
mask:
linear-gradient(black, black),
radial-gradient(circle 40px at center, black 98%, transparent);
mask-composite: exclude; /* 표준 구문 */
}
</style>
</head>
<body>
<div class="cut"></div>
</body>
</html>
17. 형성퀴즈
설명
앞서 배운 속성들을 종합적으로 활용하여 시안과 동일한 레이아웃과 스타일을 구현하는 실습 문제이다.
| 요구사항 | 설명 |
|---|---|
| 제한사항 | 제공된 HTML 문서는 수정하지 않고 오직 CSS 파일만을 편집할 것 |
| 리소스 | 예제와 동일한 이미지를 활용하여 배경, 불투명도 등을 적용 |
배운 CSS 속성들을 결합하여 실전 퍼블리싱 능력을 기른다.
리소스파일


quiz5.html
<!DOCTYPE HTML>
<html>
<head>
<title>이미지, 색상, 글자 투명도 조정하기</title>
<meta charset="UTF-8" />
<style type="text/css">
.textBox{
border-radius:20px;
}
</style>
</head>
<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>
</html>
