코드 그라데이션
10. 색 그라데이션 본문
선형 그라데이션
- 색상이 수직 또는 수평, 또는 대각선 방향으로 일정하게 변하는 것
- linear-gradient : 이걸 만들어주는 함수
선형 그라데이션 관련 속성
각도
- 선형 그라데이션에서 색상이 바뀌는 방향을 알려주는 방법
- 각도는 그라데이션이 끝나는 부분.
- 값은 deg 로 표기
방향
- 방향 지시할 때는 끝 지점을 기준으로 to 예약어와 함께 사용한다.
- to 다음에는 수평 방향 left나 right / 수직 방향 top 이나 bottom
색상 중지점
- 2가지 색 이상의 선형 그라데이션을 만들 때. 색상이 바뀌는 부분을 지정해 주어야 한다.
- 그라데이션에서 바뀌는 색을 색상 중지점이라고 함.
- 쉼표로 색상을 구분
- 색상만 지정할 수도 있고, 색상과 함께 중지점의 위치도 함께 지정할 수 있다.
예제 - 세 가지 모두 한꺼번에
코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형</title>
<style>
div {
width:500px;
height:300px;
border-radius:10px;
}
.grad1 {
background: yellow;
background: linear-gradient(to right bottom, yellow, pink);
/* 왼쪽 위에서 오른쪽 아래 방향으로, 노란색에서 핑크색으로 */
}
.grad2 {
background: blue;
background: linear-gradient(25deg, blue, orange);
/* 왼쪽 위에서 오른쪽 아래 방향으로, 노란색에서 핑크색으로 */
}
.grad3 {
background: blue;
background: linear-gradient(to bottom, red, white 45%, blue);
/* 왼쪽 위에서 오른쪽 아래 방향으로, 노란색에서 핑크색으로 */
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
</body>
</html>실행 결과
원형 그라데이션
- 원 또는 타원의 중심에서부터 동심원을 그리면서 바깥 방향으로 색상이 변화
원형 그라데이션 관련 속성
모양
- 원형과 타원형, 따로 지정하지 않으면 타원형으로 인식
예제 - 원형 그라데이션과 타원형 그라데이션
<!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, pink, green); /* 타원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
}
/* 원형 그러데이션 */
.grad2{
background:red;
background:radial-gradient(circle, white, blue, orange); /* 원형으로 흰색, 노란색, 빨간색으로 바뀌는 그러데이션 */
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
실행 결과
크기
<속성값>
예제 - 크기 속성값
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>원형 그러데이션</title>
<style>
li {
display:inline-block;
width:300px;
height:300px;
border:1px solid black;
margin:10px;
}
#div1{
background:red;
background:radial-gradient(circle closest-side at 30% 40%, white, orange, blue);
/* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
}
#div2{
background:red;
background:radial-gradient(circle closest-corner at 30% 40%, white, orange, blue);
/* 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 */
}
#div3{
background:red;
background:radial-gradient(circle farthest-side at 30% 40%, white, orange, blue);
/* 그러데이션 중심에서 가장 멀리 떨어진 측면에 닿을 때까지 */
}
#div4{
background:red;
background:radial-gradient(circle farthest-corner at 30% 40%, white, orange, blue);
/* 그러데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿을 때까지 */
}
</style>
</head>
<body>
<ul>
<li id="div1"></li>
<li id="div2"></li>
<li id="div3"></li>
<li id="div4"></li>
</ul>
</body>
</html>
실행 결과
위치
- at 키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다.
- 위치 키워드 중 하나, 또는 백분율로 지정
- 생략하면 가로와 세로 모두 중앙인 center로 인식
색상 중지점
- 색상이 바뀌는 부분
- 그라데이션의 색상과, 어느 부분에서 색상을 바꿀지 위치도 함께 지정 가능
예제 - 두 가지 한꺼번에
<!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 22% 22%,white,red);
/* 22% 22%에서 시작하여 흰색에서 파란색으로 바뀌는 원형 그러데이션 */
}
.grad1{
background:skyblue; /* css3를 지원하지 않는 브라우저용 */
background:radial-gradient(red, white, blue);
/* 빨간색에서 흰색을 거쳐 파란색으로 바뀌는 타원형 그러데이션 */
}
.grad2{
background:skyblue; /* css3를 지원하지 않는 브라우저용 */
background:radial-gradient(red, white 10%, blue 60%);
/* 빨간색에서 10% 위치의 흰색, 60% 위치의 파란색으로 바뀌는 타원형 그러데이션 */
}
</style>
</head>
<body>
<div class="grad"></div>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
실행 결과
그라데이션 이용한 패턴 만들기
- 선형 그라데이션은 repeating-linear-gradient
- 원형 그라데이션은 repeating-radial-gradient
예제 - 선형, 원형 그라데이션 반복해서 나타내기
<!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: orange;
background: repeating-linear-gradient(orange, skyblue 20px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, red, #ccc 10%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
실행 결과
예제 - 그라데이션 반복으로 패턴 만들기
- 선형 그라데이션과 원형 그라데이션의 시작 생상과 끝 색상을 명확히 지정하여 패턴을 생
<!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(orange, orange 20px, green 20px, green 40px);
}
.grad2 {
background: #ccc;
background: repeating-radial-gradient(circle, skyblue, skyblue 10%, #ccc 10%, #ccc 20%);
}
</style>
</head>
<body>
<div class="grad1"></div>
<div class="grad2"></div>
</body>
</html>
실행 결과
문제 1
출력 화면
정답 코드
<!DOCTYPEe html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
body{
color:white;
background:url('../Day07/images/pandas.jpg') repeat-x left bottom fixed;
background-color:gray;
}
h1 {
margin-top:50px;
font-size: 20px;
}
p {
font-size: 16px;
line-height: 25px;
}
</style>
</head>
<body>
<h1>백엔드 개발 비법 대공개!</h1>
<p>자바 공부를 열심히 해서 Spring으로 웹을 만들면 된다.
MVC 패턴에 대한 중요도도 꼭 알아야 한다.@@@@@@@@@@@@@@@@@@@@@ </p>
</body>
</html>
문제 2
출력 화면
조건
- 배경색은 검정, 글자색은 흰색
정답 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
.container {
width:500px;
padding:10px;
border:1px solid #ccc;
background: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>자바 공부를 열심히 해서 Spring으로 웹을 만들면 된다.
MVC 패턴에 대한 중요도도 꼭 알아야 한다.@@@@@@@@@@@@@@@@@@@@@ </p>
</div>
</body>
</html>
문제 3
출력 화면
조건
- 문서 전체 배경색 지정하기
- 내용 부분 배경색 흰색 지정
- 배경 이미지는 반복하지 않고, 오른쪽 아래에 고정
정답 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 3</title>
<style>
body {
background-color:#02233b;
}
#container{
margin:0 auto;
width:600px;
height:700px;
border:1px dotted gray;
padding:20px;
background:#fff url('../Day07/images/pandas.jpg') no-repeat right bottom;
background-size : 35% 35%;
}
img {
margin:30px 10px 30px 180px;
}
h1 {
background-color:#004344;
color:white;
text-align:center;
padding:20px;
}
h2 {
text-align:center;
font-style:italic;
margin-bottom:50px;
}
h3 {
color:#cf3b00;
}
ul{
margin:20px;
list-style-type:none;
}
li {
line-height:30px;
}
</style>
</head>
<body>
<div id="container">
<h1>IT 수강생 모집</h1>
<h2>IT에 관심 있는 여러분 환영합니다</h2>
<p>메가 IT에서 모두를 대상으로 수강생을 모집합니다. 학부나 전공에 상관없습니다. <br>
평소 IT에 관심있었던 사람들의 지원바랍니다.</p>
<ul>
<li><b>모집 기간 :</b> 4월 2일 ~ 5월 11일</li>
<li><b>모집 분야 :</b> 프론트, 백엔드, 게임개발</li>
<li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
<i>지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
<h3>혜택</h3>
<ol type="a">
<li>취업지원</li>
<li>공부공간 제공</li>
</ol>
</div>
</body>
</html>
728x90
'Front > Mega-CSS' 카테고리의 다른 글
| 12. 속성 선택자 (0) | 2023.05.16 |
|---|---|
| 11. 연결 선택자 (0) | 2023.05.15 |
| 9. 배경색과 배경 이미지 (0) | 2023.05.14 |
| <중요> 8. 웹 문서 레이아웃, 위치 (0) | 2023.05.14 |
| 7. 박스 모델 (2) 테두리와 여백 (0) | 2023.05.13 |
'Front/Mega-CSS' Related Articles
more
Comments