배경
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
01. opacity
Info: 👁️🗨️ 요소의 불투명도를 설정
opacity: 0;
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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!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>
</body>
</html>
02. background
Info: 👁️🗨️ 🔗MDN 아래 속성의 축약
background-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size
위 속성의 초기값
background-image:nonebackground-position:0% 0%background-size:auto autobackground-repeat:repeatbackground-origin:padding-boxbackground-clip:border-boxbackground-attachment:scrollbackground-color:transparent
① background-color, background-image
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>
<p></p>
</body>
</html>
② background-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>
③ background-position
Info: 💡 첫번째 숫자 → x
두번째 숫자 → y
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: no-repeat;
background-repeat: repeat-y;
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 50%;
background-position: left center;
background-position: right bottom;
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>
④ background-attachment
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>
⑤ background-size
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>
⑥ background-origin
Info: 💡 이미지의 시작점을 정하는 속성
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>
⑥ background-clip
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>
03. sprite image
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: #999;
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>
04. gradient
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;
}
.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(red 5%, yellow 15%, green 60%);
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>
05. radial-gradient
- MDN
- closest-corner 끝 모앙이 그레디언트 중앙에서 가장 가까운 모서리로 흐려짐.
- closest-side 끝 모양이 그레디언트 중앙에서 가장 가까운 변으로 흐려짐.
- farthest-corner 기본값. 그레디언트 중앙에서 가장 먼 모서리로 흐려짐
- farthest-side 그레디언트 중앙에서 가장 먼 변으로 흐려짐
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>
07. mutiple-background
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>
08. 형성퀴즈
Info: 👁️🗨️ 아래의 리소스 파일을 활용하여 시안과 같은 html 문서를 제작하시오
- 주어진 html 문서를 활용하시오
- 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>
