CSS css 포지션 - static, relative, absolute의 차이와 예제 설명
페이지 정보
조회 1,602회 작성일 22-04-13 09:29
본문
CSS 포지션
static, relative, absolute의 차이와 예제
인터넷 검색을 해 보면 CSS 포지션에 대한 설명이 너무 많다. 하지만 읽을 수록 헷갈리기만 한다.
거기에는 이유가 있다. "관계"에 대해 설명하지 않고 "기능"에 대해서만 설명하기 때문이다.
그래서 이 문제에서는 비교를 통해서 관계를 설명한다. 그러면 이해가 쉬울 것이다.
css 포지션 - static, relative, absolute의 차이와 예제 설명
일반 배치와 포지션 배치의 차이
우선 아래에 있는 2개의 예제를 보자.
중요한 것은, div가 어떻게 배치되는가이다. HTML을 누르면 코드를 볼 수 있고, Result를 누르면 결과를 볼 수 있다.
<1번 예제>
HTML 태그를 보면 알겠지만, 그냥 늘어트려 써놨다. 그래서 박스도 아래로 늘어트려 진다.
<2번 예제>
기억하라, 렐러티브(relative)와 앱솔루트(absolute)의 확실한 차이를 알려면 2번 예제처럼 div 속에 div를 배치해야 한다.
1번 예제는 CSS 포지션 속성이 position:static이다. 이건 기본 속성이기 때문에 따로 입력하지 않아도 자동으로 스태틱(static)가 된다.
그냥 순서대로 배치된다고 생각하면 된다.
그런데, 아래 3번 예제처럼 일부만 겹치게 하려면 어떻게 할까?
<3번 예제>
이때 렐러티브(relative)와 앱솔루트(absolute) 속성을 사용하게 된다.
스태틱(static)가 순서대로 붙어서 쌓이는 것과 달리 자유로운 배치가 가능해 진다.
static, relative, absolute의 차이를 쉽게 이해하려면...
간단 정리 :
- 스태틱(static) : 정적이라는 뜻. 적힌 순서대로 쌓임.
- 렐러티브(relative) : 상대적이라는 뜻. 배치된 곳을 기준 이동.
- 앱솔루트(absolute) : 절대적이라는 뜻. 렐러티브를 기준으로 이동.
- 픽스트(fixed) : 이미 결정되었다는 뜻. 이건 이해할 필요가 없다. 그냥 놓고 싶은 자리에 놓는 것이라고 생각하면 된다.
그러므로 CSS 포지션을 쉽게 이해하려면, 스태틱(static)은 순서대로 쌓이고, 픽스트(fixed)는 내 맘대로 놓는데, 렐러티브(relative)와 앱솔루트(absolute)는 같이 다녀야 효과가 있다고 생각하면 좀 쉬울 것이다.
또한 같이 다니긴 하는데, 렐러티브가 대장이고 앱솔루트가 졸병이라는 것도 기억해 두자.
우리 말로 더 쉽게 예를 들면 이렇다.
- 스태틱(static) : 북위 37도, 동경 126도인 좌표에 있으시오.
- 렐러티브(relative) : 서울에서 1km 남쪽으로 가시오.
- 앱솔루트(absolute) : 렐러티브가 가 있는 곳에서 또 1km 남쪽으로 가시오.
- 픽스트(fixed) : 무조건 맨 위쪽에 붙어 있으시오.
즉, 한 번 더 강조하면 이렇다.
- 스태틱(static) : 모니터 맨위 왼쪽 끝을 "기준"으로 위치를 정함.
- 렐러티브(relative) : 배치된 곳을 "기준"으로 위치를 이동시킴.
- 앱솔루트(absolute) : 렐러티브가 이동한 곳을 "기준"으로 위치를 이동시킴.
- 픽스트(fixed) : 맨위, 맨 아래, 특정 위치에 고정시켜버림.
position:relative와 position:absolute 속성 이해
물론, 2번 예제처럼 div 속에 div를 넣지 않아도 앱솔루트, 렐러티브 속성 지정이 가능하다. 그런데 그러면 무의미한 상황이 벌어지는 경우가 많다.
아래 예제를 보자. 앱솔루트는 렐러티브를 기준으로 붙어다니라고 사용하는 것인데, 왼쪽 위를 기준으로 움직이고 있다.
CSS를 눌러서 복사한 후, 호스팅 계정에 css파일을 만들어 올려서 #div3 {top:70px; left:70px; 의 숫자를 바꿔보라. 자기 혼자 돌아다니는 것을 목격하게 될 것이다.
<3번 예제>
그 이유는 렐러티브 div 속에 앱솔루트 div를 넣지 않아서 그렇다.
앱솔루트(absolute)는 졸병이다. 대장이 가는 곳을 따라 다녀야 써먹기 좋다. 그런데 대장인 렐러티브(relative)를 무시하고 저렇게 마음대로 위로 올라가 있으면 디자인을 잡기가 매우 어려워 진다.
그러므로, position:relative와 position:absolute의 일반적인 사용법은 렐러티브(relative)인 div 속에 앱솔루트(absolute)인 div를 넣어서 쓴다고 봐야 이해가 쉬울 것이다.
CSS 포지션 relative, absolute 사용 방법
이제 드디어, 위의 설명들을 기반으로 제대로 이해할 때가 왔다. 아래 4번 예제를 보자.
먼저 HTML을 보자. <div> 속에 <div>를 넣어서, 상자 속에 상자를 넣은 것처럼 배치해 놨다.
<4번 예제>
그 다음엔 CSS를 눌러 보자. 스태틱(static)에는 position:static CSS가 적용되어 있다. 이것은 맨 위의 1번 예제처럼 그냥 늘어놓는 데에 사용한다. 일단 그냥 넘어가자.
중요한 것은 그 다음이다.
렐러티브(relative)에는 position:relative가 적용되어 있고, 앱솔루트(absolute)에는 position:absolute가 적용되어 있다.
Result를 눌러서 결과물을 보라! 정말로 앱솔루트(absolute)가 겸손하게 렐러티브(relative) 대장을 따라다니고 있다.
아직도 따라 다닌다는 말이 무엇인지 모르겠다면, 4번 예제에서 숫자를 변경해 보면 이해가 될 것이다.
(복사해서 css파일을 만들어서 호스팅 계정에서 실험해 보면 됨)
이 예제에서 CSS의 "#div2 {top:20px; left:20px;" 라는 부분을 찾아서 "#div2 {top:40px; left:70px;"으로 바꿔보라.
그리고 "#div2 {top:0px; left:10px;"으로도 바꿔보라. 렐러티브(relative)가 어디를 가든 앱솔루트(absolute)가 줄기차게 쫓아다니고 있다.
바로 위에 있는 예제와 비교해 보라.
<4번-2 예제>
이렇게 되어야 CSS position 속성을 쓰는 의미가 있는 것이다.
relative, absolute 예제를 통한 설명의 결론
그러므로 HTML에서 div의 속성은 렐러티브(relative) 박스 속에 앱솔루트(absolute) 박스가 있어야 잘 먹힌다는 것을 알 수 있다.
(사실, CSS 포지션을 정확히 공부하려면 "기준 좌표"의 개념도 가져야 하지만, 여기서는 초보가 이해할 수 있는, 바로 써먹을 수 있는 범위까지만 설명한다.)
그래서 이것을 보고 사람들이 렐러티브(relative)를 부모 Element, 앱솔루트(absolute)를 자식 Element라고 부르는 것이다.
하지만 이것은 오해를 부른다. 부모, 자식은 속에 들어 있다는 의미이기 때문이다.
위에서 설명한대로 따라다닌다고 생각한다면 대장과 졸병이라고 이해하면 된다.
마지막으로 하나만 더 이해하면 CSS 포지션의 전반적인 이해가 끝난다.
왜 부모 자식 개념으로만 보면 헷갈리는지에 대한 것이다.
아래 5번 예제는 거꾸로 앱솔루트(absolute) 속에 렐러티브(relative)를 넣어 놓은 예제다.
분명히 렐러티브(relative) 속에 앱솔루트(absolute)가 들어가 있어야 된다고 했는데, 이렇게 반대로 해 보면 어떨까?
<5번 예제>
누가 대장인지 모르게 되어 버린다. 숫자를 한 번 변경해 보면 이해가 갈 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
앱솔루트(absolute)가 또 따로 논다는 것을 볼 수 있다. 이러면 디자인 잡기가 또 곤란해진다. 앱솔루트(absolute)는 렐러티브(relative)를 따라 다녀야 디자인 잡을 때 눈으로 확인하기도 쉽고 배치도 쉽게 이해가 된다.