css 왕초보 탈출하기 04 - Position (1/2): 부모님의 안부를 물어보다 (?)

css 왕초보 탈출하기 04 - Position : 부모님의 안부를 물어보다 (?)

 

 

position은 일단 두가지만 기억하자. 두가지만 기억하게 설명할 것이다.

나머진 알아서 하자. 어렵게 절대위치 상대위치로 설명하지 않겠다.

 

---

 

느그 아부지 어디 계시노

 

아버님을 찾는 안부 메시지를 기억하라.

 

엡솔이라는 아기가 있다. 이 아이는 어느 집에서 자랄까?

 

엡솔이 부모 집에서 자랄 것이다.

 

만약, 엡솔이 부모님이 불의의 사고로 돌아가셧다면?

 

조부모님 집에서 자랄 것이다.

 

조부모님이 없다면? 사회가 맡아 고아원에서라도 자랄 것이다.

 

 

relative : 렐러티브 (부모)

absolute : 엡솔루트(자식)

 <div class="그레이트 할아버지">
        <div class="할아버지">
            <div class="아빠">
                <div class="나">
                </div>
            </div>
        </div>
    </div>

아래와 같은 코드 구조라고 했을 떄 아래 그림을 보자. (아래 그림 모두 html구조는 동일하다.)

 

 

아빠(relative)가 있다면 엡솔이는 아빠 품에서.

나에게 position:absolute가 걸린 상태다. 무엇을 기준으로? relative가 걸린 아빠 기준으로!

 

아빠가 없다면  엡솔이는 할아버지 품에서.

여기서 아빠가 없다는 표현은 html구조상으로는 아빠 div가 존재하지만 아빠에게 position:relative가 걸려있지 않고, 할아버지에게 relative가 걸린 것을 의미한다.(아래 설명도 같은 맥락이다.) 그렇다면 할아버지 안에서 놀게된다.

 

할아버지도 없다면 그 위 조부모님의 품에서 (?)

아빠도, 할아버지도 없다면?? 그레이트 할아버지에게 relative가 걸려있눼..??? 그럼 그 안에서만 놀게 된다.

 

 

아무도 없으면 사회(국가)에서 자란다.

나는 position:absolute가 걸려있는데, 나를 감싸는 아무것도 relative가 없다면??

전체 문서를 기준으로 움직이게 된다.

 

 

 

 

엡솔이는 어디를 기준으로 움직인다?

 

-> 감싸고 있는 요소중에서 relative걸린 녀석을 기준으로 움직인다.

 

 

---

다음시간

 

POSITION으로 위치 조절해보기 시간을 가지겠다.

이제 본격적으로 위로 아래로 옆으로 보내보즈아~~~