CSS position absolute relative 절대위치 상대위치 개념정리
티스토리 스킨을 뜯어보면 가장 많이 볼 수 있는 태그 요소 중 하나가 바로 position 위치에 대한 설정 입니다. 대체로 두 가지 요소를 많이 씁니다. relative 와 absolute 입니다. 이 두개의 차이를 간단히 살펴보는 시간을 갖도록 하겠습니다. 배우긴 했지만 아무래도 많이 사용해봐야 확실히 알 수 있을 것 같습니다.
우선 이렇게 코딩을 해봤습니다. 본문을 살펴보시면 box라고 하는 이름을 가진 div를 만들었고 그 안에 p태그로 세개의 문단이 있습니다. 그리고 각 p태그의 스타일을 만들었습니다. p태그는 블록요소이므로 아래로 쌓이게 됩니다. div 안쪽에 이미지로 백그라운드를 넣었고 크기값을 가지고 있습니다. 한번 결과물을 살펴보겠습니다.
그렇습니다. 이렇게 출력이 될 것입니다.
이제 p2에 position:absolute; 를 넣어보겠습니다.
그랬더니 p3이 없어졌습니다. 사실은 없어진것이 아니라 p2 뒤에 숨어버린 것 입니다. 보통 position 요소를 사용하면 위치값을 나타내는 태그도 간단히 들어가게 됩니다.
left / top / right / bottom 을 사용하게 되며, 각각 설명을 드리자면 왼쪽에서 얼마, 위에서, 오른쪽에서, 아래에서 어느정도를 떨어뜨릴지를 px 단위로 입력해주시면 됩니다. 여기에서는 왼쪽에서 50px, 위에서 30픽셀 떨어진 값을 입력했습니다. 결과를 보겠습니다.
보시는 것 처럼 p2의 문단이 body를 기준으로 위에서 30px, 왼쪽에서 50px 떨어지게 됩니다. 그리고 숨어있던 p3의 문장이 보입니다. 보통 absolute는 절대값이라고 하며 부모요소를 기준으로 위치를 정해주는게 보통 입니다.
여기에서는 부모 요소인 box div에 position:relative; 를 입력해 보겠습니다. 그럼 어떻게 될까요?
보시는 것 처럼 body를 기준으로 이동하는게 아닌, 부모 요소인 div를 기준으로 p2가 움직인 것을 알 수 있습니다. 즉 absolute는 부모요소의 position을 기준으로 움직이게 됩니다. 이때 부모요소의 position 값이 absolute 이든 relative 이든 상관은 없습니다.
이번에는 p3에 posion: relative; 를 사용해서 이동시키겠습니다. 이동값은 왼쪽에서 30픽셀, 위에서 20픽셀만큼 이동하게 했습니다.
보시는 것 처럼 자신의 상대적 위치에서 이동된것을 알 수 있습니다. 그래서 relative는 상대값이라고 합니다. 자신의 원래 위치에서 원하는 위치로 간단히 이동시키고자 할 때, position:relative; 를 사용하게 됩니다.
여기서 추가적으로 z-index에 대해서도 배웠습니다. 이것은 포토샵에서 어떤 레이어를 가장 위로 올리느냐에 대한 설정입니다. 숫자가 높을수록 가장 상위에 있는 레이어 입니다. p3에 z-index:1을, p2에 z-index:2를 마크업 했으니 가장 위로 올라오는 요소는 p2가 될 것입니다.
네. 이렇게 됩니다.
이번에는 리스트 항목을 사용해 보겠습니다. menu라는 div를 만들고 그 안에 ul li 요소를 사용했습니다. 그리고 리스트항목 다음에 p태그를 사용했습니다.
마지막의 p태그를 사용한 문장은 div 박스 안쪽에서 오른쪽 상단쯤에 위치하려고 합니다. 그렇다면 position: relative 는 div에, p에는 absolute를 사용해서 이동시키면 될 것입니다. p태그의 부모 요소가 div 이기 때문입니다.
현재의 마크업에 대한 결과 입니다. 아직 위치값을 주지 않았기에 div 바로 아래에 p태그가 딱 붙어 있습니다.
오른쪽 상단 이므로 top과 right 요소를 이용하면 될 것 같습니다. left를 써도 되지만, 그러려면 수치값을 많이 줘야 왼쪽에서 멀리 떨어지니까 최대한 가까이에서 짧게 이동하는게 편리합니다. 이렇게 마크업하고 결과를 살펴보겠습니다.
보시는 것 처럼, p태그의 "더보기" 텍스트가 div 박스 오른쪽 상단에 위치했음을 알 수 있습니다.
여기서 과연 기준이 되는 위치가 어디인지 궁금해졌습니다. 그래서 test라는 이름을 가진 div 박스를 만들고, 가운데정렬을 해주면 어떻게 이동되는지 확인해 보겠습니다. position:relative 를 주었으니, left 혹은 right로 50%를 입력하면 이론상 가운데 정렬이 될 것입니다.
확인해보니 이렇게 이동되었습니다. 즉, 기준이 되는 위치는 저기 녹색 점이 표시된 부분이라는걸 확인할 수 있습니다. 크기값을 가지고 있는 div 를 가운데 정렬하려면 position 보다는 margin : 0 auto; 가 더 정확하다는것을 알 수 있었습니다. 끝.
"친절한효자손 취미생활" 을 검색!
