본문 바로가기
💻 1. 웹개발_Front end/1-3 CSS

[CSS] 03-3 그라데이션 효과로 배경 꾸미기

by 달님🌙 2021. 9. 5.
반응형

 

1. 그라데이션과 브라우저 접두사

 

① 그라데이션은 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용

② 그라데이션 속성은 표준화 됨

③ 하지만 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함

 

2. 선형 그라데이션

 

① 수직 방향이나 수평 방향 또는 대각선 방향으로 색상이 일정하게 변하는 것

② 선형 그라데이션 지정 시 방향과 색상 필요

③ 기본형

linear-gradient(<각도> to <방향>, color-stop, [color-stop, ..]);

 

※ 위 구문이 표준 구문이지만 ‘위치’와 ‘각도’를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전별 사용법이 조금씩 다름

 

④ 방향 : 끝 지점을 기준으로 ‘to’키워드와 함께 사용

 

⑤ 각도 - 그라데이션이 끝나는 각도 - 단위는 deg. 12시가 0도로 시작해서 시계방향으로 증가함.

 

⑥ 색상 중지점(color-stop)

- 색상이 바뀌는 지점

- 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 지정할 수 있음

 

<예제 – linear-position-001.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>선형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border-radius: 10px;
        }
        .grad {
            background: blue;
            /*구형 브라우저*/
            background: -webkit-linear-gradient(left top, blue, white);
            background: -moz-linear-gradient(left top, blue, white);
            background: -o-linear-gradient(left top, blue, white);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: linear-gradient(to left top, blue, white);
        }
    </style>
</head>
<body>
    <div class="grad"></div>
</body>
</html>

 

 

