clip] style="clip:rect(); position:absolute;" 를 이용했을 때..

1)
clip 이 어떻게 표현되는지 궁금(?)해서, 만들어봤습니다.
물론, clip 은 position:absolute; 와 함께 해야 작동이 되기에, 함께 넣었죠.

...

<div style="width:150px; height:150px; overflow:hidden; background-color:#ddddff; position:relative;">

    <div style="clip:rec(0,100,100,0); position:absolute; left:10px; top:10px; background-color:#999999;">
0
        <div style="width:100px; height:100px; overflow:hidden; background-color:#aaaaaa;">
1</div>
    </div>

    <div style="clip:rec(0,100,100,0); position:absolute; left:10px; top:10px; background-color:#eeeeee;">
2

        <div style="clip:rec(0,100,100,0); position:absolute; left:30px; top:30px; background-color:#dddddd;">
3
            <div style="width:10px; height:40px; overflow:hidden; background-color:#cccccc;">
4</div>
            <div style="width:40px; height:10px; overflow:hidden; background-color:#bbbbbb;">
5</div>
        </div>

    </div>

</div>

...
 

0

1

2

3

4

5

...

2)
결과로 보다시피(?),

0자는 2자 범위로 가려졌고,
1자는 0자 아래에 표시됐고,

2자는 0자 글자를 덮어버렸고,

3자는 2자 우측 아래 건너편(?)에 표시됐고,
4자는 3자 아래 세로로 길게 표시됐고,
5자는 4자 박스아래 가로로 길게 표시됐습니다.

.. 그 덕에(?),
0자 박스와 3자 박스 크기가 늘어났네요.

3)
clip 은 범위표시 제한이라는 효과가 있는 반면에,
absolute 로 걸려있어 그 크기를 상위 element 가 제한( position:relative; )시켜줄 필요가 있죠.

4)
그런데.. 이 글을 적다보니 기억났네요.
<div 표시범위의 기본값(?)은 가로최대값인데,

position:absolute; 를 적용한 경우에는
가로 크기를 가로 최대값으로 적용시키지는 않는군요.
(하긴.. 적용시키면, 문제될 부분들이 꽤 많죠..)

5)
clip 범위를 벗어난 글자도 줄바꿈 처리하는가..라는 것도 해볼 껄..하는 생각만 해봅니다.

easyBow killofki@.