[Jquery, CSS] 색 스타일(color style) - 그라데이션(gradient)


Study/Javascript, Jquery, CSS  2016.03.23 01:55

안녕하세요. 명월입니다.


이번 포스트에서는 CSS의 색 스타일에 대해 공부하겠습니다.

CSS의 색 스타일이라고 해서 단순하게 color:blue이거나 RGB(0,0,0,0), #FFFFFF의 형태를 공부하는 게 아니고 그라데이션을 공부하려고 합니다.


제 블로그에도 현재 왼쪽 메뉴 상단을 보면 그라데이션이 설정되어있네요. 저같이 디자인과 거리가 아주 먼 사람에게는 이런 그라데이션은 단비 같은 효과라고 하겠습니다. 실제로 예전에 만든 사이트는 그라데이션으로 도배를 한 적도 있어요.. 지저분할 거 같았는데 뜻밖에 이쁘더라고요...저만...ㅎㅎㅎ


색 지정을 하는 스타일에는 background-color, color, border-color 등등 몇 개가 존재합니다.. 그중에서 가장 많이 쓰는 background-color로 예제를 만들어서 자세하게 공부하겠습니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <style>
      div.exam{
        display:inline-block;
        width:9%;
        height:100px;
        border:1px solid #000;
        float:left;
      }
      div.exam:nth-of-type(1){
        background:linear-gradient(180deg,silver,purple);
      }
      div.exam:nth-of-type(2){
        background:linear-gradient(to top right,red 0%,white 50%,blue 100%);
      }
      div.exam:nth-of-type(3){
        background:radial-gradient(circle,yellow,green);
      }
      div.exam:nth-of-type(4){
        background:radial-gradient(50px 50px at 80px 30px,maroon,olive,aqua);
      }
      div.exam:nth-of-type(5){
        background:repeating-linear-gradient(navy 20%,teal 80%);
      }
      div.exam:nth-of-type(6){
        background:repeating-linear-gradient(-45deg,white, white 5px,black 5px,black 10px);
      }
      div.exam:nth-of-type(7){
        background:repeating-radial-gradient(circle closest-side,gray 0px, lime 20px);
      }
      div.exam:nth-of-type(8){
        background:repeating-radial-gradient(circle,transparent, white 5px,fuchsia 5px,fuchsia 10px);
      }
    </style>
  </HEAD>
  <BODY>
    <div class="exam"></div>
    <div class="exam"></div>
    <div class="exam"></div>
    <div class="exam"></div>
    <div class="exam"></div>
    <div class="exam"></div>
    <div class="exam"></div>
    <div class="exam"></div>
  </BODY>
</HTML>

먼저 가장 위에 있는 linear-gradient는 첫 파라미타가 180도, 실버,보라색으로 설정하면 위에서 실버색으로 해서 아래로 보라색이 됩니다.

두 번째는 to top right는 아래 왼쪽에서 위 오른쪽으로 처음은 빨강, 가운데는 흰색, 마지막은 파란색으로 그라데이션이 되겠습니다.

세 번째는 선 형식의 그라데이션이 아닌 원 형식의 그라데이션입니다. 중심이 노락색에서 녹색으로 퍼져나가는 형태입니다.

네 번째는 좌우 50px 위아래 50px인 원을 left 80px top 30px로 바탕은 아쿠아 중심은 maroon, 원의 가장자리는 올리브색으로 만들어집니다.

다섯 번째는 네이비 20%, 틸색 80%으로 그려지는 그라데이션입니다.

여섯 번째는 사선을 나타내고 일곱 여덞 번째도 원을 나타내고 있습니다.

첫 번째 두 번째는 저도 자주 쓰는 그라데이션입니다. 세 번째부터는 저도 처음 보는 그라데이션이네요.. 일곱 번째와 여덞 번째는 일반 사이트에서 쓰기에는 무리가 있어보이는 형태이네요.


댓글 2개가 달렸습니다.
댓글쓰기
  1. SONYLOVE
    2016.03.23 14:11 신고 |  수정/삭제  댓글쓰기

    두번째는 저도 좋아보이네요. 자주 써먹어야 할듯 ㅎㅎ

    • 明月 v명월v
      2016.03.23 16:18 신고 |  수정/삭제

      SONYLOVE님 안녕하세요...
      SONYLOVE님 덕분에 스킨 만드는게 일단락 된듯..
      아직 버그는 많지만 SONYLOVE님 블로그 자주 방문해서 여러가지 공부하고 있습니다.