Color

1. Primary (주 색상): 이 색상은 일반적으로 브랜드나 웹사이트의 주요 색상으로 사용됩니다. 가장 눈에 띄고, 웹사이트나 앱의 핵심 테마를 나타냅니다.

2. Secondary (보조 색상): 이 색상은 주 색상을 보완하며, 대조적인 요소나 부가적인 버튼, 링크 등에 사용됩니다.

3. Success (성공): 성공, 완료, 긍정적인 액션을 나타내는 데 사용됩니다. 예를 들어, 작업 완료 메시지, 확인 버튼 등에 사용됩니다.

4. Info (정보): 정보 메시지나 팁, 추가적인 상세 정보를 나타내는 데 사용됩니다.

5. Warning (경고): 사용자에게 경고나 주의가 필요한 상황을 나타내는 데 사용됩니다. 예를 들어, 오류가 발생하기 전의 상황이나 주의해야 할 사항을 알릴 때 사용됩니다.

6. Danger (위험): 오류, 위험, 중요한 문제를 나타내는 데 사용됩니다. 일반적으로 '삭제', '취소'와 같은 중요하고 위험한 액션에 사용됩니다.

7. Light (밝은 색상): 밝은 배경이나 경계선, 그림자 등에 사용되며, 공간에 밝음과 경쾌함을 더하는 데 사용됩니다.

8. Dark (어두운 색상): 어두운 배경, 텍스트, 경계선 등에 사용됩니다. 일반적으로 우아하고 진지한 느낌을 줍니다.

gradient

SCSS에서 색상의 그라데이션을 만들기 위해서는 linear-gradient 또는 radial-gradient 함수를 사용할 수 있습니다. 이 함수들은 CSS의 일부로, 웹 페이지의 배경이나 요소에 다채로운 그라데이션 효과를 적용할 수 있도록 해줍니다.

1. 선형 그라데이션 (Linear Gradient)

선형 그라데이션은 한 방향(위에서 아래, 왼쪽에서 오른쪽 등)으로 색상이 변화하는 그라데이션입니다.

SCSS 예시:

.linear-gradient {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

이 코드는 왼쪽에서 오른쪽으로 색상이 #ff7e5f에서 #feb47b로 변화하는 선형 그라데이션을 생성합니다.

2. 방사형 그라데이션 (Radial Gradient)

방사형 그라데이션은 중심점에서 바깥 방향으로 색상이 변화하는 그라데이션입니다.

SCSS 예시:

.radial-gradient {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
}

이 코드는 중심에서 바깥쪽으로 #ff7e5f에서 #feb47b로 변화하는 방사형 그라데이션을 생성합니다.

고급 그라데이션

SCSS의 믹스인을 사용하여 보다 복잡한 그라데이션을 쉽게 재사용할 수 있습니다.

SCSS 믹스인 예시:

@mixin gradient-background($start-color, $end-color, $direction: to right) {
  background: linear-gradient($direction, $start-color, $end-color);
}

.my-gradient {
  @include gradient-background(#ff7e5f, #feb47b);
}

이 예시에서 gradient-background 믹스인은 선형 그라데이션을 생성하며, 사용자가 색상과 방향을 지정할 수 있습니다. my-gradient 클래스는 이 믹스인을 사용하여 그라데이션을 적용합니다.

사용 시 고려 사항

• 그라데이션은 브라우저간 호환성이 다를 수 있으므로, 브라우저별 접두사(-webkit-, -moz- 등)를 고려해야 합니다.
• 복잡한 그라데이션은 페이지 로딩 시간에 영향을 줄 수 있습니다.
• 그라데이션 색상과 방향은 디자인 요구사항에 따라 조정될 수 있습니다.