clip Property


Home > Document > CSS > Positioning > clip

clip Propety

clip Property는 Positioning 된 4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 해 주는 Property입니다. clip 되는 Box는 반드시 { position : absolute }로 지정되어 있어야 합니다.

  [표 보는 방법]
clip Property
Value <shape> | auto | Inherit
Initial auto
Applies to block-level and replaced elements
Inherited no
Percentages N/A
Media Visual
HTML Syntax { clip: sClip }
Scripting object.style.clip [ = sClip ]




CSS Scripting
onMouseOver="this.style.clip='rect(auto)';" *모든 clip을 제거할 때는 auto 한 번만 지정한다.


clip Property의 사용값
  • auto
    초기 값으로서 clip이 되어서 가려지는 부분이 없이 몽땅 보여주고, 4면을 모두 auto로 지정할 때는 auto 한 번만 지정해 주면 됩니다.


  • shape
    rect(top right bottom left) 로 지정합니다. rect는 rectangular의 약자로 4각형이라는 뜻 입니다. 그런데 여기서 지정하는 값이 약간 헷갈리므로 주의해야 됩니다.
    top : 지정한 길이만큼 위에서 아래로 가려서 안 보입니다.
    right : 지정한 길이만큼 왼쪽에서 오른쪽으로 보여 줍니다.
    bottom : 지정한 길이만큼 위에서 아래로 보여 줍니다.
    left : 지정한 길이 만큼 왼쪽에서 오른쪽으로 가려 줍니다.

  • 아래는 top, right, bottom, left를 각각 15px 씩 clip 했습니다. Mouse를 그림 위에 올리면 설명글이 나오니까 참고 하시져.
clip:rect(auto)
Auto
clip:rect(15px auto auto auto)
Top
clip:rect(auto 15px auto auto)
Right
clip:rect(auto auto 15px auto)
Bottom
clip:rect(auto auto auto 15px)
Left







소스 보기




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색