|
스타일 시트 CSS gradient 종류 중 linear-gradient 그라데이션 적용하는 방법 |
|
환경: Eclipse Mars |
CSS3 부터 선형, 원형 그라데이션을 줄 수 있는 속성이 생겼습니다. 선형 그라데이션은 linear-gradient 이며, 원형 그라데이션은 radial-gradient 입니다. 원형은 다음 아티클에서 다루기로 하겠습니다. 이전에는 그라데이션을 주기 위해 투명이미지를 이용했는데 이제부터 그럴 필요가 없습니다. 물론 모든 브라우저 버전에 호환되는 것은 아니지만 IE 10, Chrome 26, Firefox 16 이상은 모두 적용이 됩니다.
▼ gradient 는 한 방향에서 다른 방향으로 진행되어 가면서 색을 조절하는 효과를 줄 때 사용합니다. gradient 을 사용하는 속성은 background-color 아니 background 입니다. linear-gradient 의 첫 번째 인자로 들어가는 값에 따라 두 가지로 나눕니다. 첫 번째는 방향입니다. 어느 방향으로 색이 진행될지 지정하는 것입니다. 두 번째는 각도(angle) 입니다. 예를 들어 90도인 90deg 를 입력하면 왼쪽에서 오른쪽 방향으로 진행되는 것입니다.
|
linear-gradient( to bottom/to top/to left/to right/ndeg, color1, color2,....); |
▼ linear-gradient 의 첫 번째 들어가는 인수의 상수 값은 다음과 같습니다. 총 5가지중 to 가 붙은 것은 방향이며 ndeg 는 n 값 대신에 각도를 입력하면 됩니다.
l to bottom : 위에서 아래로 그라데이션을 진행하며 기본값이다.
l to top : 아래에서 위로 그라데이션을 진행한다.
l to left : 오른쪽에서 왼쪽으로 그라데이션을 진행한다.
l to right : 왼쪽에서 오른쪽으로 그라데이션을 진행한다.
l ndeg : n 도의 방향으로 그라데이션을 진행한다.
|
¤ 두 가지 색상을 이용해서 방향과 각도 지정으로 그라데이션 적용하기 |
▼ 제일 기본적인 방법으로 첫 번째 인수에서 그라데이션이 진행될 방향을 지정하고 두 가지 색상을 넣습니다. 그럼 지정한 방향으로 진행되면서 색상이 변하게 됩니다. 여기에서 특이한 것은 방향 뿐만 아니라 진행되는 각도까지 적용이 가능합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
font-size:14pt;
color: white;
width: 500px;
}
div {
border-style: solid;
border-width: 1px;
margin: 5px; padding: 20px
}
.gradient1 {
background: linear-gradient(to bottom, green, black);
}
.gradient2 {
background: linear-gradient(to top, green, black);
}
.gradient3 {
background: linear-gradient(to right, green, black);
}
.gradient4 {
background: linear-gradient(to left, green, black);
}
.gradient5 {
background: linear-gradient(45deg, green, black);
}
</style>
</head>
<body>
<div class="gradient1">to bottom</div>
<div class="gradient2">to top</div>
<div class="gradient3">to right</div>
<div class="gradient4">to left</div>
<div class="gradient5">45deg</div>
</body>
</html>
|
¤ 세 가지 이상의 색상으로 그라데이션 만들기 |
▼ 다음은 3가지 이상의 색상을 넣었을 때 그라데이션이 진행되는 형태입니다. 샘플에서처럼 색상을 지정하는 방식은 여러가지 입니다. 상수값, rgb, 16진수 로 표현이 가능합니다. 이렇게 색상은 여러 개 넣어서 표현이 가능합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
font-size:14pt;
color: white;
width: 500px;
}
div {
border-style: solid;
border-width: 1px;
margin: 5px; padding: 20px
}
.gradient1 {
background: linear-gradient(to bottom,
red, #f06d06, rgb(255, 255, 0), green)
}
.gradient2 {
background: linear-gradient(to top,
red, #f06d06, rgb(255, 255, 0), green);
}
.gradient3 {
background: linear-gradient(to right,
red, #f06d06, rgb(255, 255, 0), green);
}
.gradient4 {
background: linear-gradient(to left,
red, #f06d06, rgb(255, 255, 0), green);
}
.gradient5 {
background: linear-gradient(45deg,
red, #f06d06, rgb(255, 255, 0), green);
}
</style>
</head>
<body>
<div class="gradient1">to bottom</div>
<div class="gradient2">to top</div>
<div class="gradient3">to right</div>
<div class="gradient4">to left</div>
<div class="gradient5">45deg</div>
</body>
</html>
|
¤ 그라데이션이 멈추는 위치 지정하기 |
▼ 그라데이션이 반영될 때 뒤에 인수로 들어가는 색깔이 점점 진하게 진행되면서 끝으로 가면 제 색을 찾습니다. 색상 값에 % 를 입력하게 되면 바로 앞에 인수로 들어간 색상이 멈추는 지점을 지정하게 됩니다. 그러니까 green, black 50% 이면 바로 앞 green 색상이 전체 크기에서 50% 되는 지점에서 그라데이션이 끝나게 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
font-size:14pt;
color: white;
width: 500px;
}
div {
border-style: solid;
border-width: 1px;
margin: 5px; padding: 20px
}
.gradient1 {
background: linear-gradient(to bottom, green, black 50%);
}
.gradient2 {
background: linear-gradient(to top, green, black 70%);
}
.gradient3 {
background: linear-gradient(to right, green, black 30%);
}
.gradient4 {
background: linear-gradient(to left, green, black 30%);
}
.gradient5 {
background: linear-gradient(45deg, green, black 40%);
}
</style>
</head>
<body>
<div class="gradient1">to bottom 50%</div>
<div class="gradient2">to top 70%</div>
<div class="gradient3">to right 30%</div>
<div class="gradient4">to left 30%</div>
<div class="gradient5">45deg 40%</div>
</body>
</html>
|
¤ 그라데이션이 멈추는 위치를 여러 색상에 동시에 적용했을 때 |
▼ 위에서는 색상이 멈추는 지점을 마지막 색상에 지정해 줬는데, 이번에는 모든 색상 값에 멈추는 위치를 지정했습니다. 이렇게 되면 서서히 흐려지는 것이 아니라 두 경계선이 확연하게 구분이 되어 버립니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
body {
background-color: #e7e7e7;
font-size:14pt;
color: white;
width: 500px;
}
div {
border-style: solid;
border-width: 1px;
margin: 5px; padding: 20px
}
.gradient1 {
background: linear-gradient(to bottom,
red 15%, #f06d06 15%, rgb(255, 255, 0) 50%, green 50%);
}
.gradient2 {
background: linear-gradient(to top,
red 15%, #f06d06 15%, rgb(255, 255, 0) 50%, green 50%);
}
.gradient3 {
background: linear-gradient(to right,
red 15%, #f06d06 15%, rgb(255, 255, 0) 50%, green 50%);
}
.gradient4 {
background: linear-gradient(to left,
red 15%, #f06d06 15%, rgb(255, 255, 0) 50%, green 50%);
}
.gradient5 {
background: linear-gradient(45deg,
red 15%, #f06d06 15%, rgb(255, 255, 0) 50%, green 50%);
}
</style>
</head>
<body>
<div class="gradient1">to bottom </div>
<div class="gradient2">to top </div>
<div class="gradient3">to right </div>
<div class="gradient4">to left </div>
<div class="gradient5">45deg </div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일시트 CSS margin 을 주는 방법 (2) | 2019.11.23 |
|---|---|
| 스타일 시트 CSS 리스트 속성으로 ul 태그를 메뉴로 만드는 방법 (0) | 2019.05.08 |
| 스타일 시트 CSS 목록 표시 list-style-image 속성 이미지와 텍스트가 정렬 안될 때 (0) | 2019.04.08 |
| 스타일 시트 CSS 목록 표시를 위한 list-style 속성 다루는 방법 (0) | 2019.04.02 |
| 스타일 시트 CSS 대소문자 전환을 위한 text-transform 속성 사용하기 (0) | 2019.03.06 |
| 스타일 시트 CSS 공백 문자, 빈칸, 줄 바꿈 처리를 위한 white-space 속성 사용하기 (0) | 2019.02.21 |
| 스타일 시트 CSS 텍스트 꾸밈과 관련된 스타일 모음 (0) | 2019.02.12 |
| 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
