Properties

Properties

Editing
  • account_tree
  • bug_report

outline-color

요소의 윤곽선의 색상을 설정한다.

사용 가능한 값 타입

<'outline-color'>

DEVDIC-Specified Data Types

outline-color 속성에 사용되는 타입이다.

  • CSS Basic User Interface Module Level 4
    <color> | invert

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <color>

    sRGB 색상 공간의 색상값을 나타낸다. 알파 채널 투명도 값을 포함 할 수 있으며, 색상이 배경과 합성되는 방법을 나타낸다.  색을 생성하는 방법은 UA 표준 색상명, 16진수 값 그리고 함수로는 rgb(), rgba(), hsl(), hsla(), hwb()color(),lab(), lch(), oklab(), oklch() 함수가 있다.

    <color> 타입은 다음과 같은 방법으로 값을 정의한다.

    키워드
    사용 가능한 색상 명(예: transparent, aqua 등)으로 색상 정의
    RGB 3차원 좌표계
    #+16진수 표기법 또는 rgb(), rgba() 함수에서 색상 정의
    HSL 실린더형 좌표계
    hsl(), hsla() 함수에서 색상 정의
    CIE(국제조명위원회) 색 공간
    lab(), lch(), oklab(), oklch() 함수에서 색상 정의
    사전 정의된 색 공간
    color() 함수를 이용한 sRGB, srgb-linear, display-p3,a98-rgb, prophoto-rgb, rec2020, xyz-d50, xyz-d65, xyz 색 공간에서 색상 정의
    • CSS Color Module Level 4
      <absolute-color-base> | currentcolor | <system-color>
    Details

    포함된 타입

    • <absolute-color-base>

      기본적인 절대 색상 값을 나타낸다. 웹이 전통적으로 사용해 왔던 색상값이다.

      • CSS Color Module Level 4
        <hex-color> | <absolute-color-function> | <named-color> | transparent
      Details

      포함된 타입

      • <absolute-color-function>

        CSS에 내장된 색상을 생성하는 함수가 반환하는 값을 나타낸다. 초기의 rgb() 함수부터 현재 다양한 함수가 존재하고 있다.

        • CSS Color Module Level 4
          <rgb()> | <hsl()> | <hwb()> | <color()> | lab() | lch() | oklab() | oklch()
        Details

        포함된 타입

        • <color()>

          color() 함수의 인수를 나타내는 타입이다.

          • CSS Color Module Level 4
            color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

            <colorspace-params>은 <predefined-rgb>(또는< xyz-space>) 값과 RGB 값을 차례대로 지정한다. RGB 각각의 값의 범위는 [0,1] 범위의 <number>이거나 <percentage> 값을 갖는다. <predefined-rgb>< xyz-space>로 설정 가능한 값은 각각의 타입에 대한 내용을 참고하기 바란다.

            (예) RGB 값을 <number>로 지정하는 경우

            srgb 0.5 0 0.78

            <alpha-value>은 투명도 값을 선택적으로 지정한다.

            sRGB 색 공간에서 색상 지정

            sRGB 색 공간에서 색상과 투명도 지정

            display-p3 색 공간에서 〈pencentage〉를 사용하여 색과 투명도 지정
          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details

            포함된 타입

            • <number>

              정수 또는 실수를 표현한다.

            • <percentage>

              어떠한 기준으로 부터 백분율로 표현한다.

          • <colorspace-params>

            color() 함수에서 사용 가능한 매개 변수의 데이터 타입을 나타낸다.  RGB 계열의 미리 정의된 색 공간(predefined color spaces)에서 표현되는 색상 값이거나 XYZ 색 공간(xyz color space)의 색상 값을 나타낸다.

            • CSS Color Module Level 4
              [ <predefined-rgb-params> | <xyz-params>]
            Details

            포함된 타입

            • <predefined-rgb-params>

              color() 함수의 매개 변수 타입중 하나이다. 미리 정의된 RGB 계열의 색 공간(predefined color spaces) 키워드(<ident>)와 함께 Red, Green, Blue가 지정된 색 공간에서 가지는 값을 <number> 또는 <percentage>로 표현된다.

              • CSS Color Module Level 4
                <predefined-rgb> [ <number> | <percentage> | none ]{3}
                Example
              Details

              포함된 타입

              • <number>

                정수 또는 실수를 표현한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

                Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
                타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]
              • <predefined-rgb>

                미리 정의된 RGB 계열의 색 공간(predefined color spaces) 키워드(<ident>)를 나타낸다.

                • CSS Color Module Level 4
                  srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020
                Details

                사용되는 키워드

                • a98-rgb

                  a98-rgb 색 공간은 색의 빨강, 녹색 및 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역 내의 색은 세 가지 구성 요소가 모두 [0, 1] 범위에 있다. 전달 곡선은 감마 함수이며 1/2.2에 가깝지만 정확하지는 않다.

                • display-p3

                  CSS Color Module Level 4

                  display-p3 색 공간은 색의 빨강, 녹색 및 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 영역(gamut)의 색은 세 가지 구성 요소가 모두 [0, 1] 범위에 있다. DCI-P3와 동일한 기본 색도를 사용하지만 화이트 포인트는 D65이며 sRGB와 동일한 전달 곡선을 사용한다.

                  최신 디스플레이, TV, 노트북과 휴대폰 화면은 display-p3 색 영역의 전부 또는 거의 전부를 표시할 수 있다.

                • prophoto-rgb

                  CSS Color Module Level 4

                  prophoto-rgb 색 공간은 색의 빨강, 녹색, 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역 내 색은 세 가지 구성 요소가 모두 [0,1] 범위에 있다. 전달 곡선은 1/1.8 값의 감마 함수이며 검은색에 가까운 작은 선형 부분이다. 흰색 점은 CIE Lab에서 사용하는 것과 동일한 D50이다. 따라서 CIE Lab으로 변환할 때 색채 적응 단계가 필요하지 않다.

                  prophoto-rgb 색 공간은 물리적으로 구현할 수 없는 고채도의 원색을 사용한다. 이는 넓은 색 영역을 허용하고 특히 색조 조작에 따른 색조 변화를 최소화하기 위해 선택되었다. 디지털 사진에서 사진 이미지의 아카이브 버전을 위한 넓은 색 영역의 색 공간으로 자주 사용된다. prophoto-rgb 색 공간을 사용하면 CSS에서 동일한 RGB 값을 가진 이미지의 색상과 일치하는 색상을 지정할 수 있다.

                • rec2020

                  CSS Color Module Level 4

                  rec2020 색 공간은 색의 빨강, 녹색, 파랑 채널을 나타내는 세 가지 숫자 매개 변수를 허용한다. 색 영역의 색은 [0,1] 범위의 세 가지 구성 요소를 모두 갖는다. ITU 참조 2020은 초고화질, 4K 및 8K TV에 사용된다.

                  원색은 물리적으로 구현할 수 있지만 스펙트럼 궤적에 매우 가깝기 때문에 어려움이 있다.

                  현재 디스플레이는 rec2020의 전체 영역을 재현할 수 없다. 디스플레이가 개선되고 시간이 지나면서 적용 범위가 늘어날 것으로 예상된다.

                • srgb

                  srgb[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.

                  [SRGB]는 인코딩과 일반의 두 가지 보기 조건을 지정하며 모든 레거시 색상 기능에 사용되는 CSS의 기본 컬러 스페이스이다.

                • srgb-linear

                  srgb-linear[SRGB] 컬러 스페이스는 색상의 빨강, 녹색 및 파랑 채널을 나타내는 세 개의 숫자 매개 변수를 허용한다. 색역 내 색상에는 [0, 1] 범위의 세 가지 구성 요소가 모두 있다. 백점(whitepoint)는 D65이다.

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

            • <xyz-params>

              color() 함수의 매개 변수 타입중 하나이다. XYZ 계열의 색 공간(xyz color space)에서 색상을 설정한 값을 나타낸다. XYZ 계열의 색 공간(xyz color space)에서 사용 가능한 키워드를 지정하고  x, yz 값으로 색상을 나타낸다.

              • CSS Color Module Level 4
                <xyz-space> [ <number> | <percentage> | none ]{3}
                Example
              Details

              포함된 타입

              • <number>

                정수 또는 실수를 표현한다.

              • <percentage>

                어떠한 기준으로 부터 백분율로 표현한다.

              • <xyz-space>

                XYZ 계열의 색 공간(xyz color space)에서 사용 가능한 키워드를 나타낸다.

                • CSS Color Module Level 4
                  xyz | xyz-d50 | xyz-d65
                Details

                사용되는 키워드

                • xyz

                  xyz 컬러 스페이스는 X, Y 및 Z 값을 나타내는 세 개의 숫자 매개 변수를 허용한다. CIE XYZ[COLORIMETRY] 컬러 스페이스를 나타내며 확산 흰색의 휘도(Y)가 1.0이 되도록 조정된다. 필요한 경우 기준 흰색에 반음계로 적용된다.

                • xyz-d50

                  xyz 컬러 스페이스에서 기준 흰색이 D50이다.

                • xyz-d65

                  xyz 컬러 스페이스에서 기준 흰색이 D65이다.

              공통적으로 사용되는 값

              다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

              • none

                어떠한 값도 설정하지 않음을 나타낸다.

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        • <hsl()>

          hsl() 함수의 매개 변수를 나타낸다. 레거시로 색상(hue), 채도(saturation), 밝기(lightness) 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.

          • CSS Color Module Level 4
            hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )

            <hue>는 색상환에서 만들고자하는 색의 각도 값을 입력한다. 0360도는 빨간색이다. CSS Color Module Level 4 기준 deg, rad, grad, turn을 사용할 수 있으며 단위 없이 로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석한다.

            <percentage> 값은 각각 채도와  밝기를 나타낸다. 채도(saturation)의 경우 0%은 회색, 100%은 원색으로 만든다. 밝기(lightness)의 경우 0%은 검정, 100%은 흰색으로 만든다.

            구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

          • CSS Color Module Level 3Legacy
            hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
          • <hue>

            색상환에서 각도로 표시되는 색조 값을 나타낸다.

            • CSS Color Module Level 4
              <number> | <angle>
            Details

            포함된 타입

            • <angle>

              0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

              <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

              선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

              Details

              사용되는 단위

              아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

              • deg

                보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

              • grad

                400grad(그라디안)은 완전한 원을 만든다.

              • rad

                2π(라디안)이 완전한 원을 만든다.

              • turn

                1turn(턴)이 완전한 원을 만든다.

              관련 함수

              모든 함수를 표시하지 않을 수도 있다.

            • <number>

              정수 또는 실수를 표현한다.

              Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
              타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
          • <percentage>

            어떠한 기준으로 부터 백분율로 표현한다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        • <hwb()>

          hwb() 함수의 매개변수를 나타낸다.

          • CSS Color Module Level 4
            hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )

            <hue>는 색상환에서 만들고자 하는 색의 각도 값을 입력한다. 0360도는 빨간색이다. CSS Color Module Level 4 기준 deg, rad, grad, turn을 사용할 수 있으며 단위 없이 로 표현할 경우 CSS Color Module Level 3에 명시된 것과 같이 각도로 해석한다.

            <percentage> 값은 각각 백색률(whiteness)과  흑색률(blackness) 값이며 혼합 정도를 나타낸다.

            구문에 따라 추가적으로 / 뒤에<alpha-value> 값을 지정할 수 있으며 투명도를 0과 1의 범위 내에서 지정할 수 있다.

          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details

            포함된 타입

            • <number>

              정수 또는 실수를 표현한다.

            • <percentage>

              어떠한 기준으로 부터 백분율로 표현한다.

          • <hue>

            색상환에서 각도로 표시되는 색조 값을 나타낸다.

            • CSS Color Module Level 4
              <number> | <angle>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<hue>]
          • <percentage>

            어떠한 기준으로 부터 백분율로 표현한다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        • <lab()>

          lab() 함수의 매개변수를 나타낸다. 

          • CSS Color Module Level 4
            lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
            첫 번째 인수 L의 경우(명도): <percentage> | <number> | none
            0% = 0.0, 100% = 100.0
            두 번째 인수 a축의 거리, 세 번째 인수 b축의 거리: <percentage> | <number> | none
            -100% = -125, 100% = 125
            음수가 허용되며 이론적으로 무제한이나 실제로는 ±160을 초과하지 않는다.
            네 번째 선택 사항 투명도 <alpha-value> | none
            /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
            Lab 색 공간에서 색과 투명도 지정
          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
          • <number>

            정수 또는 실수를 표현한다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
          • <percentage>

            어떠한 기준으로 부터 백분율로 표현한다.

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        • <lch()>

          lch() 함수의 매개 변수를 나타낸다. 

          • CSS Color Module Level 4
            lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
            첫 번째 인수 L(명도)의 경우: <percentage> | <number> | none
            0% = 0.0, 100% = 100.0
            두 번째 인수 c(채도)의 경우: <percentage> | <number> | none
            0% = 0, 100% = 150
            0부터 최대 230까지(음수인 경우 0으로 고정됨)
            세 번째 H(색조)의 경우: <hue> | none
            색조 각도를 <angle> 또는 <number>로 지정한다. 설정 값에 대한 자세한 사항은 위의 LCH Space 그림을 참고한다.
            네 번째 선택 사항 투명도<alpha-value> | none
            /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
            Lch 색 공간에서 색과 투명도 지정
          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details

            포함된 타입

            • <number>

              정수 또는 실수를 표현한다.

            • <percentage>

              어떠한 기준으로 부터 백분율로 표현한다.

              Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
              타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]
          • <hue>

            색상환에서 각도로 표시되는 색조 값을 나타낸다.

            • CSS Color Module Level 4
              <number> | <angle>
            Details

            포함된 타입

            • <angle>

              0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

              <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

              선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

              Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
              타입에 대한 자세한 설명은 다음 링크를 참조하라.[<angle>]
            • <number>

              정수 또는 실수를 표현한다.

              Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
              타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
          • <number>

            정수 또는 실수를 표현한다.

          • <percentage>

            어떠한 기준으로 부터 백분율로 표현한다.

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        • <oklab()>

          oklab() 함수의 매개 변수를 나타낸다. 

          • CSS Color Module Level 4
            oklab( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
            첫 번째 인수 L의 경우(밝기): <percentage> | <number> | none
            0% = 0.0100% = 1.0
            0%(black)~100%(white) 범위에서 밝기를 지정한다. 0%이거나 100%인 경우에는 a와 b 성분은 무효가 된다. 0%보다 작은 값은 계산된 시점에서 0%로 고정되고 100%보다 큰 값은 계산된 시점에서 100%로 고정된다.
            두 번째 인수 a의 경우(a축상의 거리), 세 번째 인수 b의 경우(b축상의 거리): <percentage> | <number> | none
            -100% = -0.4100% = 0.4
            Oklab 색 공간에서 차례대로 "a"축, "b"축의 거리 값이다. 양수와 음수 모두 허용한다. W3C 사양에는 이론적으로 제한이 없으나 실제로는 ±0.5를 초과하지 않는다고 정의했다.
            네 번째 선택 사항 투명도: <alpha-value> | none
            /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
            개선된 Lab 색 공간에서 색과 투명도 지정
          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
          • <number>

            정수 또는 실수를 표현한다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]
          • <percentage>

            어떠한 기준으로 부터 백분율로 표현한다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        • <oklch()>

          oklch() 함수의 매개 변수를 나타낸다. 

          • CSS Color Module Level 4
            oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )
            첫 번째 인수 L의 경우(밝기): <percentage> | <number> | none
            0% = 0.0100% = 1.0
            0%(black)~100%(white) 범위에서 밝기를 지정한다. 0%이거나 100%인 경우에는 색조와 채도는 모두 무효가 된다. 0%보다 작은 값은 0%로 고정되고 100%보다 큰 값은 100%로 고정된다.
            두 번째 인수 c의 경우(채도): <percentage> | <number> | none
            0% = 0100% = 0.4
            Oklab 색 공간에서 "a"축과 "b"축의 거리 값이다. 양수와 음수 모두 허용하나 음수의 경우에는 계산된 값 시점에 0으로 고정된다. W3C 사양에는 이론적으로 제한이 없으나 실제로는 0.5를 초과하지 않는다고 정의했다. 채도가 0인 경우에는  색조 값은 무효가 된다.
            세 번째 H(hue)의 경우(색조): <hue> | none
            색조 각도를 또는 로 지정한다. 설정 각도에 대한 자세한 사항은 위의 Lch Space 그림을 참고한다.
            네 번째 선택 사항 투명도: <alpha-value> | none
            /로 구분된 네 번째 인수 는 선택사항으로 투명도(0~1)를 지정한다.
            개선된 Lab 색 공간에서 색과 투명도 지정
          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details

            포함된 타입

            • <number>

              정수 또는 실수를 표현한다.

            • <percentage>

              어떠한 기준으로 부터 백분율로 표현한다.

          • <hue>

            색상환에서 각도로 표시되는 색조 값을 나타낸다.

            • CSS Color Module Level 4
              <number> | <angle>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<hue>]
          • <number>

            정수 또는 실수를 표현한다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<number>]

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        • <rgb()>

          rgb() 함수의 매개 변수를 나타낸다. 레거시로 red, green, blue 값을 각각 쉼표로 구분된 매개 변수로 지정이 가능하다.

          • CSS Color Module Level 4
            rgb( [<percentage> | none]{3} [ / [<alpha-value> | none] ]? )

            <percentage>는 0~255 범위를 백분율로 지정할 수 있다.

            구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

          • CSS Color Module Level 4
            rgb( [<number> | none]{3} [ / [<alpha-value> | none] ]? )

            <number>는 red, green, blue 값을 각각  0~255 범위 내에서 지정이 가능하다. 

            구문에 따라 추가적으로 <alpha-value> 값을 지정할 수 있으며 투명도를 01의 범위 내에서 지정할 수 있다.

          • CSS Color Module Level 4Legacy
            rgb( <percentage>#{3} , <alpha-value>? )

            레거시(legacy) 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.

          • CSS Color Module Level 4Legacy
            rgb( <number>#{3} , <alpha-value>? )

            레거시(legacy) 구문이며 선택적으로 <alpha-value> 값(투명도)을 추가할 수 있게 변경 되었다.

          Details

          포함된 타입

          • <alpha-value>

            0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다. 퍼센트로 적용하는 경우에는 0%에서 100%까지 설정이 가능하며 0%는 투명, 100%는 불투명을 의미한다.

            • <number> | <percentage>
            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<alpha-value>]
          • <number>

            정수 또는 실수를 표현한다.

          • <percentage>

            어떠한 기준으로 부터 백분율로 표현한다.

            Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.
            타입에 대한 자세한 설명은 다음 링크를 참조하라.[<percentage>]

          공통적으로 사용되는 값

          다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

          • none

            어떠한 값도 설정하지 않음을 나타낸다.

        관련 함수

        모든 함수를 표시하지 않을 수도 있다.

      • <hex-color>

        값이 3, 4, 6 또는 8개의 16진수로 구성된 <hash-token> 토큰이다. 즉 16진수 색상은 해시 문자 '#' 다음에 숫자[0-9],  대소문자 구분이 없는 알파벳 문자[a-f]의 조합으로 작성된다.

        헥스(hex)로 RGB 색상을 설정하는 몇 개의 자리수(digits)는 다음과 같다.

        6 digits

        6개의 자리로 표현되는 값은 각 2개씩의 코드 조각이 16진수로 표현되는 RGB 10진수 색상값이다.

        다음 색상은 모두 동일하게 빨간색을 표현한다. FF는 10진수로 255이고 00은 최소값인 0을 나타낸다.
        color: #FF0000;
        color: rgb(255, 0, 0);

        8 digits

        8개의 자리로 표현되는 값은 6개의 자리로 표현되는 RGB 색상과 동일하고 나머지 2개의 코드는 투명도(알파채널)를 16진수 표현한 것이다.

        다음 색상은 모두 동일하게 0.8의 투명도를 갖는 빨간색을 표현한다.
        color: #FF0000CC;
        color: rgb(255 0 0 / 80%);

        3 digits

        6개의 자리로 표현되는 색상값을 약식으로 표현한다. 3개의 각 코드는 각 RGB 채널의 값을 나타낸다. F는 최대값을 나타내고 0은 최소값을 나타낸다. 모든 6개의 자리로 표현되는 색을 약식으로 표현할 수 없다는 점을 알아둬야 한다.

        다음 색상은 모두 동일하게 흰색을 표현한다.
        color: #FFFFFF;
        color: #FFF;

        4 digits

        8개의 자리로 표현되는 색상값을 약식으로 표현한다. 기본적으로 3 자리로 표현하는 방식과 동일하며 4번째 값은 투명도(알파 채널)를 지정한다.

        다음 색상은 모두 동일하게 80%의 투명도를 갖는 흰색을 표현한다.
        color: #FFFFFFCC;
        color: #FFFC;
      • <named-color>

        일반적인 색상을 더 쉽게 쓰고 읽을 수 있도록 이름이 지정된 색상 세트를 나타낸다. <ident>로 작성되며 <color>가 필요한 모든 곳에서 허용된다. 모든 색상 키워드는 ASCII 대소문자를 구분하지 않는다.

        Details

        사용되는 키워드

          •  

            aliceblue

          •  

            antiquewhite

          •  

            aqua

          •  

            aquamarine

          •  

            azure

          •  

            beige

          •  

            bisque

          •  

            black

          •  

            blanchedalmond

          •  

            blue

          •  

            blueviolet

          •  

            brown

          •  

            burlywood

          •  

            cadetblue

          •  

            chartreuse

          •  

            chocolate

          •  

            coral

          •  

            cornflowerblue

          •  

            cornsilk

          •  

            cyan

          •  

            darkblue

          •  

            darkcyan

          •  

            darkgoldenrod

          •  

            darkgray

          •  

            darkgreen

          •  

            darkkhaki

          •  

            darkmagenta

          •  

            darkolivegreen

          •  

            darkorange

          •  

            darkorchid

          •  

            darkred

          •  

            darksalmon

          •  

            darkseagreen

          •  

            darkslateblue

          •  

            darkslategray

          •  

            darkturquoise

          •  

            darkviolet

          •  

            deeppink

          •  

            deepskyblue

          •  

            dimgray

          •  

            dodgerblue

          •  

            firebrick

          •  

            floralwhite

          •  

            forestgreen

          •  

            fuchsia

          •  

            gainsboro

          •  

            ghostwhite

          •  

            gold

          •  

            goldenrod

          •  

            gray

          •  

            green

          •  

            greenyellow

          •  

            honeydew

          •  

            hotpink

          •  

            indianred

          •  

            indigo

          •  

            ivory

          •  

            khaki

          •  

            lavender

          •  

            lavenderblush

          •  

            lawngreen

          •  

            lemonchiffon

          •  

            lightblue

          •  

            lightcoral

          •  

            lightcyan

          •  

            lightgoldenrodyellow

          •  

            lightgray

          •  

            lightgreen

          •  

            lightpink

          •  

            lightsalmon

          •  

            lightseagreen

          •  

            lightskyblue

          •  

            lightslategray

          •  

            lightsteelblue

          •  

            lightyellow

          •  

            lime

          •  

            limegreen

          •  

            linen

          •  

            magenta

          •  

            maroon

          •  

            mediumaquamarine

          •  

            mediumblue

          •  

            mediumorchid

          •  

            mediumpurple

          •  

            mediumseagreen

          •  

            mediumslateblue

          •  

            mediumspringgreen

          •  

            mediumturquoise

          •  

            mediumvioletred

          •  

            midnightblue

          •  

            mintcream

          •  

            mistyrose

          •  

            moccasin

          •  

            navajowhite

          •  

            navy

          •  

            oldlace

          •  

            olive

          •  

            olivedrab

          •  

            orange

          •  

            orangered

          •  

            orchid

          •  

            palegoldenrod

          •  

            palegreen

          •  

            paleturquoise

          •  

            palevioletred

          •  

            papayawhip

          •  

            peachpuff

          •  

            peru

          •  

            pink

          •  

            plum

          •  

            powderblue

          •  

            purple

          •  

            rebeccapurple

          •  

            red

          •  

            rosybrown

          •  

            royalblue

          •  

            saddlebrown

          •  

            salmon

          •  

            sandybrown

          •  

            seagreen

          •  

            seashell

          •  

            sienna

          •  

            silver

          •  

            skyblue

          •  

            slateblue

          •  

            slategray

          •  

            snow

          •  

            springgreen

          •  

            steelblue

          •  

            tan

          •  

            teal

          •  

            thistle

          •  

            tomato

          •  

            turquoise

          •  

            violet

          •  

            wheat

          •  

            white

          •  

            whitesmoke

          •  

            yellow

          •  

            yellowgreen

      사용되는 키워드

      • transparent

        완전한 투명을 나타낸다.

        rgba(0, 0, 0, 0)의 별칭으로 사용되는 값으로 볼 수 있다. CSS Level 2 전까지는 지금처럼 실제 색상 값으로 사용하는 게 아니었다. backgroundborder 속성에서 색상을 설정할 때 사용되는 키워드였지만 CSS Colors Level 3에서 알파채널이 추가되면서 투명을 의미하는 색상 값이 되었고 색상을 정의하는 모든 속성에서 사용이 가능하게 되었다.

    • <system-color>

      CSS 시스템에서 사용하는 색상 테이블이다. CSS Color Module 4에서 더 이상 사용되지 않는 <deprecated-color> 시스템 색상을 정의했다.

      Details

      사용되는 키워드

      • AccentColor

        CSS Color Module Level 4

        강조된 사용자 인터페이스 컨트롤의 배경색이다.

      • AccentColorText

        CSS Color Module Level 4

        강조된 사용자 인터페이스 컨트롤의 텍스트 색상이다.

      • ActiveColor

        CSS Color Module Level 4

        활성 링크의 텍스트 색상이다.

      • ButtonBorder

        CSS Color Module Level 4

        푸시(push) 버튼의 기본 테두리 색상이다.

      • ButtonFace

        CSS Color Module Level 4

        푸시(push) 버튼의 배경색이다.

      • ButtonText

        CSS Color Module Level 4

        푸시(push) 버튼의 텍스트 색상이다.

      • Canvas

        CSS Color Module Level 4

        애플리케이션 또는 문서의 배경색이다.

      • CanvasText

        CSS Color Module Level 4

        애플리케이션 또는 문서의 텍스트 색상이다.

      • Field

        CSS Color Module Level 4

        입력 필드의 배경색이다.

      • FieldText

        CSS Color Module Level 4

        입력 필드의 텍스트 색상이다.

      • GrayText

        CSS Color Module Level 4

        비활성화된 텍스트의 색상이다.

      • HeightText

        CSS Color Module Level 4

        선택한 텍스트의 텍스트 색상이다.

      • Highlight

        CSS Color Module Level 4

        선택한 텍스트의 배경색이다.(예: ::selection)

      • LinkText

        CSS Color Module Level 4

        비활성, 비방문 링크의 텍스트 색상이다.

      • Mark

        CSS Color Module Level 4

        특수하게 표시된 텍스트(예: HTML <mark>)의 배경색이다.

      • MarkText

        CSS Color Module Level 4

        HTML의 <mark> 요소 등으로 특수하게 표시된 텍스트의 색상이다.

      • SelectedItem

        CSS Color Module Level 4

        선택한 항목의 배경색이다.

      • SelectedItemText

        CSS Color Module Level 4

        선택한 항목의 텍스트 색상이다.

      • VisitedText

        CSS Color Module Level 4

        방문한 링크의 텍스트 색이다.

    사용되는 키워드

    • currentColor

      동일한 속성이 아니어도 상속받은 색상값을 나타낸다.

사용되는 키워드

  • invert

    반전하여 나타낸다.

    웹브라우저 지원 현황을 확인할 필요가 있다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈'outline-color'〉invert
    CSS Basic User Interface Module Level 4

    반전하여 나타낸다.

    웹브라우저 지원 현황을 확인할 필요가 있다.

구문

  • outline-color: #FFFF00;
    CSS Basic User Interface Module Level 4
  • element.style.outlineColor = "#00FF00";
    CSS Basic User Interface Module Level 4

예제

외곽 테두리 색상 설정 샘플

버전 명세

Modules
Module NameStatusSummary
CSS Basic User Interface Module Level 4

Last review date: 2022-11-25

지원 웹브라우저