2023년 CSS 색상 기능 - 시작하기 위해 알아야 할 모든 것

안녕하세요, 동료 개발자 여러분! 오늘은 CSS 색상 기능의 세계에 대해 알아 보겠습니다.

CSS를 사용하여 웹페이지 요소의 색상을 변경해 본 적이 있을 것입니다. 하지만 CSS 색상 기능에 대해 들어본 적이 있습니까? 그렇지 않다면, 새롭고 매우 유용한 것을 배우게 될 것이기 때문에 안전벨트를 조이세요!

어제 읽은 명언부터 시작해 보겠습니다. 좋은읽기 .

색깔은 건반이고, 눈은 하모니이며, 영혼은 많은 현이 있는 피아노입니다. 예술가는 영혼에 진동을 일으키기 위해 하나의 건반 또는 다른 건반을 만지면서 연주하는 손입니다.

CSS 색상 함수란 정확히 무엇입니까?

CSS 색상 함수는 단순한 색상 코드가 아닌 수학 함수를 사용하여 CSS에서 색상을 지정하는 방법입니다.

이 기능은 스타일시트에 사용되는 색상에 대한 더 많은 제어와 유연성을 제공합니다.

색상 기능을 사용하면 색상의 색조 , 채도 , 밝기 및 불투명도를 조정할 수 있으며 두 가지 이상의 색상을 함께 혼합할 수도 있습니다.

사용할 수 있는 CSS 함수가 여러 개 있습니다. 몇 가지를 살펴보겠습니다.

1. rgb() - 각각 빨간색, 녹색, 파란색을 나타내는 세 가지 값을 가져와 색상을 반환합니다. 값 범위는 0부터 255까지입니다. 예: color: rgb(255, 0, 0) 빨간색을 나타냅니다.

   
   

2. rgba() - rgb() 와 유사하지만 색상의 불투명도를 설정할 수도 있습니다. 네 번째 값인 alpha의 범위는 0에서 1까지입니다. 예: color: rgba(255, 0, 0, 0.5) 결과는 반투명한 빨간색이 됩니다.

   
   

3. hsl() - 색상, 채도, 밝기를 나타내는 세 가지 값을 가져와 색상을 반환합니다. 예: color: hsl(0, 100%, 50%) 결과는 빨간색입니다.

   
   

4. hsla() - hsl() 과 유사하지만 색상의 불투명도를 설정할 수도 있습니다. 예: color: hsla(0, 100%, 50%, 0.5) 결과는 반투명한 빨간색이 됩니다.

   
   

5. mix() - 선택적 가중치 매개변수를 사용하여 두 가지 색상을 함께 혼합할 수 있습니다. 예: color: mix(red, blue) 결과는 보라색 음영이 됩니다.

그들에 대해 자세히 알아 보겠습니다.

RGB()

이제 CSS 색상 기능의 세계로 여행을 계속하고 RGB 기능을 살펴보겠습니다. RGB 기능은 CSS에서 가장 일반적으로 사용되는 색상 기능 중 하나이며 그럴 만한 이유가 있습니다!

이해하기 쉽고 웹사이트에서 사용하는 색상을 다양하게 제어할 수 있습니다.

RGB 함수는 세 가지 값을 취하며, 각각은 밝기를 나타냅니다.

• 빨간색,

• 녹색, 그리고

• 각각 파란색.

이 값의 범위는 0부터 255까지입니다. 빨간색, 녹색, 파란색의 다양한 강도를 혼합하여 원하는 색상을 만들 수 있습니다.

예:

• 빨간색의 경우 - rgb(255, 0, 0)

• 녹색의 경우 - rgb(0, 255, 0)

• 파란색의 경우 - rgb(0, 0, 255)

  
  

 div { background-color: rgb(0, 255, 0); } /*this sets all th div element with green color*/

HSL()

좋습니다. CSS의 또 다른 유용한 색상 기능인 HSL 기능으로 넘어가겠습니다!

HSL 함수는 RGB 함수와 유사하지만 빨간색, 녹색, 파란색 값을 사용하는 대신 다음 값을 사용합니다.

• 색조,

• 채도 및

• 가벼움.

  
  

  이렇게 하면 특히 처음 접하는 사람들이 이해하고 사용하기가 조금 더 쉬워집니다. 색 이론 .

  
  

HSL 함수의 색상 값은 색상 자체를 나타내며 0에서 360 사이의 값을 갖습니다.

• 색상 값 0은 빨간색, 색상 값 120은 녹색, 색상 값 240은 파란색을 나타냅니다.

  
  

• HSL 함수의 채도 값은 색상의 강도를 나타내며 값 범위는 0%에서 100%입니다. 채도 값이 100%이면 색상이 완전히 포화되었음을 의미하고, 값이 0%이면 색상이 회색임을 의미합니다.

  
  

