gif로 이해하는 css 포지션의 개념

저는 요즘 사내에서 ‘야매코딩’이라는 스터디를 진행하고 있는데요. css에서 ‘포지션(position)’을 제대로 설명 못 해서 애먹었던 적이 있습니다. 적당히 이해하고 넘어가기에는 아주 중요한 요소인데요. 프룬트 블로그(FROONT BLOG)에서는 포지션의 개념을 gif로 쉽게 설명했습니다. 포지션의 개념이 어려운 분들을 위해 공유합니다.

웹 디자인의 포지션

웹디자인에서 ‘포지션(position)’은 매우 중요합니다. 당연한 얘기지만 포토샵이나 일러스트레이터에서의 캔버스와는 다릅니다. 왜냐면 스크롤이나 스크린 크기 등 여러 가지 요인이 작용하기 때문이죠.

포지션은 크게 ‘스태틱(static)’. ‘앱솔루트(absolute)’, ‘렐러티브(relative)’, ‘픽스드(fixed)’로 나뉩니다. 실제 영어 단어가 의미하는 것과 다르게 작동하기 때문에 헷갈릴 수도 있는데요. 예를 들어 스태틱(고정, 정지상태의)과 앱솔루트(절댓값의)는 실제 뜻과 달리 어디에 배치하느냐에 따라 달라집니다.

Z- 인덱스(Z-index)

포지션 개념을 설명하기 전에 Z- 인덱스가 어떻게 포지션에 영향을 주는지 알 필요가 있습니다. Z-인덱스를 쉽게 설명하자면 요소의 앞뒤를 설정할 수 있는 속성입니다.  포토샵이나 일러스트레이터에서 레이어 같은 개념이라고 할 수 있겠네요.

권고

- 버튼이나 클릭 할 수 있는 요소에 사용하세요.

주의 

- 버튼 위에 있는 텍스트에는 사용하지 마세요. 클릭 못 하는 경우가 생깁니다.

- html 구조를 잘 파악하고 써주세요. 잘 모르고 남용하면 z-index 지옥에 빠질 수가 있습니다.

스태틱(Static position)

포지션의 기본 속성입니다. 스태틱은 뜻(고정, 정지상태의)과 다르게 위에서부터 차곡차곡 쌓이는 속성입니다. 예를 들어 상단 gif에서 ‘WE’ 높이가 줄어든다면 아래 ‘ARE’, ‘STATIC’ 요소도 그만큼 올라가겠죠.

권고

- 콘텐츠가 바뀌어도 디자인을 유지하고 싶다면 최소, 최댓값(Min, Max limits)을 써주세요.

- 개인적으로 스태틱은 반응형에서 앱솔루트나 렐러티브 속성을 풀어줄 경우 씁니다.

주의

- 스태틱의 유연성 때문에 콘텐츠에 따라서는 디자인이 망가질 수도 있습니다.

앱솔루트 (Absolute position)

앱솔루트는 X와 Y 속성(css에서 top, bottom, right, left)에 따라 요소를 움직일 수 있습니다. 어려운 부분은 그것이 앱솔루트, 렐러티브, 혹은 픽스드 속성을 가진 부모 요소를 기준으로 작동한다는 것입니다. 만약 부모 요소가 이런 속성이 없다면 페이지, 즉 body 기준으로 움직입니다. 앱솔루트는 다른 요소의 위치에 영향을 받지 않습니다 . 즉, 플로우(링크 2번 항목 참고)와 별개로 움직이는데요. 일반 스태틱 요소 위에서 작동합니다.

권고

- 본문 레이어 위에 아이콘이나, 로고를 올려야 한다면

주의

- 반응형 웹 디자인에 친화적이진 않습니다. 스태틱으로 풀어줘야 하는 경우가 생깁니다.

렐러티브 (Relative position)

렐러티브도 스태틱처럼 작동하지만, 앱솔루트처럼 X와 Y 속성으로 움직일 수 있습니다. 또한 위의 gif처럼 자식 요소(움짤의 녹색 원)가 앱솔루트 속성을 가지고 있다면, 렐러티브 속성을 가지고 있는 부모 요소가 기준이 됩니다.

권고

- 앱솔루트의 부모 요소로 주로 씁니다.

주의

- 로고나 아이콘이 최상위 레이어에 있어야 한다면, 렐러티브 속성을 가진 요소 안에 넣지 마세요.

픽스드 (Fixed position)

픽스드는 브라우저 창 기준으로 고정 시켜버리는 속성입니다.

권고

- 주로 고정되는 네비게이션, 헤더 영역에 적합합니다.

주의

- 고정된 공간 뒤는 클릭할 수 없습니다.

실무에서는..

실무에서는 포지션을 섞어서 쓰는 경우도 있습니다. 예를 들어 내비게이션이 스태틱 상태였는데 스크롤을 내리면 픽스드 상태로 바뀌는 내비게이션도 자주 만들게 되는데요. 이럴 때는 자바스크립트의 힘을 빌리는 수밖에 없습니다.

포지션은 익숙해지면 쉬운 것 같지만, 작은 실수로도 엄청난 시간을 낭비할 수 있습니다. 모든 일이 그렇지만 css도 기초가 정말 중요합니다. 저도 포스팅하면서 포지션의 개념을 다시 잡을 수 있었는데요. 앞으로도 ‘야매’가 아닌 정석을 알려드릴 수 있었으면 좋겠습니다.

출처: 프룬트 블로그 

by 원숭이발자국