inset(<basic-shape-inset>)

포함된 타입

• <'border-radius'>

  DEVDIC-Specified Data Types

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

  요소의 네 모서리에 대한 둥글기를 설정하는 값을 나타낸다.

  • CSS Backgrounds and Borders Module Level 3

    <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?

    선택적으로 /를 기준으로 좌우에 값을 작성할 수 있다. /가 없는 경우에는 최소 1개의 값부터 최대 4개의 값까지 공백으로 구분하여 작성이 가능하다. 작성된 값의 갯수에 따라 적용되는 방식이 다르다. 즉 왼쪽 상단 모서리부터 시계 방향으로 작성된 순서에 따라 적용이 되며 4개의 값이 아닐 경우 대각선 방향으로 마주보고 있는 값을 사용하여 처리한다. 작성된 값은 x, y 축에 동일한 반지름 값으로 사용한다.

    최소 한개의 값이 작성이 되었다면 이어서 /를 사용하여 최소 1개, 최대 4개의 값을 공백으로 구분하여 작성할 수 있다. /를 사용한 경우에는 x, y 축의 반지름값을 다르게 설정할 수 있다. 즉 /를 기준으로 왼쪽은 x축, 오른쪽은 y축의 반지름 값으로 사용한다. 각각의 방향에 따라 최대 4개의 값을 작성할 수 있고 작성된 값의 갯수에 따라 왼쪽 상단 모서리부터 시계 방향으로 x축 또는 y축의 반지름값으로 적용되며 값이 없는 경우에는 대각선 방향으로 마주보고 있는 값을 사용한다.

  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

      사용되는 단위

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

      • 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

        초를 나타낸다.

    • <percentage>

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

• <length-percentage>

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

  • CSS Values and Units Module Level 3

    <length> | <percentage>

  Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

  타입에 대한 자세한 설명은 다음 링크를 참조하라.[<length-percentage>]