css 왕초보 탈출하기 04 - position (2/2) top,bottom,left,right

css 왕초보 탈출하기 04 - position (2/2) top,bottom,left,right

---

 

지난시간 정리:

position:absolute가 걸린 자식요소는 위치한다.

 

어디에?

 

해당 자식을 감싸고 있는 position:relative가 걸린 부모요소에 (바로 위에 가까운 직계 부모요소에 relative가 없다면, 그다음 감싸고 있는 부모요소, 그것도 없으면 그 다음 부모요소를 기준으로 위치한다. )

 

 

그렇다면 position:absolute가 걸린 속성에 top, bottom, left, right 속성을 부여하면 어떻게 될까?

.father{positon:relative;}
.child{position:absolute; top:20px;}

.child는 father를 기준으로 20px이동한다.

그런데 top 20px이 뭘까?????

bottom: 20px은?? right??뭘 기준으로 움직이는거야 도대체??

 

right:40px 속성이 적용된 모습 (우), 오른쪽 선(border-line을 기준으로 40px이동한다.어디로? 안쪽으로.)

 

---

 

top,bottom,left,right border-line(선)으로부터 몇 px만큼 이동한다.

 

top:20px; 
left:20px; 

위의 코드를 해석해보자. 

 

 

 

top:20px; 

 

absolute요소를 감싸고 있는 relative요소를 기준으로.

top, 윗선, border-line. 으로부터 안쪽으로,

20px이동한다.는 뜻이다. 결론적으론 기존 위치한 자리로부터 20px내려오게 된다.

 

 

left:20px; 

 

absolute요소를 감싸고 있는 relative요소를 기준으로.

left, 좌측선, border-line. 으로부터 안쪽으로,

20px이동한다.는 뜻이다.

결론적으로 기존 위치한 자리로부터 20px 오른쪽으로 이동하게 된다.

 

좀 더 정리해보자면,

 

 

top : 20px;

absolute요소를 감싸고 있는 relative요소의 상하좌우 선(border-line)을 기준으로

 

얼마나 옮길 것인가 하는것이다.

 

top,bottom,right,left 중 아무거나 대입해보고 상상해보자.

top일경우, 윗선을 기준으로, 20px (결과적으론 기존 위치보다 20px 내려간다.)

left의 경우, 좌측 선을 기준으로, 20px (결과적으로 기존 위치보다 우측으로 20px 이동한다.)

 

 

right와 bottom은??? 

 

아래의 포스팅을 슥 읽고 다시 이 글로 돌아와라.

CSS 왕초보 탈출하기 01 - HTML 세계의 중력

 

---

top,bottom,right,left 중 아무거나 대입해보고 상상해보자.

 

 

right일 경우, 하단 선을 기준으로 안쪽으로 20px이동한다.(결과적으로 맨 아래 위치로부터 20px이동한다.)

 

bottom일 경우, 우측 선을 기준으로 안쪽으로 20px이동한다. (결과적으로 맨 우측으로부터 왼쪽으로 20px이동한다.)

 

왜, left와 top은 기존 위치로부터 20px이동하는데.

 

right와 bottom은 그렇지 않은지 이해하는게 중요하다.

 

다시 정리하자면,

 

absolute요소를 감싸고 있는 relative요소의 상하좌우 선(border-line)을 기준으로 얼마나 옮길 것인가 하는것이다.

 

지금까지 position: relative가 걸린 요소로 감싸진 absolute의 관점에서 top,bottom,right, left를 다루어 보았다.

 

---

 

아래에서부터는 relative가 걸린 요소에 top bottom right left를 주면 어떻게 되는지 확인해보겠다.

 

top,bottom,right,left 중 아무거나 대입해보고 상상해보자.

기존 위치로부터 x (top,bottom,left,right 중 하나)의

선을 기준으로 20px이동한다.

-> 그냥 쉽다

 

top:20px; 기존 위치 기준으로하며 자기자신의 윗선을 기준으로 20px 아래로 이동

 

left:20px; 기존 위치 기준으로하며 자기자신의 좌측선을 기준으로 20px 우측으로 이동

 

 

 

 

특징으로는 기존의 위치한 레이아웃에 변동이 없는 부분이 있는데, 이부분은 따로 후에 다루도록 하겠다.

 

 

 

 

---

다음시간에는 

float 속성에 대해서 다루어보자.