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

Study/Javascript, Jquery, CSS 2020. 3. 10. 18:57

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

이 글은 CSS에서 색 스타일(color style) - 그라데이션(gradient)에 대한 글입니다.

CSS에서 색깔을 표현하는 방법은 3가지가 있습니다.

첫번째는 대표적인 색명으로 표현하는 방법입니다.즉, color: blue라던가 color: red같이 표현하는 방법입니다.

두번째는 RGB식으로 표현하는 방법입니다. RGB(255,255,255)로 첫번째는 빨간색, 두번째는 녹색, 세번째는 파란색의 16진수 값입니다.

빛의 3색 기준이므로 RGB(0,0,0)은 검은색이고 RGB(255,255,255)는 흰색입니다.

RGB(255,0,0)은 빨간색, RGB(0,255,0)은 녹색, RGB(0,0,255)은 파란색입니다.

세번째는 HEX(16진수)값으로 설정하는 방법입니다. #000000인데 앞의 두자리는 빨간색, 가운데 두자리는 녹색, 세번쨰는 파란색입니다.

역시 빛의 3색 기준이므로 #000000은 검은색, #FFFFFF은 흰색입니다. (16진수 FF = 255)

#FF0000은 빨간색, #00FF00은 녹색, #0000FF은 파란색이 됩니다.

<!DOCTYPE html>	
<html>	
  <head>
    <style>
      /* 대표색명으로 색 표시 - 파란색 */
      .color-1 {
        color: blue;
      }
      /* RGB 타입의 흰색 */
      .color-2 {
        color: RGB(255,255,255);
        /* 글자가 흰색이라 바탕을 검은색으로 설정 */
        background-color: black;
      }
      /* RGB 타입의 검은색 */
      .color-3 {
        color: RGB(0,0,0);
      }
      /* RGB 타입의 빨간색 */
      .color-4 {
        color: RGB(255,0,0);
      }
      /* RGB 타입의 녹색 */
      .color-5 {
        color: RGB(0,255,0);
      }
      /* RGB 타입의 파란색 */
      .color-6 {
        color: RGB(0,0,255);
      }
      /* HEX 타입의 흰색 */
      .color-7 {
        color: #FFFFFF;
        /* 글자가 흰색이라 바탕을 검은색으로 설정 */
        background-color: black;
      }
      /* HEX 타입의 검은색 */
      .color-8 {
        color: #000000;
      }
      /* HEX 타입의 빨간색 */
      .color-9 {
        color: #FF0000;
      }
      /* HEX 타입의 녹색 */
      .color-10 {
        color: #00FF00;
      }
      /* HEX 타입의 파란색 */
      .color-11 {
        color: #0000FF;
      }
    </style>
  </head>
  <body>
    <div class="color-1">색명 표시법</div>
    <div class="color-2">RGB 표시법 (흰색)</div>
    <div class="color-3">RGB 표시법 (검은색)</div>
    <div class="color-4">RGB 표시법 (빨간색)</div>
    <div class="color-5">RGB 표시법 (녹색)</div>
    <div class="color-6">RGB 표시법 (파란색)</div>
    <div class="color-7">HEX 표시법 (흰색)</div>
    <div class="color-8">HEX 표시법 (검은색)</div>
    <div class="color-9">HEX 표시법 (빨간색)</div>
    <div class="color-10">HEX 표시법 (녹색)</div>
    <div class="color-11">HEX 표시법 (파란색)</div>
  </body>
</html>

색명 표시법

RGB 표시법 (흰색)

RGB 표시법 (검은색)

RGB 표시법 (빨간색)

RGB 표시법 (녹색)

RGB 표시법 (파란색)

HEX 표시법 (흰색)

HEX 표시법 (검은색)

HEX 표시법 (빨간색)

HEX 표시법 (녹색)

HEX 표시법 (파란색)

참조 링크 - https://www.w3schools.com/cssref/css_colors.asp

단일색 뿐아니라 복합적인 색을 나타내는 방법도 있습니다. 그걸 그라데이션(gradient)이라고 합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* exam클래스의 태그를 가로로 나열하는 스타일입니다. */
      div.exam {
        display: inline-block;
        /* 11개의 태그를 균등하게 나누었다.*/
        width: 9%;
        /* 높이는 100px */
        height: 100px;
        /* 테두리는 검은색 */
        border: 1px solid #000;
        float: left;
      }
      /* 선 스타일의 그라데이션 180도 즉, 위에서 아래로 은색으로 보라색으로 */
      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);
      }
      /* 원 스타일의 그라데이션, 좌우 50px, 위아래 50px, 원을 left 80%, top 30px에서 maroon색에서 올리브 색으로 바뀌면서 아쿠아색으로 */
      div.exam:nth-of-type(4) {
        background: radial-gradient(50px 50px at 80px 30px,maroon,olive,aqua);
      }
      /* 반복 스타일의 그라데이션, 네이비 색 20%, 틸색 80% */
      div.exam:nth-of-type(5) {
        background: repeating-linear-gradient(navy 20%,teal 80%);
      }
      /* 반복 스타일의 그라데이션, 315도(-45도) 왼쪽 위에서 오른쪽 아래로, 흰색 5px 중간색은 검은색 5px, 마지막은 검은색 10px으로 */
      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);
      }
      /* 반복 스타일의 그라데이션, 원 스타일, 흰색 5px, 핑크색 5px, 마지막은 10px */
      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>

처음 div태그의 linear-gradient의 설정은 선형 그라데이션입니다. 그라데이션의 변환 각도 180도의 뜻은 수평으로 위에서 아래로 색은 실버색에서 보라색으로 변하는 설정입니다.

두 번째는 위 오른쪽 아래 왼쪽 각도입니다. 처음에는 적색, 가운데는 흰색, 마지막은 파란색으로 설정됩니다.

세 번째 radial-gradient는 원형 계열의 그라데이션입니다. circle 원 스타일이며 처음에는 한가운데에서 바깥쪽으로 색은 노란색에서 녹색으로 변하는 설정입니다.

네 번째도 원형 계열의 그라데이션입니다. 원형의 크기가 가로폭 50px, 세로높이는 50px입니다. "at"의 후 원 위치입니다. 오른쪽에서 80px 위에서 30px의 중심에서 적갈색, 올리브, 아쿠아 색으로 변하는 설정입니다..

다섯 번째 네이비 색 20 %, teal 색 80 %, 수평 (0deg또ㅗ는 180deg) 각도에서 반복하는 그라데이션입니다.

여섯 번째 각도 (-45deg = 315deg)에서 반복하고 처음 흰색에서 흰색까지 5px 흑색 5px에서 흑색 10px까지 그라데이션입니다.

일곱 번째 repeating-radial-gradient 반복 원형 계열의 그라데이션입니다.

여기서 키워드는 네 개가 있지만, closest-side, closest-corner, farthest-side, farthest-corner가 있습니다.

키워드	설명
closest-side	closest-side은 그 중심에 가장 가까운 상자의 측면(원형) 또는 중심에 가장 가까운 수직 및 수평의 두 변 (타원의 경우)에 일치합니다.
closest-corner	closest-corner은 상자의 중심에서 가장 가까운 모서리에 정확하게 맞도록 크기 설정합니다.
farthest-side	closest-side와 비슷하지만, farthest-side은 상자의 중심에서 가장 먼 쪽(또는 수직 및 수평 방향)에 맞는 크기로 되어 있습니다.
farthest-corner	farthest-corner은 상자의 중심에서 가장 먼 구석에 정확하게 맞도록 크기가 설정됩니다.

마지막은 투명에서 흰색 5px, 자홍색 색상 5px에서 자홍색 색상 10px 변하는 설정입니다.

그라데이션은 여러가지 색을 표현하는 데서 좀 화려하게 나타낼 수 있는데, 너무 자주 사용하면 콘텐츠에 집중도가 떨어질 수가 있기 때문에 적당히 쓰는게 좋습니다.

여기까지 CSS에서 색 스타일(color style) - 그라데이션(gradient)에 대한 글이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.

저작자표시 비영리 동일조건

'Study > Javascript, Jquery, CSS' 카테고리의 다른 글

[Javascript] Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법 (2)	2020.03.23
[Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...) (0)	2020.03.23
[Javascript] 변수 선언, 제어문, 함수 사용법 (0)	2020.03.23
[CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드) (0)	2020.03.13
[CSS] 애니메이션(animation) (0)	2020.02.28
[CSS] 트랜스폼 (transform) (0)	2020.02.19
[CSS] 트랜지션 (transition) (0)	2020.02.18
[CSS] Column 요소 스타일 (0)	2020.02.17

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

'Study > Javascript, Jquery, CSS' 카테고리의 다른 글

최근에 올라온 글

티스토리툴바