Menu
Coddy logo textTech

색상

Coddy의 CSS 프로젝트 - 멋진 버튼 코스 레슨 — 8개 중 4번째.

배경색과 텍스트 색상은 버튼 스타일을 지정할 때 가장 중요한 요소 중 하나입니다!

가독성을 위해 색상 대비를 유의하는 것이 중요합니다. 배경색이 어두울 때는 텍스트 색상이 밝아야 합니다.

어두운 색상의 몇 가지 예:

  • 검정색
  • 파란색
  • 빨간색
  • 갈색

밝은 색상의 몇 가지 예:

  • 흰색
  • 노란색
  • 분홍색
challenge icon

챌린지

쉬움

작업:

  • 버튼의 텍스트 색상을 white로 설정하세요.
  • 버튼의 배경색을 어두운 색으로 설정하여 충분한 대비를 갖도록 하세요!

팁:

다음과 같이 선형 그라데이션 배경색을 설정할 수 있습니다 (색상은 조정 가능합니다).

background: linear-gradient(rgb(6, 6, 209), rgb(46, 46, 219));

또는 각도를 사용할 수도 있습니다 (예: 45도).

background: linear-gradient(45deg, rgb(6, 6, 209), rgb(46, 46, 219));

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

CSS 프로젝트 - 멋진 버튼의 모든 레슨