From 5d17a3542d7c8904bf72ba2df6154ab4886a1df9 Mon Sep 17 00:00:00 2001 From: hochan222 Date: Thu, 28 Oct 2021 17:43:01 +0900 Subject: fix: flaws --- ...1200px-hsl_color_solid_cylinder_alpha_lowgamma.png | Bin 0 -> 142343 bytes files/ko/web/html/applying_color/index.html | 18 +++++++++--------- 2 files changed, 9 insertions(+), 9 deletions(-) create mode 100644 files/ko/web/html/applying_color/1200px-hsl_color_solid_cylinder_alpha_lowgamma.png diff --git a/files/ko/web/html/applying_color/1200px-hsl_color_solid_cylinder_alpha_lowgamma.png b/files/ko/web/html/applying_color/1200px-hsl_color_solid_cylinder_alpha_lowgamma.png new file mode 100644 index 0000000000..3537cd8917 Binary files /dev/null and b/files/ko/web/html/applying_color/1200px-hsl_color_solid_cylinder_alpha_lowgamma.png differ diff --git a/files/ko/web/html/applying_color/index.html b/files/ko/web/html/applying_color/index.html index 7fd7836e35..fda4610fa5 100644 --- a/files/ko/web/html/applying_color/index.html +++ b/files/ko/web/html/applying_color/index.html @@ -64,7 +64,7 @@ translation_of: Web/HTML/Applying_color

테두리

-

모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다.

+

모든 요소는 주위에 테두리를 가질 수 있습니다. 기본적인 테두리는 요소 콘텐츠의 모서리를 따라 그리는 선입니다.

{{cssxref("border")}} 단축 속성을 사용하면 색은 물론 너비와 스타일(실선, 점선 등)같은 속성을 한 번에 설정할 수 있습니다.

@@ -147,8 +147,8 @@ translation_of: Web/HTML/Applying_color

많은 경우, 디자이너와 아티스트는 HSL(색조/채도/명도) 모델을 사용한 색을 선호합니다. 웹에서 HSL 색상은 HSL 함수 표기법을 사용해 나타냅니다. CSS hsl() 함수의 사용법 자체는 rgb() 함수와 매우 유사합니다.

-
HSL color cylinder -
그림 1. HSL 색 원기둥. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Wikipedia의 SharkD, CC BY-SA 3.0 라이선스 아래에서 재배포.
+
HSL color cylinder +
그림 1. HSL 색 원기둥. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Wikipedia의 SharkD, CC BY-SA 3.0 라이선스 아래에서 재배포.
@@ -405,7 +405,7 @@ colorPicker.addEventListener("change", function(event) {
  • Browse web sites that let you look at lots of existing color palettes and images to find inspiration.
    • -

    When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

    +

    When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

    The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

    @@ -466,23 +466,23 @@ colorPicker.addEventListener("change", function(event) {

    Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:

    -

    Right after loading Paletton.

    +

    Right after loading Paletton.

    Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

    -

    After entering base color

    +

    After entering base color

    We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

    -

    Now with complementary colors included.

    +

    Now with complementary colors included.

    If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

    -

    Triad color scheme selected

    +

    Triad color scheme selected

    That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

    -

    Triad color scheme selected

    +

    Triad color scheme selected

    Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

    -- cgit v1.2.3-54-g00ecf