CSS 쉽게 배우기 | 포지션(Position)

CSS로 요소의 포지션을 내가 원하는 위치로 변경하기

 

안녕하세요

이번 편에서는 요소의 포지션에 대해서 알아볼게요

요소의 포지션이란 요소의 위치를 변경할 때 사용하는 속성입니다

 

이미 마진과 패딩으로 할수있지않나? 라고 할 수 있지만

마진/패딩과는 다른 개념입니다

 

마진/패딩은 요소의 빈 공간의 크기를 바꿔서 요소의 위치를 변경하고

포지션은 요소 자체의 위치를 변경합니다

 

이해가 안 가시죠?

저도 처음에 이거 배울 때 엄청 헤맸었죠

솔직히 지금도 가끔 헷갈려요 😅

 

 

그럼 포지션을 알아볼까요?

 

 

 

 

CSS Position

요소의 포지션은 6가지의 방법으로 변경할 수 있습니다

position: static;       정지(기본)
position: relative;     상대적
position: absolute;     절대적
position: fixed;        고정
position: sticky;       접착

 

포지션의 값이 주어지면 요소의 위치를 아래 속성들을 사용해서 조절할 수 있습니다

*position:static은 예외입니다*

top: px/%/em/rem/vh/vw;
left: px/%/em/rem/vh/vw;
right: px/%/em/rem/vh/vw;
bottom: px/%/em/rem/vh/vw;

이 속성들에 음수를 주면 그 방향으로, 정수를 주면 그 반대 방향으로 움직입니다

0을 주면 변동 없습니다

예:
top: 100px;   위에서 100px만큼 내려옵니다
top: -100px;  위로 100px만큼 올라갑니다

 

 

 

 

CSS Position Static

이 포지션은 요소의 기본 포지션 값으로

요소의 포지션을 지정하지 않으면 자동으로 사용됩니다

 

이 포지션은 요소를 페이지 레이아웃의 흐름대로 나열합니다

쉽게 말해서 HTML 문서에 작성된 순서대로 나열된다는 뜻입니다

 

이 포지션은 좌, 우, 상, 하 속성의 영향을 받지 않습니다

 

 

 

 

 

CSS Position Relative

이 포지션은 요소의 현재 포지션, 즉 요소의 static 포지션에서

좌,우,상,하 값의 따라 요소의 위치를 바꿀 수 있습니다

 

 

 

 

 

CSS Position Absolute

이 포지션은, 포지션이 설정된 제일 가까운 조상 요소의 위치를 기준으로 사용합니다

만약에 조상 요소 중에 포지션이 설정된 요소가 없으면 HTML 본문의 포지션이 기준이 됩니다

 

 

 

 

 

CSS Position Fixed

이 포지션은 조상 요소의 포지션이나 HTML의 포지션이 아닌 브라우저를 포지션의 기준으로 사용합니다

이 포지션으로 설정된 요소는 페이지 스크롤 때도 움직이지 않고 그 자리에 고정됩니다

다른 포지션과 달리 이 포지션을 가지고 있는 요소의 원래 위치에 빈자리를 남기지 않습니다

 

 

 

 

CSS Position Sticky

이 포지션은 유저의 스크롤 위치를 기반으로 자리 잡습니다

이 포지션을 가지고 있는 요소는 스크롤의 위치에 따라 포지션이 relative와 fixed를 번갈아 가면서 전환됩니다

요소가 오프셋 된 위치에 도달하기 전까지는 relative포지션을 사용하다가 그 후에는 fixed포지션을 사용합니다

 

 

 

 

 

 

오늘은 CSS 포지션에 대해서 알아봤습니다

최대한 이해하기 쉽게 설명하려고 노력했는데.....🤨

이해가 안 가셨다면 직접 해보시는 걸 추천드립니다

 

 

수고하셨습니다

 

 

끝!