Properties

Properties

Editing
  • account_tree
  • bug_report

shape-outside

인접 인라인 콘텐츠를 형태에 따라 감싸는 처리를 한다.

설명

반드시 요소가 float 속성을 가져야 한다.

사용 가능한 값 타입

<'shape-outside'>

DEVDIC-Specified Data Types

shape-outside 속성에 사용되는 타입이다.

  • CSS Shape Module Level 1
    none | [ <basic-shape> || <shape-box> ] | <image>

포함된 타입

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

  • <basic-shape>

    clip-path, shape-outside, offset-path 속성에 사용되는 형태를 나타낸다.

    • CSS Shapes Module Level 1
      inset() | rect() | circle() | ellipse() | polygon() | path()
    Details

    관련 함수

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

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

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

    • clip-path

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

    • offset-path

      요소가 따라가야할 모션 경로를 지정하고 부모 컨테이너 또는 SVG  좌표 시스템 내에서 요소의 위치를 정의한다.

  • <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

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

    관련 함수

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

  • <shape-box>

    CSS 박스 모델에서 박스의 가장자리를 참조하는 키워드를 쉐입(shape)에게 사용하는 경우를 나타낸다.

    • <box> | margin-box
    Details

    사용되는 키워드

    • border-box

      CSS Box Model Module Level 3

      테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

    • content-box

      CSS Box Model Module Level 3

      실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

    • margin-box

      바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

    • padding-box

      CSS Box Model Module Level 3

      내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

    • fill-box

      오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

    • stroke-box

      스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

    • view-box

      가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.

공통적으로 사용되는 값

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

  • none

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

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

  • CSS Shape Module Level 1
  • CSS Lists and Counters Module Level 3

    정원을 생성한다.

    Example
  • CSS Shapes Module Level 1

    x축과 y축 반지름 값을 설정해 타원을 생성한다.

  • CSS Shape Module Level 1

    삽입될 직사각형을 정의한다.

  • CSS Shape Module Level 1

    다각형을 생성한다.

  • CSS Shape Module Level 1

    사각형을 생성하는 함수이다.

  • 〈shape-box〉border-box
    CSS Box Model Module Level 3

    테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

  • 〈shape-box〉content-box
    CSS Box Model Module Level 3

    실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

  • 〈shape-box〉margin-box

    바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

  • 〈shape-box〉padding-box
    CSS Box Model Module Level 3

    내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

  • 오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

  • 〈shape-box〉stroke-box

    스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

  • 가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.

  • CSS Images Module Level 4

    중심점을 기준으로 회전하는 방식으로 그라데이션을 생성한다.

  • CSS Images Module Level 4

    선형 그라디언트를 생성한다.

    Example
  • CSS Images Module Level 4

    원형 그라디언트를 생성한다.

  • CSS Images Module Level 4

    설정된 <linear-gradient> 값이 반복되는 선형 그라디언트를 생성한다.

  • CSS Images Module Level 4

    설정된 <radial-gradient> 값이 반복되는 원형 그라디언트를 생성한다.

  • CSS Values and Units Module Level 3

    CSS에서 사용할 외부 리소스를 가져온다.

    Example
  • CSS Images Module Level 4

    이미지 사이를 전환할 때 CSS는 시작 및 종료 이미지의 조합인 중간 이미지를 명시적으로 참조하는 방법이 필요하다. 이것은 결합할 두 이미지와 결합이 전환에서 얼마나 멀리 있는지를 나타내는 cross-fade() 함수로 수행된다.

  • CSS Images Module Level 4

    사용자의 장치에서 가장 적합한 이미지의 해상도를 보여줄 수 있도록 한다.

버전 명세

Modules
Module NameStatusSummary
CSS Shapes Module Level 1추천 후보

Last review date: 2023-5-17

지원 웹브라우저