커피 스타일 시트: 색상으로서의 커피

그들은 개발자가 커피를 위해서만 일할 수 있다고 말합니다. 나는 그것이 사실이라고 생각하지 않습니다 (하지만 너무 멀지는 않을 수도 있습니다). 그래서 이번 주 만화는 제가 가장 좋아하는 두 가지인 커피와 CSS를 섞을 것입니다. 특히 CSS 색상과 다양한 커피 유형을 CSS 색상과 유사하게 표현할 수 있는 방법에 중점을 둘 것입니다.

우리는 모두 RGB, Hex(또한 RGB) 및 HSL(재미있는 것은 RGB이기도 함)에 대해 알고 있습니다. 그리고 CSS 표준에 L*a*b*, LCH, CMYK, HWB, OKLCH와 같은 새로운 색상 형식이 등장했습니다. 많은 사람들이 "CSS에 왜 그렇게 많은 색상 형식이 필요한가요? ” 그리고 그것은 제가 오늘 만화 의 도움으로 답하려고 노력할 공정한 질문입니다 .

그리고 기존 CSS 색상 기능인 HWB 의 도움으로 할 것입니다 . HWB는 H ue- W hiteness- B 결여를 나타내지만 목적에 맞게 문자 의미를 약간 수정했습니다.

• H = 뜨거운 물 = 물( duh )
• W = 흰색 = 우유(거품, 거품, 스팀 등)
• B = 블랙 = 커피

나는 아이디어가 마음에 들지만 제한적입니다. 모카를 원한다면 어떨까요? 모카는 초콜렛이 있고 hwb()초콜렛을 표현할 방법이 없습니다. 물, 우유, 커피만 있으면 됩니다. 이 세 가지 기본 재료를 사용하여 인포그래픽에 있는 커피와 더 많은 것(몇 가지만 예를 들면 코르타도, 카페 봄본 또는 갈랑)을 만들 수 있습니다. 여전히 우리는 아이리시 커피, 에스프레소 로마노, 마로치노 등 훨씬 더 많은 것을 놓치고 있으며 물, 우유, 커피만으로는 만들 수 없습니다.

만화에 나오는 것들도 새로 만든 hwb()기능으로는 충분하지 않습니다. 예를 들어 카푸치노를 확인하십시오. 우유 66%와 커피 33%입니다. 그것은 라떼와 같은 구성을 가지고 있다는 오해의 소지가 있는 것처럼 보이지만 동일하지 않습니다. 카푸치노에서 우유는 반은 찐 것이고 반은 거품입니다.

그 디테일을 표현하는 방식이 달랐다면 더 좋았을 텐데. CSS 색상에서도 마찬가지입니다! 우리는 오랫동안 RGB를 사용해 왔지만 RGB는 제한적입니다. CSS Color Module Level 4는 웹을 현대화하고 Lab, LCH, OKLCH, CMYK, 기능과 같은 가능성의 세계를 가져오는 새로운 색상 작성 방법을 도입했으며 color()이러한 색상 공간은 표준 RGB보다 더 많은 옵션을 제공합니다.

모카의 경우 초콜릿이 누락되었습니다(HWB에서는 옵션이 아님). 대신 LCH를 사용하지 않는 이유는 무엇입니까?

• L = 가벼움/레체/라떼/라떼 = 우유
• C = 초콜릿
• H = 뜨거운 커피

그리고 같은 일이 CSS 색상에도 발생합니다. 일부 색상 기능을 사용하면 다른 색상보다 더 생생한 색상을 만들 수 있고 일부는 컴퓨터에서 더 쉬울 수도 있고 사람에게 더 간단할 수도 있습니다. 약간의 겹침이 예상되며 이는 완전히 정상입니다. 프로젝트 요구 사항에 가장 적합한 색상 형식을 선택하고 즐기십시오. CSS 색상을 가지고 놀 수 있는 흥미로운 시간입니다.

색상 기능에 대한 자세한 내용을 보려면 CSS 색상 모듈 4를 직접 확인하십시오 ( 몇 가지 훌륭한 새 색상 기능에 대한 레벨 5 !). 놀랍도록 간단합니다. 몇 년 전에 제가 게시한 기사를 확인하실 수도 있습니다 . 하지만 제가 작성한 이후로 표준이 지속적으로 변경되었기 때문에 약간 구식이라는 점에 유의하십시오.

연결

• 퍼머링크:https://comicss.art/?id=87
• 영상:https://comicss.art/comics/87/coffee-as-a-css-color.png
• 소스 코드:https://comicss.art/comics/87/coffee-as-a-css-color.html