안녕하세요. 비스카이비전입니다. :D 오늘은 CSS를 이용해서 그라데이션 효과를 주는 방법에 대해서 살펴보겠습니다. 그라데이션(gradation)은 점진적으로(gradually) 색이나 밝기가 변하는 것을 의미합니다. 다음과 같이 말이죠.
자, 그러면 이제 웹페이지에 그라데이션 효과를 넣는 법에 대해 알아보겠습니다. 오늘도 결과물을 먼저 보여드리고 이 결과물을 만들어낸 원인인 코드를 살펴보도록 하겠습니다.
보시는 것과 같이 파란색에서 노란색으로 그라데이션 효과가 잘 들어간 것을 확인할 수 있습니다. 이 결과물을 만들기 위해서는 역시 html과 css 코드가 필요합니다. 각각 다음과 같습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="ex1">
<h1>오른쪽으로 그라데이션</h1>
</div>
<div id="ex2">
<h1>아래로 그라데이션</h1>
</div>
<div id="ex3">
<h1>오른쪽 아래로 그라데이션</h1>
</div>
<div id="ex4">
<h1>설정한 각도로 그라데이션</h1>
</div>
</body>
</html>
style.css
div{
padding: 40px;
margin: auto;
width: 40%;
border: 2px solid black;
}
#ex1{ /*오른쯕으로*/
background: linear-gradient(to right, blue, yellow);
}
#ex2{ /*아래로*/
background: linear-gradient(to bottom, blue, yellow);
}
#ex3{ /*오른쯕 아래로*/
background: linear-gradient(to bottom right, blue, yellow);
}
#ex4{ /*30도 방향으로*/
background: linear-gradient(30deg, blue, yellow);
}
위 코드들에서 핵심은 css에서 background 속성의 값으로 linear-gradient()라는 함수를 사용한다는 점입니다. 이 함수의 첫번째 매개변수는 방향을 정해주고, 두번째 매개변수는 시작색상을, 세번째 매개변수는 종료색상을 정해줍니다.
<참고자료>
[1] https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients, developer.mozilla.org, "CSS 그라데이션 사용하기"
'Dev > HTML, CSS' 카테고리의 다른 글
| div 요소 테두리 그리기(css) (0) | 2020.07.04 |
|---|---|
| 태그(tag)와 요소(element) 용어 정리 (0) | 2020.07.03 |
| html 문서 내 의 의미는? (0) | 2020.06.19 |
| css로 이미지 가운데 정렬하는 두 가지 방법 (0) | 2020.06.18 |
| sticky header와 sticky footer 만들기(css) (8) | 2020.06.01 |
| 반응형 웹페이지 기본 틀 만들기(그리드, 미디어쿼리 활용) (0) | 2020.05.26 |
| php 변수값을 javascript 변수에 대입하려면? (0) | 2020.05.20 |
| HTML, CSS, JAVASCRIPT, PHP 주석 처리 (0) | 2020.05.13 |