• HSL 함수의 밝기 값은 색상의 밝기를 나타내며 값 범위는 0%에서 100%입니다. 밝기 값이 50% 이면 색상이 중성 회색 임을 의미하고, 값이 100% 이면 색상이 완전히 밝음을 의미하고, 값이 0% 이면 색상이 완전히 어두움 을 의미합니다.

  
  

 div { background-color: hsl(120, 100%, 50%); } /* All `<div>` elements to green, fully saturated, and with a neutral lightness. */

RGBA()

자 여러분, RGBA 기능에 대해 이야기해 봅시다!

RGBA 함수는 RGB 함수와 동일하지만 한 가지 추가 보너스가 있습니다.

• 색상의 불투명도를 지정할 수 있습니다.

이는 배경색을 부분적으로 투명하게 만들려는 경우와 같이 요소에 반투명 효과를 만들고 싶을 때 유용할 수 있습니다.

RGBA 함수는 4개의 값을 취하는데, 처음 3개는 RGB 함수와 마찬가지로 빨간색, 녹색, 파란색 값입니다.

네 번째 값은 색상의 불투명도를 나타내며 범위는 0에서 1까지인 알파 값 입니다.

값이 0이면 색상이 완전히 투명하고, 값이 1이면 색상이 완전히 불투명합니다.

 div { color: rgba(0, 0, 255, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

HSLA()

자 여러분, HSLA 기능에 대해 이야기해 보겠습니다!

HSLA 함수는 HSL 함수와 동일하지만 한 가지 추가 보너스가 있습니다. 즉, 색상의 불투명도를 지정할 수 있습니다.

이는 배경색을 부분적으로 투명하게 만들려는 경우와 같이 요소에 반투명 효과를 만들고 싶을 때 유용할 수 있습니다.

HSLA 함수는 4개의 값을 취하는데, 처음 3개는 HSL 함수와 마찬가지로 색상, 채도, 밝기 값입니다.

네 번째 값은 색상의 불투명도를 나타내는 알파 값이며 범위는 0에서 1까지입니다.

값이 0이면 색상이 완전히 투명하고, 값이 1이면 색상이 완전히 불투명합니다.

 div { color: hsla(240, 100%, 50%, 0.75); } /* all `<div>` elements to blue with an opacity of 75%. */

A는 두 함수 모두에서 반투명 효과를 위해 우리(알파 값 0.75)인 알파를 의미하는 것과 같습니다. 간단합니다.

사용자 정의 속성 또는 CSS 변수

이제 CSS 변수라고도 알려진 CSS의 사용자 정의 속성에 대해 이야기해 보겠습니다. 사용자 정의 속성을 사용하면 스타일시트 전체에서 재사용할 수 있는 값을 저장할 수 있으므로 스타일을 더 쉽게 유지하고 코드를 더 쉽게 만들 수 있습니다. 모듈식 그리고 유연합니다.

사용자 정의 속성을 생성하려면 -- 구문 뒤에 속성 이름, 값을 차례로 사용하면 됩니다.

 :root { --primary-color: blue; }

여기서는 blue 값을 갖는 --primary-color 라는 사용자 정의 속성을 생성했습니다.

이제 이 사용자 정의 속성을 사용하려면 CSS 선택기에서 var() 함수를 사용할 수 있습니다.

 button { background-color: var(--primary-color); }

위 코드는 --primary-color 사용자 정의 속성을 사용하고 있기 때문에 모든 <button> 요소의 배경색을 파란색으로 설정합니다.

--primary-color 값을 변경하려면 한 곳에서만 변경하면 되며 전체 기간 동안 자동으로 업데이트됩니다. 스타일시트 .

사용자 정의 속성을 사용하면 다음과 같은 이점이 있습니다.

• 코드 재사용 : 스타일시트 전체에서 값을 반복하는 대신 사용자 정의 속성에 값을 저장하고 필요에 따라 재사용할 수 있습니다.

• 유지 관리성 : 사용자 정의 속성을 사용하면 한 곳에서만 값을 업데이트하면 되므로 스타일을 더 쉽게 유지 관리할 수 있습니다.

• 유연성 : 사용자 정의 속성을 사용하면 여러 선택기에서 값을 변경하는 대신 한 곳에서 값을 변경하여 사이트의 모양을 변경할 수 있습니다.

CSS 색상 함수 모범 사례

좋습니다. 프로젝트에서 CSS 색상 기능을 사용하는 모범 사례에 대해 이야기해 보겠습니다.

이 팁은 일관되고 시각적으로 매력적인 광고를 만드는 데 도움이 됩니다. 색상 팔레트 모든 사용자가 색상을 읽고 접근할 수 있는지 확인하세요.

웹사이트를 위한 색상 팔레트 만들기:

CSS 색상 작업을 할 때 가장 먼저 해야 할 일 중 하나는 웹 사이트에 대한 색상 팔레트를 만드는 것입니다. 이는 자신이 좋아하고 서로 잘 어울리는 몇 가지 색상을 선택하는 것만큼 간단할 수 있습니다.

RGB, HSL, RGBA 또는 HSLA 기능을 사용하여 색상을 정의할 수 있습니다.

시작하기 좋은 곳은 기본 색상을 선택한 다음 이를 보완할 2~3개의 강조 색상을 선택하는 것입니다.

 :root { --primary-color: hsl(180, 100%, 50%); --secondary-color: hsl(120, 100%, 50%); --tertiary-color: hsl(60, 100%, 50%); }

대비 및 계층 구조에 CSS 색상 기능 사용:

디자인에 대비와 계층 구조를 만들려면 색상을 사용하는 것이 중요합니다. 예를 들어 배경에는 더 밝은 색상을 사용하고 텍스트에는 더 어두운 색상을 사용하여 쉽게 읽을 수 있도록 할 수 있습니다.

색상을 사용하여 버튼이나 링크와 같은 특정 요소에 주의를 끌 수도 있습니다.

 body { background-color: var(--secondary-color); color: var(--primary-color); } a { color: var(--tertiary-color); }

가독성과 접근성을 위한 색상 기능 테스트:

마지막으로 가독성과 접근성을 위해 색상을 테스트하는 것이 중요합니다. 특히 색각 장애가 있는 사용자가 쉽게 읽을 수 있도록 색상 대비가 충분한지 확인하세요.

온라인 도구를 사용하여 색상 대비를 확인하고 접근성 표준을 충족하는지 확인할 수 있습니다.

• WebAIM 대비 검사기

• Muzli 색상 팔레트 생성기

• Experte - 대비 검사기

• 쿨러 - 팔레트 생성기

• Canva 팔레트 생성기

CSS 색상 기능 고급 기술

이 섹션에서는 CSS 색상 기능을 사용하는 몇 가지 고급 기술을 살펴보겠습니다.

동적 색상 구성표에 CSS 변수 사용

단 몇 줄의 코드만으로 웹 사이트의 색상 구성을 바꾸고 싶었던 적이 있습니까? 사용자 정의 속성이라고도 알려진 CSS 변수를 사용하면 가능합니다!

색상 팔레트를 저장한 다음 스타일시트 전체에서 사용할 수 있는 변수 세트를 만들 수 있습니다.

이렇게 하면 색 구성표를 변경하려는 경우 변수의 값만 업데이트하면 됩니다.

 :root { --primary-color: #00b0ff; --secondary-color: #00cc99; } h1 { color: var(--primary-color); } button { background-color: var(--secondary-color); }

이 예에서는 기본 색상과 보조 색상에 대한 두 가지 사용자 정의 속성을 만들었습니다. 그런 다음 이를 사용하여 h1 및 button 요소의 스타일을 지정했습니다.

CSS 색상 기능을 사용하여 애니메이션 만들기

CSS 색상 기능으로 할 수 있는 멋진 일 중 하나는 애니메이션을 적용하는 것입니다! 색상 간의 부드러운 전환을 만들어 웹사이트에 역동성을 더할 수 있습니다. 예를 들어, 사용자가 버튼 위로 마우스를 가져가면 버튼 색상이 변경되도록 할 수 있습니다.

 button { background-color: hsl(120, 100%, 50%); transition: background-color 0.5s ease; } button:hover { background-color: hsl(240, 100%, 50%); }

여기서는 버튼의 기본 배경색을 녹색 색조( hsl(120, 100%, 50%) 로 설정하고 버튼 위에 마우스를 올렸을 때 색상이 부드럽게 변경되도록 전환을 추가했습니다.

호버 상태의 색상을 파란색 색조( hsl(240, 100%, 50%) )로 변경했습니다.

그라데이션 및 투명도를 위해 CSS 색상 기능 사용

CSS 색상 기능으로 할 수 있는 또 다른 재미있는 일은 그라데이션과 투명도를 만드는 것입니다. RGBA 및 HSLA 색상 기능을 사용하여 반투명 색상을 생성한 다음 이를 결합하여 그라디언트를 생성할 수 있습니다.

 .gradient { background: linear-gradient(to right, rgba(255, 0, 0, 0.5), hsla(120, 100%, 50%, 0.5)); }

여기서는 빨간색 RGBA 색상에서 녹색 HSLA 색상으로 이동하는 선형 그래디언트를 만들었습니다. 두 색상 모두 알파 값이 0.5이므로 반투명합니다.

그리고 거기에 있습니다!

CSS 색상 기능을 사용한 일부 고급 기술. 이러한 기술을 재미있게 실험하고 창의력을 마음껏 발휘해 보세요!

자원

• caniuse.com [HTML5, CSS3 지원 테이블]

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

결론

결론적으로, 이 소개가 CSS 색상 기능과 사용자 정의 속성을 시작하는 데 도움이 되었기를 바랍니다.

이는 CSS 코드를 보다 유연하고 유지 관리 가능하며 작업하기 쉽게 만들 수 있는 강력한 도구입니다. 즐거운 코딩하세요!