<예제 – linear-degree-001.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>선형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            /*테두리 모서리 부분을 둥글게 만듬*/
            border-radius: 10px;
        }
        .grad {
            /*45도 오른쪽 위 방향으로, 빨간색에서 흰색으로 그라데이션 효과 발생*/
            background: #ff0000;
            /*구형 브라우저 (기본 값은 180도)*/
            background: -webkit-linear-gradient(45deg, #ff0000, #ffffff);
            background: -moz-linear-gradient(45deg, #ff0000, #ffffff);
            background: -o-linear-gradient(45deg, #ff0000, #ffffff);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: linear-gradient(45deg, #ff0000, #ffffff);
        }
    </style>
</head>
<body>
    <div class="grad"></div>
</body>
</html>

 

 

<예제 – colorstop-001.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>선형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            /*테두리 모서리 부분을 둥글게 만듬*/
            border-radius: 10px;
        }
        .grad {
            /*45도 오른쪽 위 방향으로, 빨간색에서 흰색으로 그라데이션 효과 발생*/
            background: #ff0000;
            /*구형 브라우저 (기본 값은 180도)*/
            background: -webkit-linear-gradient(top, #06f, white 30%, #06f);
            background: -moz-linear-gradient(bottom, #06f, white 30%, #06f);
            background: -o-linear-gradient(bottom, #06f, white 30%, #06f);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: linear-gradient(to bottom, #06f, white 30%, #06f);
        }
    </style>
</head>
<body>
    <div class="grad"></div>
</body>
</html>

 

 

3. 원형 그라데이션

 

① 원이나 타원의 중심부터 동심원을 그리며 바깥 방향으로 색상이 바뀌는 그러데이션

② 색상이 바뀌기 시작하는 원의 중심과 크기를 지정하고 그러데이션의 모양을 지정해야 함.

③ 기본형 : 

radical-gradient(<최종 모양> <크기> at <위치>, color-stop, [color-stop...])

 

④ 모양

- 원형 그라데이션에서 만들어지는 모양은 circle(원형)과 ellipse(타원형)

- 따로 지정하지 않으면 ellipse로 인식

 

⑤ 위치 - 그라데이션이 시작하는 원의 중심 지정

- ‘모양‘, ‘크기‘ 속성 다음에 at 키워드와 함께 위치 값 지정

- 사용 가능한 값 : 키워드(left, center, right나 top, center, bottom)나 백분율

 

⑥ 크기 : 그라데이션의 크기 지정

 

⑦ 색상 중지점

- 색상이 바뀌는 지점

- 색상만 지정할 수도 있고 색상과 함께 중지점의 위치도 지정할 수 있음

 

 

<예제 – radial-default-001.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>원형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border-radius: 10px;
        }
        .grad1 {
            background: red;
            /*구형 브라우저*/
            background: -webkit-radial-gradient(white, yellow, red);
            background: -moz-radial-gradient(white, yellow, red);
            background: -o-radial-gradient(white, yellow, red);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: radial-gradient(white, yellow, red);
        }
        .grad2 {
            background: red;
            /*구형 브라우저*/
            background: -webkit-radial-gradient(circle, white, yellow, red);
            background: -moz-radial-gradient(circle, white, yellow, red);
            background: -o-radial-gradient(circle, white, yellow, red);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: radial-gradient(circle, white, yellow, red);
        }
    </style>
</head>
<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
</body>
</html>

 

<예제 – radial-position-001.html>

 

<예제 – radial-size-001.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>원형 그라데이션</title>
    <style>
        li {
            float: left;
            display: inline;
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 10px;
        }
        #div1 {
            background: darkgreen;
            /*구형 브라우저*/
            background: -webkit-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
            background: -moz-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
            background: -o-radial-gradient(30% 40%, circle closest-side, white, yellow, green);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: radial-gradient(circle closest-side at 30% 40%, white, yellow, green);
        }
        #div2 {
            background: darkgreen;
            /*구형 브라우저*/
            background: -webkit-radial-gradient(30% 40%, circle closest-corner, white, yellow, green);
            background: -moz-radial-gradient(30% 40%, circle closest-corner, white, yellow, green);
            background: -o-radial-gradient(30% 40%, circle closest-corner, white, yellow, green);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: radial-gradient(circle closest-corner at 30% 40%, white, yellow, green);
        }
        #div3 {
            background: darkgreen;
            /*구형 브라우저*/
            background: -webkit-radial-gradient(30% 40%, circle farthest-side, white, yellow, green);
            background: -moz-radial-gradient(30% 40%, circle farthest-side, white, yellow, green);
            background: -o-radial-gradient(30% 40%, circle farthest-side, white, yellow, green);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: radial-gradient(circle farthest-side at 30% 40%, white, yellow, green);
        }
        #div4 {
            background: darkgreen;
            /*구형 브라우저*/
            background: -webkit-radial-gradient(30% 40%, circle farthest-corner, white, yellow, green);
            background: -moz-radial-gradient(30% 40%, circle farthest-corner, white, yellow, green);
            background: -o-radial-gradient(30% 40%, circle farthest-corner, white, yellow, green);
            /*모던 브라우저 - 방향 지정시 to 키워드 사용*/
            background: radial-gradient(circle v-corner at 30% 40%, white, yellow, green);
        }
    </style>
</head>
<body>
    <ul>
        <li id="div1"></li>
        <li id="div2"></li>
        <li id="div3"></li>
        <li id="div4"></li>
    </ul>
</body>
</html>

 

<예제 – radial-color-001.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>원형 그라데이션</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            margin: 10px;
        }
        .grad1 {
            background: skyblue;
            background: -webkit-radial-gradient(red, yellow, skyblue);
            background: -moz-radial-gradient(red, yellow, skyblue);
            background: -o-radial-gradient(red, yellow, skyblue);
            background: radial-gradient(red, yellow, skyblue);
        }
        .grad2 {
            background: skyblue;
            background: -webkit-radial-gradient(red, yellow 20%, skyblue);
            background: -moz-radial-gradient(red, yellow 20%, skyblue);
            background: -o-radial-gradient(red, yellow 20%, skyblue);
            background: radial-gradient(red, yellow 20%, skyblue);
        }
    </style>
</head>
<body>
    <!--div.grad1*2-->
    <div class="grad1"></div>
    <div class="grad2"></div>
</body>
</html>

 

4. 그라데이션 반복

 

