차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_colors [2021/03/04 17:44]
emblim98 만듦
+++ wiki:css:css_note:css_colors [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
-====== Document ======
+====== CSS Colors ======
 <WRAP left notice 80%>
   * description : CSS Colors
@@ 줄 63: / 줄 63: @@
 </code>
 \\
+======CSS RGB Colors=====
+RGB 컬러 값은 RED, GREEN, BLUE 광원을 나타냅니다.\\
+\\
+=====RGB 값=====
+CSS에서, 컬러는 아래의 공식을 사용하여 RGB 값으로 명시될 수 있습니다.\\
+====rgb(red, green, blue)====
+\\
+각각의 매개변수 (red, green, blue)는 0~255사이의 **색상 강도(color intensity)**를 정의합니다.\\
+예를 들어, rgb(255, 0, 0)은 red가 가장 높은 값(255)으로 설정되고, 나머지 값들은 0으로 설정되었기 때문에 red로 표시됩니다.\\
+black을 나타내기 위해, 모든 컬러의 매개변수를 0으로 설정합니다: rgb(0, 0, 0)\\
+white를 나타내기 위해, 모든 컬러의 매개변수를 255로 설정합니다: rgb(255, 255, 255)\\
+\\
+회색 음영 (shades of gray)은 모든 3개의 광원에 동일한 값을 사용하여 정의되곤 합니다.\\
+\\
+=====RGBA 값=====
+RGBA 컬러 값은 알파 채널 (Alpha channel)로 RGB 컬러 값을 확장한 것이며, 컬러에 대한 불투명도 (opacity)를 지정합니다.\\
+RGBA 컬러 값은 아래의 형식으로 지정됩니다.\\
+====rgba(red, green, blue, alpha)====
+\\
+알파 매개변수는 0.0(완전 투명) ~ 1.0 (완전 불투명) 사이의 숫자로 표시합니다.\\
+\\
+======CSS HEX Colors======
+hexadecimal(16진수) 컬러는 #RRGGBB로 지정하고, RR (red), GG (green), BB (blue) 16진수는 색상의 구성 요소를 지정합니다.\\
+\\
+=====HEX 값=====
+CSS에서 아래 형식의 16진수 값을 사용하여 컬러를 지정할 수 있습니다.\\
+\\
+====#rrggbb====
+\\
+rr (red), gg (green), bb (blue)는 00 ~ ff (십진수 0~255와 동일) 사이의 16진수 값입니다.\\
+예를 들어, #ff0000는 red가 가장 높은 값(ff)로 설정되고, 나머지는 가장 낮은 값(00)으로 설정되었기 때문에 red로 표시됩니다.\\
+\\
+회색 음영 (shades of gray)은 모든 3개의 광원에 동일한 값을 사용하여 정의되곤 합니다.\\
+  * #000000, #3c3c3c, #787878, #b4b4b4, #f0f0f0, # ffffff
+\\
+=====3 자리 HEX 값 (3 Digit HEX Value)=====
+CSS 파일에서 3 자리 HEX 코드를 볼 수 있습니다.\\
+자리 HEX 코드는 6 자리 HEX 코드 중 일부에 대한 속기 표현입니다.\\
+자리 HEX 코드는 다음의 형식을 가집니다.\\
+\\
+====#rgb====
+r, g, b는 0 ~ f 사이의 값을 가진 red, green, blue 구성요소를 나타냅니다.\\
+자리 HEX 코드는 각 구성 요소에 대한 RR, GG, BB의 두 개의 값이 동일할 때에만 사용될 수 있습니다.\\
+그래서 #ff00cc를 #f0c로 쓸 수 있습니다.\\
+\\
+===예제===
+<code css>
+body {
+  background-color: #fc9; /* same as #ffcc99 */
+}
+h1 {
+  color: #f0f; /* same as #ff00ff */
+}
+p {
+  color: #b58; /* same as #bb5588 */
+}
+</code>
+\\
+======CSS HSL Colors======
+HSL은 hue (색상), saturation (채도), lightness (명도)를 나타냅니다.\\
+=====HSL 값=====
+CSS에서 아래 형식의 색상, 채도, 명도를 사용하여 지정할 수 있습니다.\\
+\\
+====hsl (색상, 채도, 명도)====
+\\
+색상 (hue)은 0 ~ 360까지의 색상환의 각도입니다. 0은 red, 120은 green, 240은 blue입니다.\\
+채도 (saturation)는 백분율 값이며, 0%는 회색 음영이고, 100%는 전체 색상입니다.\\
+명도 (lightness)도 백분율 값이며, 0%는 black, 50%는 밝거나 어둡지도 않으며, 100%는 white입니다.\\
+\\
+====채도 (Saturation)====
+\\
+채도는 색의 강도로 설명할 수 있습니다.\\
+%는 순수한 색상이며, 회색 음영이 없습니다.\\
+%는 50% 회색이지만 색상을 볼 수 있습니다.\\
+%는 완전히 회색이며, 더 이상 색상을 볼 수 없습니다.\\
+\\
+====명도 (lightness)====
+색상의 명도는 색상에 제공할 빛의 양으로 나타낼 수 있습니다.\\
+%는 빛이 없음(black)을 의미합니다.\\
+%는 50%의 빛 (어둡거나 밝지도 않음)을 의미합니다.\\
+%는 완전 밝음 (white)을 의미합니다.\\
+\\
+회색 음영은 색상 (hue)과 채도 (Saturation)를 0으로 설정하고, 명도 (lightness)를 0%~100%사이에서 조절하여 더 어둡거나 더 밝은 음영을 가지게 됩니다.\\
+\\
+=====HSLA 값=====
+HSLA 컬러 값은 컬러에 대한 불투명도 (opacity)를 지정하는 알파 채널 (alpha channel)로 HSL 컬러 값을 확장하는 것입니다.\\
+HSLA 컬러 값은 아래와 같이 지정합니다.\\
+\\
+====hsla (색상, 채도, 명도, 알파)====
+알파 매개변수는 0.0(완전 투명) ~ 1.0 (완전 불투명) 사이의 숫자로 표시합니다.\\
+\\
+===== Ref =====
+  * [[https://sqlplus.tistory.com/entry/%EB%B3%B4%EC%83%89-%EA%B5%AC%ED%95%98%EA%B8%B0-complementary-color-Opposite-Color|보색 구하기 complementary color , Opposite Color]]
+{{tag>오션 CSS Colors, RGB, HEX, HSL 주레피 보색}}
-{{tag>오션 CSS Colors, RGB, HEX, HSL}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구