CSS의 4가지 색상 표현 방법에 대한 자세한 그래픽 설명

색상은 필연적으로 페이지 레이아웃에 사용됩니다. 보기 좋은 색상 일치는 페이지에 많은 색상을 추가합니다. 에서 색상을 설정하는 방법을 알고 있나요? 이번 글에서는 색을 표현하는 다양한 방법에 대해 이야기해보겠습니다. 색상값을 어떻게 표현하는지 모르는 친구들이 참고하시면 좋을 것 같아요!

1. 색상을 나타내는 영어 단어

가장 직접적이고 간단한 방법은 색상을 나타내는 영어 단어를 사용하는 것입니다. 예: red color: red로 쓸 수 있습니다.

단점: 수천 가지 색상이 있으며 모든 색상에 해당하는 영어 단어가 있는 것은 아니며 사용에 제한이 있습니다.

2. 색상의 16진수 표현

16진수 색상의 구성 요소는 다음과 같습니다. #RRGGBB, 여기서 RR(빨간색) , GG(녹색) 및 BB(파란색)인 경우 모든 값은 0에서 FF 사이여야 합니다. 일반인의 관점에서 보면 16진수의 본질은 rgb이고 두 자리마다 색상을 나타냅니다. 각 두 자리의 값이 동일할 경우, 예를 들어 color: #ffcc00은 color: #fc0으로 축약될 수 있습니다.

모든 주요 브라우저는 16진수 색상 값을 지원하며 권장됩니다.

3. RGB는 색상을 나타냅니다.

RGB에서 R은 빨간색, G는 녹색, B는 파란색을 나타냅니다.

RGB 쓰기: rgb (0,0,0). 값 범위는 0~255이며, 값이 클수록 색상이 어두워집니다. RGB는 숫자 값을 사용하는 것 외에도 백분율을 사용할 수도 있으며 값은 0%에서 100%까지입니다. 예: RGB(0,0,255)와 RGB(0%, 0%, 100%)는 동일한 색상을 나타냅니다.

일반적인 색상의 RGB 표현입니다. 빨간색: rgb(255,0,0); 흰색: rgb(255,255,255); 검정색: rgb(0,0,0)

모든 주요 브라우저는 RGB 색상 값을 지원합니다.

4. HSL은 색상을 나타냅니다.

HSL 색상 값은 색상, 채도, 밝기를 나타냅니다.

Hue는 색상환의 정도(0~360)입니다. 0(또는 360)은 빨간색, 120은 녹색, 240은 파란색입니다. 채도는 백분율 값이며 0%는 회색 음영을 의미하고 100%는 풀 컬러를 의미합니다. 밝기도 백분율로 표시되며 0%는 검은색, 100%는 흰색입니다.

참고: IE9, Firefox, Chrome, Safari 및 Opera 10+는 HSL 색상 값을 지원합니다.

예: 위의 네 가지 방법을 사용하여 다양한 색상을 표현하면 코드는 다음과 같습니다.

HTML 부분:

<div class="color1">床前明月光</div>
<div class="color2">疑是地上霜</div>
<div class="color3">举头望明月</div>
<div class="color4">低头思故乡</div>

CSS 부분:

<style type="text/css">
	.color1{background-color:orange;}
	.color2{background-color:#FFFF00;}
	.color3{background:rgb(0,255,0);}
	.color4{background-color:hsl(360,50%,50%);}
</style>

Rendering:

클래스 이름이 color1인 div의 배경색은 주황색이며 이는 다음으로 직접 표현됩니다. 영어 단어, 클래스 이름 color2 div의 배경색은 16진수 #FFFF00으로 표시됩니다. 클래스 이름이 color3인 div의 배경색은 rgb(0,255,0)로 표시됩니다. 클래스 이름이 color4인 div는 진한 빨간색이고 채도가 있으며 밝기는 50%로 설정되어 hsl(360,50%,50%)로 표시됩니다.

요약: 위에서는 색상을 표현하는 4가지 방법을 소개했는데, 각각 다른 방법을 선택하는 것은 개인의 습관과 작업 요구에 따라 다릅니다. 백과사전 다양한 색상을 시도해 보세요. 도움이 되기를 바랍니다.

위 내용은 CSS의 4가지 색상 표현 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!