Archive

Calender

«   2020/01   »
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  

Use the Google Translate, if you want to read this page in your language.
But its translation is probably inaccurate.
Go to the Google Translate.


여전히, 나는 'offsetParent'의 정확한 의미를 파악하지 못했다.

인터넷 여기저기에서 주워들은, 아니 주워읽은(^^) 내용들을 종합해보면,
어떤 태그의 'position''absolute'이거나 'relative'으로 설정되어 있는 상태라면,
그 태그는, 자신 안에 포함된 모든 태그들의 'offsetParent'가 된다.

'absolute''relative'도 아닌, 다른 값으로 설정을 했거나
'position' 자체를 설정하지 않은 상태라면,
그 태그를 포함하여, 태그 안에 들어있는 태그들까지,
그들의 'offsetParent'<body>이거나 <html>이다.

'offset'이라는 영어 단어 자체가 '인쇄'와 관련된 뜻을 담고 있으므로,
태그를 'display: none'으로 설정한 상태라면, 그 태그의 'offsetParent'이라는 것은 없다.

직접 테스트해 본 결과,
'position: fixed'의 경우, 그 태그의 'offsetParent'
파이어폭스에서는 <body>이라고 나오고, 다른 브라우저에서는 'null'이라고 나온다.


테스트해 본 브라우저는 다음과 같다.


Internet Explorer Firefox Chrome Opera Safari
11 48.0 53.0 39 5.1


아래 글에서는, 'position'의 설정에 따라, 'offsetParent'가 어떻게 달라지는지를 알 수 있다.



이 태그의 'offsetParent'를 알아보기 ( Find the 'offsetParent' of this tag.)

 
<body>
    <blockquote>
        <div>
            <p id="Ptag">이 태그의 'offsetParent'를 알아보기 ( Find the 'offsetParent' of this tag.)</p>
       </div>
    </blockquote>

    <button onclick="testing()"> 클릭하세요 </button>
    <p id="demo"></p>

    <script type="text/javascript">
    function testing (){ 
            var tag = document.getElementById( "Ptag" ); 
            var parent = tag.offsetParent; 
            var text = ( parent === null ) ? "null" : parent.tagName; 
            document.getElementById( "demo" ).innerHTML = text; 
    } 
    </script>
</body>
 

아래 버튼을 누를때마다, 태그의 'position'이 바뀔 것이다. 또한, 'position'이 바뀐 후에, 'testing()' 함수가 실행될 것이다.

<p id="Ptag">'offsetParent' 이다. ( The 'offsetParent' of <p id="Ptag"> is  . )

아래 목록에서, 각 태그의 'position'을 선택한 후에 버튼을 누르면, 'position'이 바뀔 것이다.


<p id="Ptag">'offsetParent' 이다. ( The 'offsetParent' of <p id="Ptag"> is  . )

위에서 실행된 내용들을 정리하면 아래와 같다.


<blockquote>의 position <div>의 position <p>의 position <p>의 offsetParent
설정 안함 설정 안함 설정 안함, absolute, relative <body>
fixed null
Firefox에서는 <body>
absolute, relative, fixed 설정 안함, absolute, relative <div>
fixed null
Firefox에서는 <body>
absolute, relative, fixed 설정 안함 설정 안함, absolute, relative <blockquote>
fixed null
Firefox에서는 <body>
absolute, relative, fixed 설정 안함, absolute, relative <div>
fixed null
Firefox에서는 <body>


이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*

0 Comments