Properties

Properties

Editing
  • account_tree
  • bug_report

mask-border

요소 테두리의 가장자리를 따라 마스크를 만들 수 있는 속기 속성이다.

설명

현재 대부분의 웹브라우저가 mask-border-*는 벤더프리픽스 타입의  -webkit-mask-box-image-* 속성으로 처리된다. 자세한 사항은 지원 웹브라우저 현황을 참고하기 바란다.

사용 가능한 값 타입

<'mask-border'>

DEVDIC-Specified Data Types

mask-border 속기 속성에 사용되는 타입이다.

  • CSS Masking Module Level 1
    <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

    아래 예제는 mask-border 속기 속성에 대한 일반적인 작성 패턴을 보여주고 있으므로 속기형에 사용된 값들은 실제 관련 속성들의 사용 가능한 값들을 참고하기 바란다.

    <mask-border-mode> 타입은 웹브라우저 별로 지원 현황을 확인해야 한다. 현재 mdn/browser-compact-data 기준으로 모든 웹브라우저에서는 누락되어 있다.
    Example

포함된 타입

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

  • <'mask-border-mode'>

    DEVDIC-Specified Data Types

    mask-border-mode 속성에 사용되는 타입이다.

    mask-border-source 속성의 <image> 값이 휘도(luminance) 마스크 또는 알파(alpha) 마스크로 처리되는지 여부를 나타낸다.

    • CSS Masking Module Level 1
      luminance | alpha
    Details

    사용되는 키워드

    • alpha

      마스크 테두리 이미지의 알파 값을 마스크 값으로 사용한다.

    • luminance

      마스크 테두리 이미지의 휘도 값을 마스크 값으로 사용한다.

      휘도란 광원의 단위 면적당의 광도(광원의 밝기)를 의미한다.
  • <'mask-border-outset'>

    DEVDIC-Specified Data Types

    mask-border-outset 속성에 사용되는 타입이다.

    • CSS Masking Module Level 1
      [ <length> | <number> ]{1,4}

      최소 1개, 최대 4개의 <length> 또는 <number> 타입의 값으로 지정한다. 값이 4개이면 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 아웃셋을 설정한다. 왼쪽이 없으면 오른쪽과 동일하게 처리한다. 아래쪽이 없으면 상단과 동일하게 처리한다. 오른쪽이 없으면 상단과 동일하다.

      현재 <number> 타입의 값은 지원되지 않을 수 있으므로 웹브라우저별로 확인이 필요하다.
    Details

    포함된 타입

    • <length>

      숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

      • CSS Basic User Interface Module Level 4
        <length>
      Details

      사용되는 단위

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

      • cm

        1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

      • in

        1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

      • mm

        1cm의 1/10 값을 나타낸다.

      • pc

        1in의 1/16 값을 나타낸다.

      • pt

        1in의 1/72 값을 나타낸다.

      • px

        스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

      • Q

        1cm의 1/40을 나타낸다.

      • deg

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

      • grad

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

      • rad

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

      • turn

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

      • cap

        대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

      • ch

        글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

      • em

        대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

      • ex

        대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

      • ic

        한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

      • lh

        요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

      • rem

        html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

      • rlh

        html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

      • Hz

        1초당 발생한 진동수를 나타낸다.

      • kHz

        1000Hz를 나타낸다.

      • fr

        그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

      • vb

        html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vh

        뷰포트 높이를 상대적으로 1% 높이를 갖는다.

      • vi

        html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

      • vmax

        vw 또는 vh 중 큰 값을 나타낸다.

      • vmin

        vw 또는 vh 중 작은 값을 나타낸다.

      • vw

        뷰포트 너비를 상대적으로 1% 폭을 갖는다.

      • dpcm

        1cm당 점(dot)의 수를 나타낸다.

      • dpi

        1in당 점(dot)의 수를 나타낸다.

      • dppx

        1픽셀(pixel)당 점(dot)의 수를 나타낸다.

      • ms

        1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

      • s

        초를 나타낸다.

    • <number>

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

  • <'mask-border-repeat'>

    DEVDIC-Specified Data Types

    mask-border-repeat 속성에 사용되는 타입이다.

    • CSS Masking Module Level 1
      [ stretch | repeat | round | space ]{1,2}
    Details

    사용되는 키워드

    • repeat

      변에 해당하는 이미지의 영역을 타일 처럼 요소의 테두리에 반복 배치한다. 변의 길이에 따라서 모서리쪽의 반복되는 이미지의 일부가 잘릴 수 있다.

    • round

      repeat 와 동일한 방식으로 테두리에 이미지를 적용하나 변의 길이에 맞게 반복되는 영역을 적절하게 조절하여 잘리는 부분이 없도록 한다.

    • space

      repeat 처럼 변의 길이에 맞게 이미지가 반복되지만 이미지의 영역을 조절하지 않고 반복되는 이미지와 이미지 사이에 공간을 두어 잘리는 부분 없이 변의 길이에 맞춘다.

    • stretch

      이미지의 영역을 늘려 요소의 테두리로 적용한다.

  • <'mask-border-slice'>

    DEVDIC-Specified Data Types

    mask-border-slice 속성에 사용되는 타입이다.

    • CSS Masking Module Level 1
      <number-percentage>{1,4} fill?

      마스크 테두리 이미지의 위쪽, 오른쪽, 아래쪽 및 왼쪽 가장자리에서 내부 오프셋을 지정하여 4개의 모서리, 4개의 가장자리 및 중앙의 9개 영역으로 나눈다. fill 키워드가 없는 한 중간 이미지 부분은 폐기되고 완전히 불투명한 흰색으로 처리한다.

    Details

    포함된 타입

    사용되는 키워드

    • fill

      CSS Masking Module Level 1

      중간 이미지 영역을 유지한다. 너비와 높이는 각각 위쪽 및 왼쪽 이미지 영역과 일치하도록 크기가 조정된다.

  • <'mask-border-source'>

    DEVDIC-Specified Data Types

    mask-border-source 속성에 사용되는 타입이다.

    • CSS Masking Module Level 1
      none | <image>
    Details

    포함된 타입

    • <image>

      2차원 이미지를 나타낸다.

      • CSS Images Module Level 4
        <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

        <url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.

        현재 image()는 지원하지 않는다.

      Details

      포함된 타입

      • <gradient>

        두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.

        • background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);

          선형 그라데이션

          Example
        • background: radial-gradient(#FF0000, #00FF00, #FFFF00);

          원형 그라데이션

          Example
        Details

        관련 함수

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

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background

          요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

      • <url>

        이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

        • CSS Values and Units Module Level 4
          <url()> | <src()>
        Details

        포함된 타입

        • <src()>

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

          • CSS Values and Units Module Level 4
            src( <string> <url-modifier>* )
          Details

          포함된 타입

          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

            • "this is a 'string'."
            Details

            동일한 타입을 사용하는 관련 속성

            모든 속성을 표시하지 않을 수도 있다.

            • font-family

              글꼴을 지정한다.

            • content

              가상 요소로 생성할 콘텐츠를 설정한다.

            • quotes

              인용 부호의 유형을 설정한다.

          • <url-modifier>

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

        • <url()>

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

          • CSS Values and Units Module Level 4
            url( <string> <url-modifier>*| <url-token>
          Details

          포함된 타입

          • <url-token>

            URL Token Railroad Diagrams

            <ident-token "url"> ( ws* not " ' ( ) \ ws or non-printable escape ws* )
          • <string>

            따옴표로 감싸진 데이터 유형을 표현한다.

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

            URL의 의미나 해석을 어떻게든 변경하는 타입이다.

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

        관련 함수

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

        동일한 타입을 사용하는 관련 속성

        모든 속성을 표시하지 않을 수도 있다.

        • background-image

          선택자를 갖는 요소에 배경 이미지를 설정한다.

        • clip-path

          요소의 클리핑 범위를 설정한다.

      관련 함수

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

    공통적으로 사용되는 값

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

    • none

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

  • <'mask-border-width'>

    DEVDIC-Specified Data Types

    mask-border-width 속성에 사용되는 타입이다.

    • CSS Masking Module Level 1
      [ <length-percentage> | <number> | auto ]{1,4}

      최소 1개, 최대 4개의 또는  타입의 값이거나 auto로 지정한다. 값이 4개이면 위쪽, 오른쪽, 아래쪽, 왼쪽 순서로 폭을 설정한다. 왼쪽이 없으면 오른쪽과 동일하게 처리한다. 아래쪽이 없으면 상단과 동일하게 처리한다. 오른쪽이 없으면 상단과 동일하다.

      현재 <number> 타입은 지원되지 않으므로 웹브라우저별로 확인할 필요가 있다.
    Details

    포함된 타입

    • <length-percentage>

      <length><percentage> 타입을 나타낸다.

      • CSS Values and Units Module Level 3
        <length> | <percentage>
      Details

      포함된 타입

      • <length>

        숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

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

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

    • <number>

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

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

    사용되는 키워드

    • auto

      CSS Masking Module Level 1

      마스크 테두리의 너비는 해당 마스크 테두리 슬라이스의 고유 너비 또는 높이(둘 중 적용 가능한 것)와 동일하게 만들어진다. 이미지에 필요한 고유 치수가 없으면 대신 해당 테두리 너비가 사용된다.

버전 명세

Modules
Module NameStatusSummary
CSS Masking Module Level 1후보 추천 초안

Last review date: 2023-1-14

지원 웹브라우저