그라디언트

Frontend SELF KO

레벨 32 , 레슨 2

사용 가능

8.1 선형 그라디언트 (linear-gradient)

CSS에서 그라디언트는 두 개 이상의 색상 간의 부드러운 전환을 만들 수 있어. 주로 배경, 버튼 및 기타 요소들에 사용해서 시각적 깊이와 매력을 더해주지. CSS에서 두 가지 주요 그라디언트 종류가 있어: 선형(linear-gradient)과 방사형(radial-gradient).

선형 그라디언트는 색상들이 직선에 따라 부드럽게 전환돼. 라인의 방향과 색상 전환은 정확하게 조정할 수 있지.

문법:

    
      background: linear-gradient(direction, color-stop1, color-stop2, ...);

여기서:

direction: 그라디언트의 방향. 각도(45deg 등) 또는 키워드(to right, to bottom 등)로 지정할 수 있어.
color-stop: 그라디언트 내 색상과 위치를 정해.

예제 1: 간단한 선형 그라디언트

이 예제에서는 빨간색에서 파란색으로 오른쪽에서 왼쪽으로 전환하는 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red, blue);
      }

예제 2: 각도가 있는 선형 그라디언트

이 예제에서는 45도 각도로 노란색에서 초록색으로 전환하는 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: linear-gradient(45deg, yellow, green);
      }

예제 3: 여러 색상의 선형 그라디언트

이 예제에서는 위에서 아래로, 빨간색, 노란색, 초록색, 파란색으로 부드럽게 전환하는 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: linear-gradient(to bottom, red, yellow, green, blue);
      }

예제 4: 색상 제어점을 사용하는 선형 그라디언트

이 예제에서는 그라디언트 내 각 색상의 정확한 위치를 지정하는 제어점을 사용해봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
      }

8.2 방사형 그라디언트 (radial-gradient)

방사형 그라디언트는 중심 또는 지정된 점에서부터 시작하여 색상이 부드럽게 전환돼. 그라디언트는 원 또는 타원으로 확장돼.

문법:

    
      background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

여기서:

shape: 그라디언트의 모양 (circle 또는 ellipse)
size: 그라디언트의 크기 (closest-side, farthest-side, closest-corner, farthest-corner)
position: 그라디언트의 중심 위치 (픽셀, 퍼센트 또는 center, top, left 등의 키워드로 지정 가능)
color-stop: 그라디언트 내 색상과 위치를 정해.

예제 1: 간단한 방사형 그라디언트

이 예제에서는 원의 중심에서 빨간색에서 파란색으로 전환하는 방사형 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, blue);
      }

예제 2: 위치가 다른 방사형 그라디언트

이 예제에서는 방사형 그라디언트의 중심을 왼쪽 상단 모서리로 이동해 노란색에서 초록색으로 전환하는 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at top left, yellow, green);
      }

예제 3: 여러 색상의 방사형 그라디언트

이 예제에서는 원의 중심에서 빨간색, 노란색, 초록색, 파란색으로 부드럽게 전환하는 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle, red, yellow, green, blue);
      }

예제 4: 색상 제어점을 사용하는 방사형 그라디언트

이 예제에서는 그라디언트 내 각 색상의 정확한 위치를 지정하는 제어점을 사용해봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: radial-gradient(circle at center, red 0%, yellow 25%, green 50%, blue 100%);
      }

8.3 복잡한 그라디언트 예제

예제 1: 투명도가 있는 선형 그라디언트

이 예제에서는 투명도를 사용해서 반투명한 빨간색에서 반투명한 파란색으로 전환하는 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
      }

예제 2: 크기가 있는 방사형 그라디언트

이 예제에서는 요소의 가장 가까운 쪽을 채우는 타원형 방사형 그라디언트를 만들어봐:

HTML

    
      <div class="background"></div>

CSS

    
      .background {
        min-height: 200px;
        background: radial-gradient(ellipse closest-side, red, blue);
      }

예제 3: 버튼을 위한 그라디언트 만들기

그라디언트를 사용하면 버튼을 더 매력적으로 만들 수 있어. 이 예제의 그라디언트는 위에서 아래로, 연한 녹색에서 짙은 녹색으로 전환하여 버튼에 볼륨과 깊이를 더해줘:

HTML

    
      <button type="button" class="button">Button</button>

CSS

    
      .button {
        background: linear-gradient(to bottom, #4caf50, #2e7d32);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
      }

그라디언트를 사용하는 장점:

1. 시각적 매력. 그라디언트를 사용하면 색상 간의 부드러운 전환을 만들어 디자인 요소에 시각적 깊이와 매력을 더할 수 있어.

2. 유연성. 그라디언트를 조정하여 간단한 전환부터 복잡한 다색 배경까지 다양한 효과를 만들 수 있어.

3. 반응형 디자인 지원. 그라디언트는 다양한 화면 크기와 해상도에 쉽게 적응해서 반응형 웹 디자인을 만들 때 유용해.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION