티스토리 뷰

[개발]프로그래밍/css3

[css3] linear-gradient - 선형 그라데이션

좋은 블로그 2021. 4. 19. 10:08
1. 개념
linear-gradient - 선형 그라데이션
linear-gradient는 선형 그라데이션을 주는 것으로 수직이나 수평 또는 대각선으로 일정하게 변하는 것(최신 버전의 브라우저 적용)

속성

설명

to top

아래 → 위로 그라데이션 만듬

to left

오른쪽 → 왼쪽으로 그라데이션 만듬

to right

왼쪽 → 오른쪽으로 그라데이션 만듬

to bottom

위 → 아래로 그라데이션 만듬
위 속성 말고도 deg를 써서 각도로 방향을 지정해 줄 수도 있음
12시를 0도를 기준으로 시계방향으로 90 , 180 , 270 도로 설정해서 사용할 수 있음
2. 태그
linear-gradient
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
.gradient1
{
width : 200px ;
height : 200px ;
background : linear-gradient(to right bottom , red , white) ;
}
.gradient2
{
margin-top : 30px ;
width : 200px ;
height : 200px ;
background : linear-gradient(270deg , red , white) ;
}
</style>
</head>
<body>
1
<div class = "gradient1" > </div>
2
<div class = "gradient2" > </div>
</body>
</html>
결과 화면
linear-gradient 사용 예제
코드 설명
1
background : linear-gradient(to right bottom,red,white) ;
to right bottom 은 to right 왼쪽에서 오른쪽으로 그리는 것이고 to bottom 은 위에서 아래로 그리는 것입니다.
그래서 대각선 방향으로 그라데이션을 그리는데 색깔을 red 하고 white 를 주어서 빨간색에서 흰색으로 그라데이션이 그려지는 것을 확인하실 수 있습니다.
2
background : linear-gradient(270deg , red ,white); ;
2번째 예제는 똑같이 red에서 white로 그라데이션을 주는 것인데 이번에는 각도로 방향을 주었습니다.
270deg 이라고 해서 12시가 0deg 이고 3시가 90deg 이니깐 270은 9시 방향을 가리키게 됩니다.
그래서 3시에서 9시 방향으로 그라데이션을 주고 있습니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] width,height - 박스 모델의 너비와 높이  (0) 2021.04.21
[css3] radial-gradient - 원형 그라데이션  (0) 2021.04.20
[css3] background - 하나의 속성으로 배경 이미지 설정  (0) 2021.04.16
[css3] background-origin - 배경 이미지 배치 기준 조절  (0) 2021.04.16
[css3] background-position - 배경 이미지 위치 조절  (0) 2021.04.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday