그라디언트

Coddy HTML 여정의 CSS 마스터 섹션에 포함된 레슨. 43개 중 21번째.

CSS의 그라디언트를 사용하면 두 가지 이상의 색상 사이에 부드러운 전환을 만들 수 있습니다.

간단한 선형 그라디언트부터 시작해 봅시다:

/* 위에서 아래로 향하는 선형 그라데이션 만들기 */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

이렇게 하면 위쪽의 주황색(#ff9966)에서 아래쪽의 붉은색(#ff5e62)으로 전환되는 그라디언트가 만들어집니다.

방향은 생략할 수 있습니다. 방향을 생략하면 linear-gradient()는 to bottom과 마찬가지로 위에서 아래로 진행됩니다:

background: linear-gradient(#ff9966, #ff5e62); /* 위에서 아래로 */

다음 예시처럼 방향을 지정하고 여러 색상을 사용할 수도 있습니다:

/* 왼쪽에서 오른쪽으로 이어지는 선형 그라데이션 만들기 */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

챌린지

쉬움

선형 그라데이션 배경을 적용하는 sunset-gradient라는 클래스의 CSS 규칙을 작성하세요. 그라데이션은 다음과 같아야 합니다.

위에서 아래로 이어져야 합니다.
#FFD700 (gold) 색상으로 시작해야 합니다.
#FF4500 (orangered) 색상으로 전환되어야 합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <style>
    .sunset-gradient {
      border: 3px solid black;
      height: 300px;
      width: 100%;
       /* Write your CSS rule here */
       
       
    }
  </style>
</head>
<body>
  <div class="sunset-gradient"></div>
</body>
</html>