① 단순히 그라데이션을 반복하는 것이 아니라 패턴을 반복함

② 선형 그라데이션의 반복은 repeating-linear-gradient 사용

③ 원형 그라데이션의 반복은 repeating-radial-gradient 사용

 

 

<예제 – repeat-gradient-001.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>선형 그라데이션 반복</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border-radius: 10px;
            margin: 10px;
        }
        .grad1 {
            background: red; /*css3 미지원 브라우저*/
            background: -webkit-repeating-linear-gradient(yellow, red 20px); 
            background: -moz-repeating-linear-gradient(yellow, red 20px); 
            background: -o-repeating-linear-gradient(yellow, red 20px); 
            background: repeating-linear-gradient(yellow, red 20px); 
        }
    </style>
</head>
<body>
    <div class="grad1"></div>
</body>
</html>

 

<예제 – repeat-gradient-002.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>선형 그라데이션 반복</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border-radius: 10px;
            margin: 10px;
        }
        .grad1 {
            background: red; /*css3 미지원 브라우저*/
            background: -webkit-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px); 
            background: -moz-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
            background: -o-repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
            /*0~20px 노란색 그라데이션 20~40px 빨간색 그라데이션
            총 40px길이의 그라데이션 효과가 반복됨*/
            background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);
        }
    </style>
</head>
<body>
    <div class="grad1"></div>
</body>
</html>

 

<예제 – repeat-gradient-003.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>원형 그라데이션 반복</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border-radius: 10px;
            margin: 10px;
        }
        .grad1 {
            background: #ccc;
            background: -webkit-repeating-radial-gradient(circle, white, #ccc 10%); 
            background: -moz-repeating-radial-gradient(circle, white, #ccc 10%); 
            background: -o-repeating-radial-gradient(circle, white, #ccc 10%); 
            background: repeating-radial-gradient(circle, white, #ccc 10%); 
        }
        .grad2 {
            background: #ccc;
            /*0~20px 노란색 그라데이션 20~40px 빨간색 그라데이션
            총 40px길이의 그라데이션 효과가 반복됨*/
            background: -webkit-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); 
            background: -moz-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); 
            background: -o-repeating-radial-gradient(circle, white, white 10%, #ccc 10%, #ccc 20%); 
            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>

 

 

퀴즈

 

<퀴즈 1번>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				width:500px;
				padding:10px;
				border:1px solid blue;
				background: rgba(0, 0, 255, 0.2);
			}
			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>

 

<퀴즈 2번>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				width:500px;
				padding:10px;
				border:1px solid blue;
				background:rgba(0,0,255,0.2);
			}
			.container:hover {
				background-color: blue;
				color: white;
			}
			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>

 

<퀴즈 3번>

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>배경 스타일</title>
    <style>
			body {
				font-family: "맑은 고딕", 돋움;
			}
			.container {
				position: relative;
				width: 600px;
				height: 400px;
				padding: 20px;
				border: 1px solid #ccc;
				background-image: url('images/apple-bg.jpg');
				background-repeat: no-repeat;
				background-size: cover;
			}

			.content {
				position: absolute;
				top: 300px;
				width: 90%;
				padding: 10px;
				background: rgba(255, 255, 255, 0.5);
			}

			h1 {
				font-size: 30px;
				text-align: center;
			}

			p {
				font-size: 16px;
				line-height: 25px;
			}
    </style>
  </head>
  <body>
		<div class="container">
			<div class="content">
				<h1>하루 한 알의 사과는 의사를 멀리 한다</h1>
			</div>
		</div>
  </body>
</html>

 

 

 

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 04-2 테두리 관련 속성들  (0) 2021.09.05
[CSS] 04-1 CSS와 박스 모델  (0) 2021.09.05
[CSS] 03-2 배경 색과 배경 이미지  (0) 2021.09.05
[CSS] 03-1 웹에서 색상 표현하기  (0) 2021.09.05
[CSS] 02-4 목록과 링크 스타일  (0) 2021.09.05

관련글

댓글

티스토리툴바