Chapter 09. 이미지와 그라데이션 효과로 배경 꾸미기
1. 배경색과 배경 범위 지정하기
1) 배경색을 지정하는 back-ground 속성
- 배경색은 16진수나 rgb값 또는 색상 이름을 사용해서 지정한다.
- 세밀하게 조절하려면 16진숫값을 사용한다.
- 투명도도 조절하려면 rgba표기법을 사용한다.
2) 배경색의 적용 범위를 조절하는 background-clip 속성
- 박스모델 관점에서 배경의 적용 범위를 조절할 수도 있다.
- 속성값
(1) border-box: (기본값) 박스 모델의 가장 외곽인 테두리까지 적용한다.
(2) padding-box: 박스모델에서 테두리를 뺀 패딩 범위까지 적용한다.
(3) content-box: 박스모델의 내용(컨텐츠) 부분에만 적용한다.
Ex)
<hide/>
<style>
.desc {
border:5px dotted #222;
background-color:#ffd9a0;
width:350px;
padding:20px;
margin-right:20px;
float:left;
}
#clip-border {
background-clip: border-box;
}
#clip-padding {
background-clip: padding-box;
}
#clip-content {
background-clip: content-box;
}
</style>
</head>
<body>
<div id="container">
<div class="desc" id="clip-border">
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
</div>Note) 실행 결과
2. 배경 이미지 지정하기
1) 웹 요소에 이미지를 넣는 background-image 속성
- 기본형: background-image: url('이미지 파일 경로')
2) 배경 이미지의 반복 방법을 지정하는 background-repeat 속성
(1) repeat: 브라우저 화면에 가득찰 때 까지, 가로 세로 모두 반복
(2) repeat-x: 브라우저 화면 너비에 가득찰 때까지 가로로 반복한다.
(3) repeat-y: 브라우저 화면 높이에 가득찰 때까지 세로로 반복한다.
(4) no-repeat: 한 번만 표기하고 반복하지 않는다.
3) 배경 이미지의 위치를 조잘하는 background-position 속성
- 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다.
- 기본형: background-position: <수평위치> <수직위치>
-> 수평 위치: left | center | right | <백분율> | <길이 값> 중에서 키워드를 선택한다.
-> 수직 위치: top | center | bottom | <백분율> | <길이 값>
- 백분율: 요소가 있는 해당 위치에 배경 이미지의 위치를 백분율로 계산하여 맞춘다.
Ex) 불릿 대신 배경 이미지 사용하기
- 목록의 불릿을 없앤 후, 그자리에 배경 이미지를 넣고 위치는 center로 지정한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>불릿 바꾸기</title>
<style>
ul {
list-style:none; /* 불릿 없앰 */
margin-left:-30px; /* 왼쪽 여백 줄임 */
}
li {
background-image:url('images/book-icon.png'); /* 배경 이미지 파일 */
background-repeat:no-repeat; /* 배경 이미지 반복 안함 */
background-position:left center; /* 배경 이미지 위치 */
padding-left:50px; /* 왼쪽 패딩 (박스 모델) */
line-height:40px; /* 줄간격 */
}
</style>
</head>
<body>
<h1>이지스퍼블리싱</h1>
<ul>
<li>회사소개</li>
<li>도서</li>
<li>자료실</li>
<li>질문답변</li>
<li>동영상강의</li>
</ul>
</body>
</html>Note) 실행 결과
4) 배경이미지의 적용 범위를 조절하는 background-origin 속성
- 속성값
-> content-box: 박스 모델에서 내용 부분에만 배경 이미지를 표기한다. (기본값)
-> paddding-box: 박스 모델에서 패딩까지 배경 이미지를 표시한다.
-> border-box: 박스 모델에서 테두리까지 배경 이미지를 표시한다.
5) 배경 이미지를 고정하는 background-attachment 속성
- 속성값
-> scroll: 화면을 스크롤할 때, 이미지도 함께 스크롤 (기본값)
-> fixed: 스크롤하더라도 이미지는 고정
Ex) 배경 이미지 배치하고 고정하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
body {
background-image:url('images/bg2.png'); /* 문서 전체 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
background-attachment:fixed; /* 배경 이미지 고정 */
}
div {
width:400px;
height:250px;
padding: 20px;
border: 20px solid rgba(204, 204, 204, 0.493);
margin-bottom:20px;
overflow:auto;
background-image:url('images/bg3.png'); /* 텍스트 상자의 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
}
#bg1 {
background-origin:padding-box; /* 패딩까지 배경 이미지 표시 */
}
#bg2 {
background-origin:border-box; /* 테두리까지 배경 이미지 표시 */
}
#bg3 {
background-origin:content-box; /* 내용 영역만 배경 이미지 표시 */
}
</style>
</head>
<body>
<div id="bg1">
<h2>바빠 시리즈 </h2>
<h3>-바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
</div>
<div id="bg2">
<h2>바빠 시리즈 </h2>
<h3>-바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
</div>
<div id="bg3">
<h2>바빠 시리즈 </h2>
<h3>-바쁜 학생을 위한 빠른 학습법</h3>
<p>쉬운 내용은 압축하여 빠르게, 어려운 내용은 더 많이 공부하는 효율적인 학습 설계가 되어 있는 바빠 연산법과 ‘손이 기억하는 훈련 프로그램’인 바빠 영어 시리즈가 있습니다.</p>
</div>
</body>
</html>Note) 실행 결과
6) background 속성하나로 배경 이미지 제어하기
ex) background: url('image/bg4.png') no-repeat center bottom fixed;
7) 배경 이미지 크기를 조절하는 bacjground-size 속성
- 속성값이 하나일 때는 너비로 인식하고 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산한다.
- 속성값
-> auto: 원래 배경 이미지만큼 표시한다. (기본값)
-> contain: 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대, 축소한다.
-> cover: 배경 이미지로 요소를 모두 덮도록 이미지를 확대, 축소한다.
-> <크기>: 이미지의 너비와 높이를 지정한다. 하나만 주어지면 너빗값으로 인식한다.
- <백분율>: 배경 이미지가 들어갈 요소의 크기를 기준으로 값을 백분율로 지정하고 그 크기에 맞도록 배경 이미지 확대, 축소한다.
Ex) 배경 이미지 크기 조절하기
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 이미지</title>
<style>
#container{
width:1100px;
margin:50px auto;
}
.box{
float:left;
border:1px solid #222;
width:300px;
height:300px;
margin:20px;
background:url('images/bg4.jpg') no-repeat left top;
}
#bg1 { background-size:auto;} /* 원래 배경 이미지 크기로 표시 */
#bg2 { background-size:200px;} /* 너비는 200px, 높이는 자동 계산 */
#bg3 { background-size:50%;} /* 배경 이미지 너비는 요소 너비의 50%, 높이는 자동 계산 */
#bg4 { background-size:100% 100%;} /* 배경 이미지 너비와 높이는 요소 너비의 100%, 요소 높이의 100% */
#bg5 { background-size:contain;} /* 요소 안에 배경 이미지가 다 보이도록 표시 */
#bg6 { background-size:cover;} /* 요소를 완전히 덮도록 배경 이미지 표시 */
</style>
</head>
<body>
<div id="container">
<div class="box" id="bg1"></div>
<div class="box" id="bg2"></div>
<div class="box" id="bg3"></div>
<div class="box" id="bg4"></div>
<div class="box" id="bg5"></div>
<div class="box" id="bg6"></div>
</div>
</body>
</html>Note) 실행 결과
Ex) 문서 전체에 배경 이미지 넣기
- 웹 브라우저 창의 크기를 바꿔도 배경 이미지는 화면에 가득찬 상태로 표시된다.
- 글자색을 흰색 #fff로 지정하고 text-shadow를 검은색으로 지정한다.
Note) 실행 결과
3. 그라데이션 효과로 배경 꾸미기
1) 선형 그라데이션
Def) 선형 그라데이션: 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다.
- linear-gradient 함수를 이용한다.
- 기본형: linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ...]);
- 방향을 나타내는 예약어를 최대 2개까지 사용 가능하다.
- 수직방향: top / bottom , 수평방향: left / right
- 위치나 각도 옵션을 생략하면 "to bottom"으로 인식한다.
Ex) 방향을 이용해 선형 그라데이션만들기
- 오른쪽 대각선 아래로 내려가는 방향으로 그라데이션이 생긴다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
border-radius:10px;
}
.grad {
background: blue;
background: linear-gradient(to right bottom, blue, white); /* 왼쪽 위에서 오른쪽 아래 방향으로, 파랑에서 흰색으로 */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>Note) 실행 결과
Ex) 각도를 사용해 선형 그라데이션만들기
- 선형 그라데이션 색상이 바뀌는 방향을 알려준다.
- 각도는 그라데이션이 끝나는 부분이고 값은 deg로 표기한다.
- 맨 윗부분이 0deg이고 시계 방향으로 회전하면서 90, 180deg가 된다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
border-radius:10px;
}
.grad {
background: #f00; /* CSS3를 지원하지 않는 브라우저용 */
background: linear-gradient(45deg, #f00, #fff); /* 45도 (오른쪽 위)방향으로, 빨간색에서 흰색으로 */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>Note) 실행 결과
Ex) 선형 그라데이션의 색상 중지점(color-stop) 지정하기
- 2가지 색 이상의 선형 그라데이션을 만들려면 색상이 바뀌는 부분을 지정해줘야한다.
- 그라데이션이 바뀌는 색을 색상 중지점이라고 한다.
- 쉼표로 색상을 구분하는데 색상만 지정할 수도 있고 색상과 함께 중지점의 위치고 함께 지정할 수 있다.
- 예제를 보면 시작 색상과 끝 색상을 파란색으로 하고 시작 위치에서 30% 되는 지점에 흰색을 두어 위->아래로 부드럽게 연결한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
}
.grad {
background: #06f; /* css3를 지원하지 않는 브라우저용 */
background: linear-gradient(to bottom, #06f, white 30%, #06f); /* 위에서부터 30% 위치에 색상 중지점 지정 */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>Note) 실행 결과
Ex) 원형 그라데이션의 모양 지정하기
- 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다.
- 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그라데이션의 모양을 선택한다.
- 기본형: radial-gradient(<모양> <크기> at <위치>, <색상 중지점>, [<색상 중지점>, ...] )
- 모양을 따로 지정하지 않으면 타원형으로 지정한다.
-> 모양: 원형(circle), 타원형(ellipse)
- 원형 그라데이션의 크기 속성값
-> closest-side: 그라데이션의 가장 자리가 그라데이션 중심에서 가장 가까운 요소의 측면에 닿을 때까지 그린다.
-> closest-corner: 그라데이션 가장 자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그린다.
-> fartest-side: 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어져 있는 측면에 닿을 때까지 그린다.
-> farthest-corner: 그라데이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
margin:10px;
}
/* 타원형 원형 그러데이션 */
.grad1{
background:red;
background:radial-gradient(white, yellow, red); /* 타원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
}
/* 원형 그러데이션 */
.grad2{
background:red;
background:radial-gradient(circle, white, yellow, red); /* 원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>Note) 실행 결과
Ex) 위치 키워드를 사용해 원형 그라데이션 만들기
- at키워드와 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.
- 속성값은 키워드 또는 백불율을 이용한다.
- 속성값을 생략하면 가로 세로 모두 중앙인 center로 인식한다.
- 다음 그림은 20% 20% 위치에서 흰색 -> 파란색으로 변하는 원형 그라데이션을 만든다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션</title>
<style>
div {
width:300px;
height:300px;
border-radius:50%;
box-shadow: 10px 5px 10px #ccc;
}
.grad {
background: blue; /* css3를 지원하지 않는 브라우저용 */
background: radial-gradient(circle at 20% 20%,white,blue); /* 20% 20%에서 시작하여 흰색에서 파란색으로 바뀌는 원형 그러데이션 */
}
</style>
</head>
<body>
<div class="grad"></div>
</body>
</html>Note) 실행 결과
Ex) 원형 그라데이션의 색상 중지점 지정하기
- 선형 그라데이션 철럼 원형 그라데이션에서도 색상이 바뀌는 부분을 색상 중지점이라고 한다.
- 그라데이션 중앙에서부터 노란색, 흰색을 거쳐 주황색으로 끝나는 원형 그라데이션이다.
- 모양을 지정하지 않았기 때문에 타원형으로 표시된다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션</title>
<style>
div {
width:500px;
height:300px;
margin:10px;
}
.grad1{
background:skyblue; /* css3를 지원하지 않는 브라우저용 */
background:radial-gradient(yellow, white, orange); /* 노란색에서 흰색을 거쳐 주황색으로 바뀌는 타원형 그러데이션 */
}
.grad2{
background:skyblue; /* css3를 지원하지 않는 브라우저용 */
background:radial-gradient(yellow, white 10%, orange 60%); /* 노란색에서 10% 위치의 흰색, 60% 위치의 주황색으로 바뀌는 타원형 그러데이션 */
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>Note) 실행 결과
Ex) 그라데이션 반복하기
- repeating-linear-gradient: 선형 그라데이션 반복
- repeating-radial-gradient: 원형그라데이션을 반복한다.
- 다음 그림은 노 -> 빨 선형그라데이션, 흰->회 원형 그라데이션을 반복해서 나타낸다.
- 선형 그라데이션을 반복하면 노란색 부터 빨간색까지 부드럽게 섞여 표시되지만, 다시 노란색이 시작하는 부분은
-> 이전 빨간색과 노란색이 겹쳐 주황색처럼 표시된다.
-> 따라서 색상 중지점의 위치를 적절하게 표시해야한다.
->시작 색상과 끝 색상을 명확히 구분해줘야 중간에 섞이지 않는다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그러데이션 반복</title>
<style>
div {
width:500px;
height:300px;
border:1px solid #222;
border-radius:10px;
margin-bottom:30px;
}
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, red 20px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, white, #ccc 10%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>Note) 실행 결과
Ex) 그라데이션을 사용한 패턴 만들기
- 이전 예제와 다르게 그라데이션의 시작 색상과 끝 색상을 명확히 지정하여 패턴을 만든다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션 반복</title>
<style>
div {
width:500px;
height:300px;
border:1px solid #222;
border-radius:10px;
margin-bottom:30px;
}
.grad1 {
background: red;
background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>Note) 실행 결과
Ex) 마무리 문제 1)
- 배경 이미지는 왼쪽 아래에 고정시키고 반복되도록 한다.
- 텍스트 상자의 배경은 회색으로 설정한다.
Note) 실행 결과
Ex) 마무리 문제 2)
- container요소의 배경색을 검정으로 글자색은 흰색으로 변경한다.
<hide/>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UFT-8">
<title>연습문제 2</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
background-color:rgb(0, 0,0);
color: rgb(255, 255,255);
}
h1 {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>
</div>
</body>
</html>Note) 실행 결과
Ex) 마무리 문제 3)
- 문서 전체의 배경색 #02233b로 지정한다.
- container의 배경색은 흰색
- 배경이미지
-> background: #fff url('images/mic.png') no-repeat right bottom;
Note) 실행 결과
