CSS / linear-gradient - 선형 그라데이션 효과 만들기
linear-gradient
linear-gradient는 CSS3에서 추가된 것으로, 선형 그라데이션 효과를 만듭니다. 인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다.
기본 문법
linear-gradient( direction, color1, color2, …, color3 )
direction에는 그라데이션 방향을 입력합니다.
- to bottom : 위에서 아래로 그라데이션을 만듭니다. (기본값)
- to top : 아래에서 위로 그라데이션을 만듭니다.
- to left : 오른쪽에서 왼쪽으로 그라데이션을 만듭니다.
- to right : 왼쪽에서 오른쪽으로 그라데이션을 만듭니다.
- ndeg : n도의 방향으로 그라데이션을 만듭니다.
색은 여러개 입력할 수 있습니다. 입력한 순서로 설정한 방향으로 그라데이션을 만듭니다. 예를 들어
linear-gradient( to right, yellow, red )
는 왼쪽에서 오른쪽으로 노란색과 빨간색 순서로 그라데이션을 만듭니다.
예제 1
방향에 따라 그라데이션이 어떻게 만들어지는지 비교하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Gradient</title>
<style>
div {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.jbGrad01 {
background: linear-gradient( to bottom, yellow, red );
}
.jbGrad02 {
background: linear-gradient( to top, yellow, red );
}
.jbGrad03 {
background: linear-gradient( to right, yellow, red );
}
.jbGrad04 {
background: linear-gradient( to left, yellow, red );
}
.jbGrad05 {
background: linear-gradient( 45deg, yellow, red );
}
</style>
</head>
<body>
<div class="jbGrad01">to bottom</div>
<div class="jbGrad02">to top</div>
<div class="jbGrad03">to right</div>
<div class="jbGrad04">to left</div>
<div class="jbGrad05">45deg</div>
</body>
</html>
색이 사용하는 길이 정하기
색만 입력했을 때는 색을 균등하게 배분하여 그라데이션을 만듭니다. 색 뒤에 백분율 또는 픽셀 등으로 길이를 입력하면 그 길이까지 해당 색을 사용합니다. 예를 들어
linear-gradient( to right, yellow 50%, red 60%, purple )
은 해당 요소의 왼쪽에서 50%까지는 노란색, 50% 초과 60% 이하에는 빨간색, 나머지는 보라색으로 그라데이션을 만듭니다.
예제 2
색 뒤에 길이를 정하여 그라데이션을 만드는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Gradient</title>
<style>
div {
width: 100%;
height: 100px;
margin-bottom: 10px;
}
.jbGrad01 {
background: linear-gradient( to right, yellow, red, purple, blue );
}
.jbGrad02 {
background: linear-gradient( to right, yellow 50%, red, purple, blue );
}
.jbGrad03 {
background: linear-gradient( to right, yellow 50%, red 60%, purple, blue );
}
.jbGrad04 {
background: linear-gradient( to right, yellow 50px, red 300px, purple 90%, blue );
}
</style>
</head>
<body>
<div class="jbGrad01">to right, yellow, red, purple, blue</div>
<div class="jbGrad02">to right, yellow 50%, red, purple, blue</div>
<div class="jbGrad03">to right, yellow 50%, red 60%, purple, blue</div>
<div class="jbGrad04">to right, yellow 50px, red 300px, purple 90%, blue</div>
</body>
</html>
그라데이션 반복
repeating-linear-gradient는 그라데이션을 반복합니다.
예제 3
그라데이션을 반복하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Gradient</title>
<style>
div {
width: 100%;
height: 400px;
}
.jbGrad01 {
background: repeating-linear-gradient( yellow, red 10%, purple 20% );
}
</style>
</head>
<body>
<div class="jbGrad01"></div>
</body>
</html>
Related Posts
flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...
justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...
CSS / display 속성으로 표 만들기 - table, table-row, table-cell
display 속성값 중 표와 관련된 값들 display 속성값으로 table, table-row, table-cell 등을 사용해서 요소를 표(table)처럼 표현할 수 있습니다. 표처럼 보이기 위해 사용할 수 있는 속성값들은 다음과 같습니다. table : <table> 요소처럼 표현합니다. table-caption : <caption> 요소처럼 표현합니다. table-column-group : <colgroup> 요소처럼 표현합니다. table-header-group : <thead> 요소처럼 표현합니다. table-footer-group : <tfoot> 요소처럼 표현합니다. table-row-group : <tbody> 요소처럼 표현합니다. table-cell ...
사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 1 다음은 이미지와 텍스트가 있는 간단한 문서입니다. 이미지는 파란색의 사각형이고, 구분하기 쉽도록 텍스트의 배경색은 노란색으로 했습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-wrap { width: 40%; margin: 10px auto; border: 1px solid ...
CSS / counter-reset, counter-increment로 일련 번호 붙이기
CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있습니다. 이때 사용하는 속성은 counter-reset과 counter-increment입니다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 ...
HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 코드를 만들면...(각 줄 앞에 있는 빈 칸은 모두 탭입니다.) <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; } </style> </head> <body> <pre> Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. </pre> </body> </html> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...
flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정합니다. 기본값은 nowrap로... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; ...
반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...
CSS / 표(table) 꾸미기 / 반응형 표 만들기
데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...