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

CSS / Flex / flex-direction

CSS / Flex / flex-direction

flex-direction으로 Item의 배열 방향을 정합니다. 기본값은 row로, 왼쪽에서 오른쪽으로 배열합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { height: 400px; padding: ...

CSS / Flex / justify-content

CSS / Flex / justify-content

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

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 ...

CSS / 이미지 위에 텍스트 정가운데에 넣기

CSS / 이미지 위에 텍스트 정가운데에 넣기

사진을 강조하는 블로그나 사이트의 경우 이미지 위에 텍스트를 놓는 경우가 많습니다. 텍스트가 보이게 놓기도 하고, 마우스를 올리면 보이게 하기도 합니다. 텍스트를 이미지 위에 어떻게 넣는지 알아보겠습니다. 방법 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로 일련 번호 붙이기

CSS를 이용하여 특정 요소에 일련 번호를 붙일 수 있습니다. 이때 사용하는 속성은 counter-reset과 counter-increment입니다. 일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / text-align / 문단 정렬하는 속성

CSS / text-align / 문단 정렬하는 속성

text-align 문단 정렬 방식을 정하는 속성은 text-align입니다. 속성의 값은 다음과 같습니다. left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속 받음 예제 첫 번째 문단은 왼쪽 정렬입니다. 두 번째 문단은 오른쪽 정렬입니다. 세 번째 문단은 가운데 정렬입니다. 네 번째 문단은 양쪽 정렬입니다. 양쪽 모두를 가지런하게 ...

CSS / tab-size / 탭 크기 설정하는 속성

CSS / tab-size / 탭 크기 설정하는 속성

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> 웹브라우저에서는 다음처럼 출력합니다. 탭 크기가 ...

CSS / Flex / flex-wrap

CSS / Flex / flex-wrap

flex-wrap은 아이템들의 가로 크기 합이 콘테이너의 가로 크기를 넘어갈 때 어떻게 처리할지를 정합니다. 기본값은 nowrap로... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { box-sizing: border-box; ...

CSS / 반응형 레이아웃 만들기

CSS / 반응형 레이아웃 만들기

반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...

CSS / 표(table) 꾸미기 / 반응형 표 만들기

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> 웹브라우저의 가로 크기가 클 때는 ...