Chapter 09. 이미지와 그라데이션 효과로 배경 꾸미기

FrontEnd

Chapter 09. 이미지와 그라데이션 효과로 배경 꾸미기

계란💕 2022. 4. 25. 10:03

1. 배경색과 배경 범위 지정하기

1) 배경색을 지정하는 back-ground 속성

- 배경색은 16진수나 rgb값 또는 색상 이름을 사용해서 지정한다.

- 세밀하게 조절하려면 16진숫값을 사용한다.

- 투명도도 조절하려면 rgba표기법을 사용한다.

2) 배경색의 적용 범위를 조절하는 background-clip 속성

- 박스모델 관점에서 배경의 적용 범위를 조절할 수도 있다.

- 속성값

(1) border-box: (기본값) 박스 모델의 가장 외곽인 테두리까지 적용한다.

(2) padding-box: 박스모델에서 테두리를 뺀 패딩 범위까지 적용한다.

(3) content-box: 박스모델의 내용(컨텐츠) 부분에만 적용한다.

Ex)

css

열기

<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로 지정한다.

css

열기

<!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) 배경 이미지 배치하고 고정하기

css

열기

<!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) 배경 이미지 크기 조절하기

css

열기

<!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) 방향을 이용해 선형 그라데이션만들기

- 오른쪽 대각선 아래로 내려가는 방향으로 그라데이션이 생긴다.

css

열기

<!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가 된다.

css

열기

<!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% 되는 지점에 흰색을 두어 위->아래로 부드럽게 연결한다.

css

열기

<!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: 그라데이션의 가장자리가 그라데이션의 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 한다.

css

열기

<!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% 위치에서 흰색 -> 파란색으로 변하는 원형 그라데이션을 만든다.

css

열기

<!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) 원형 그라데이션의 색상 중지점 지정하기

- 선형 그라데이션 철럼 원형 그라데이션에서도 색상이 바뀌는 부분을 색상 중지점이라고 한다.

- 그라데이션 중앙에서부터 노란색, 흰색을 거쳐 주황색으로 끝나는 원형 그라데이션이다.

- 모양을 지정하지 않았기 때문에 타원형으로 표시된다.

css

열기

<!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: 원형그라데이션을 반복한다.

- 다음 그림은 노 -> 빨 선형그라데이션, 흰->회 원형 그라데이션을 반복해서 나타낸다.

- 선형 그라데이션을 반복하면 노란색 부터 빨간색까지 부드럽게 섞여 표시되지만, 다시 노란색이 시작하는 부분은

-> 이전 빨간색과 노란색이 겹쳐 주황색처럼 표시된다.

-> 따라서 색상 중지점의 위치를 적절하게 표시해야한다.

->시작 색상과 끝 색상을 명확히 구분해줘야 중간에 섞이지 않는다.

css

열기

<!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) 그라데이션을 사용한 패턴 만들기

- 이전 예제와 다르게 그라데이션의 시작 색상과 끝 색상을 명확히 지정하여 패턴을 만든다.

css

열기

<!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요소의 배경색을 검정으로 글자색은 흰색으로 변경한다.

css

열기

<!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) 실행 결과

저작자표시

'FrontEnd' 카테고리의 다른 글

Chapter 11. 트랜지션과 애니메이션 (0)	2022.04.26
Chapter.10 CSS 고급 선택자 (0)	2022.04.25
Chapter 08. 레이아웃을 구성하는 CSS 박스 모델 (0)	2022.04.23
Chapter 07. 텍스트를 표현하는 다양한 스타일 (0)	2022.04.20
Chapter 06. CSS의 기본 (0)	2022.04.20

현재글Chapter 09. 이미지와 그라데이션 효과로 배경 꾸미기

Backend Developer lan4250@naver.com https://github.com/goraneee

스프링, 코드업, 제로베이스 스쿨, BFS, dp, SQL, JPA, mysql, DB, Queue, 백준, 알고리즘, dfs, 데이터베이스, 프로그래머스, Stack, 제로베이스 백엔드, 자바, GIT, Java,

Today :
Yesterday :

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

계란 블로그