그라디언트

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

CSS의 그라데이션을 사용하면 둘 이상의 색상 사이에서 부드러운 전환 효과를 만들 수 있습니다.

간단한 선형 그라데이션부터 시작해 보겠습니다:

/* 위에서 아래로 흐르는 선형 그라데이션 생성 */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

이것은 상단의 오렌지색(#ff9966)에서 하단의 붉은색(#ff5e62)으로 전환되는 그라데이션을 생성합니다.

다음 예제와 같이 방향을 지정하고 여러 색상을 사용할 수도 있습니다:

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

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

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

위에서 아래로 진행
#FFD700 (gold) 색상으로 시작
#FF4500 (orangered) 색상으로 전환

치트 시트

CSS 그라데이션은 linear-gradient() 함수를 사용하여 색상 간의 부드러운 전환을 생성합니다:

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

/* 방향과 여러 색상을 포함한 선형 그라데이션 */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

일반적인 방향으로는 to bottom, to right, to left, 그리고 to top 등이 있습니다.

직접 해보기

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

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.