Properties

Properties

Editing
  • account_tree
  • bug_report

border-image

요소의 테두리를 이미지를 이용하여 생성하는 관련 속성을 한번에 설정할 수 있는 속기 속성이다.

사용 가능한 값 타입

<'border-image'>

DEVDIC-Specified Data Types

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

  • <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

포함된 타입

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

  • <'border-image-outset'>

    DEVDIC-Specified Data Types

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

    테두리 이미지 영역이 테두리 상자를 넘어 확장되는 양을 지정한다. 기본 값은 0이다.

    • CSS Backgrounds and Borders Module Level 3
      [ <length [0,∞]| <number [0,∞]> ]{1,4}
      <length [0,∞]>
      지정된 길이의 시작을 나타낸다.
      <number [0,∞]>
      계산된 해당 테두리 너비의 지정된 배수의 시작을 나타낸다.
    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>

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

  • <'border-image-repeat'>

    DEVDIC-Specified Data Types

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

    테두리 이미지의 측면과 중간 부분에 대한 이미지의 크기가 조정되고 바둑판식으로 배열되는 방식을 지정한다. 기본 값은 stretch 이다.

    • CSS Backgrounds and Borders Module Level 3
      [ stretch | repeat | round | space ]{1,2}

      하나 이상 최대 2개까지 지정된 키워드를 설정한다. 첫 번째 지정된 키워드는 상단, 중간 및 하단 부분의 수평 스케일링 및 타일링에 적용된다. 두 번째로 지정된 키워드는 왼쪽, 중간 및 오른쪽 부분의 수직 스케일링 및 타일링에 적용된다. 두 번째는 키워드는 생략할 수 있으나 첫 번째 키워드와 동일한 것으로 처리된다.

    Details

    사용되는 키워드

    • repeat

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

    • round

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

    • space

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

    • stretch

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

  • <'border-image-slice'>

    DEVDIC-Specified Data Types

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

    이미지의 상하좌우 가장자리에서 내부 오프셋을 지정하여 4개의 모서리, 4개의 가장자리 및 중앙의 9개 영역을 나누는 값을 나타낸다. 기본 값은 100%이다.

    • CSS Backgrounds and Borders Module Level 3
      [<number [0,∞]| <percentage [0,∞]>]{1,4} && fill?
      <number [0,∞]>
      이미지의 픽셀(래스터 타입) 또는 벡터(벡터 타입) 좌표를 나타낸다.
      <percentage [0,∞]>
      이미지의 크기(수평 오프셋의 경우 이미지의 너비, 수직 오프셋의 경우 높이)에 비례한다.
      fill
      테두리 이미지의 중간 부분이 유지된다.(기본적으로 버려진다.)
    Details

    포함된 타입

    • <number>

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

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

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

    사용되는 키워드

    • fill

      테두리 이미지의 중간 부분이 유지된다. 요소의 내부 영역에 배경 이미지처럼 포함하여 표시한다.

  • <'border-image-source'>

    DEVDIC-Specified Data Types

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

    테두리 이미지를 사용할 리소스를 설정한다. 기본 값은 none이다.

    • CSS Backgrounds and Borders Module Level 3
      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

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

  • <'border-image-width'>

    DEVDIC-Specified Data Types

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

    이미지가 적용되는 상자의 테두리 영역을 9개의 영역으로 나누는 오프셋 값을 나타낸다.

    • CSS Backgrounds and Borders Module Level 3
      [ <length-percentage [0,∞]| <number [0,∞]| auto ]{1,4}

      최대 4개의 값을 지정할 수 있는 다음의 값을 가질 수 있다.

      <length-percentage [0,∞]>
      테두리 이미지 영역의 크기(수평 오프셋 영역의 너비, 수직 오프셋 영역의 높이)를 나타낸다.
      <number [0,∞]>
      계산된 해당 테두리 너비의 배수를 나타낸다.
      auto
      테두리 이미지의 너비는 해당 이미지 조각의 원래 너비 또는 높이로 사용된다. 이미지에 필요한 원래의 치수가 없다면 계산된 해당 테두리 너비가 대신 사용된다.
    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>

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

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

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

    사용되는 키워드

    • auto

      테두리에 사용된 이미지 슬라이스의 실제 너비 또는 높이로 설정된다.

구문

  • border-image: url('border.png') 30 round;
    CSS Backgrounds and Borders Module Level 3
  • border-image: none 100% 1 0 stretch;
    CSS Backgrounds and Borders Module Level 3

예제

테두리를 이미지로 적용한다.

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저