![[CSS]Position 속성에 대해(absolute,relative,static,fixed,sticky)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpiaFV%2FbtrNUaNPSwl%2FWwnu92ZTJTlI6tSWAkkKV0%2Fimg.jpg)
Position이라는 속성은 CSS Layout을 도와준다.
Layout.. Layout.. 레이아웃,많이 들어 봤는데 정확한 정의가 무엇일까.
정보를 잘 정리 정돈해서 일관된 모습으로 보여지도록 하는 것은 디자인에서 매우 중요한 주제입니다. 구획을 나누고 적절히 정보를 배치하는 것을 레이아웃(layout)이라고 합니다.
(출처:http://www.tcpschool.com/html/html_space_layouts)
나누고 배치하는 것 즉,공간을 어떻게 구성할 것인지 고민해보는 것이라고 할 수 있을 것 같다.
(Layout은 CSS뿐 아니라 HTML에서도 태그나 요소를 이용해 구성할 수 있다.)
그 중 CSS에서 유용하게 쓸 수 있는 Position 속성과 Flex 속성에 대해 정리해보고자 한다. flex는 나중에
Position 속성은 Layout을 어떻게 도와줄까?
이름에서도 알 수 있듯 각 요소들의 위치를 명시할 수 있게 도와준다. 즉 포지셔닝을 할 수 있게 해준다.
5가지 value가 있는데
- relative
- absolute
- static
- fixed
- sticky
가 있다.
1)Position
사용법은 Positon 속성을 먼저 5가지 value들 중 하나와 함께 정의해주고 top,bottom,left,right 속성들을 사용하여 요소들을 배치하는 것이다. 직접보며 알아보자.
See the Pen Untitled by 김도현 (@d0zzang) on CodePen.
사용법은 어렵지 않은 것 같다. relative는 자신이 있는 위치가 기준으로 움직인다. 이게 바로 margin과의 차이라고 할 수 있는데 위 코드와 결과물을 보면 relative를 쓰나 margin을 쓰나 같은 결과가 나올텐데 왜 relative를 쓰나요?라고 의문을 가질 수 있다. 하지만 relative는 margin과 다르게 전체가 움직이지 않고 오로지 자신이 원래 존재하던 위치만 신경쓴다.
See the Pen Untitled by 김도현 (@d0zzang) on CodePen.
이렇게 margin과 다르게 겹칠 수 있다는 말이다.
2)absolute
absolute 속성은 항상 자기의 부모 태그 기준으로 주어진 픽셀만큼 움직인다. 몇 번째 div이건 몇 번째 p이건 관계없이 부모 태그의 속성이 중요하다.
이때,부모 태그의 속성은 반드시 relative,absolute,fixed,sticky 중 하나여야 하는데 만약 부모 태그에게 이 속성이 없다면 그 위 부모 태그인 <body>태그가 부모 태그가 되겠다. <body>태그의 default는 relative다.
글로만 설명하니 헷갈리니 직접 보겠다.
See the Pen Untitled by 김도현 (@d0zzang) on CodePen.
위는 단순히 div태그 안에 div태그를 준 것이다. 참고로 div태그는 static속성을 가지고 있다. static이 무엇인지는 아래에 설명하겠다. 어쨌든, 위의 4가지 속성에 해당하지 않는다!
See the Pen Untitled by 김도현 (@d0zzang) on CodePen.
이번에는 비교대상이 적힌 div태그에 absolute 속성을 줘 보았더니 이상한 위치에 있는 것 같다. 위에서 기술한 것을 천천히 따라가보자. absolute 속성은 부모 태그가 기준이랬다. 그렇다면 위 div태그가 부모 태그니까 위 div 태그가 기준인가? 아 그런데 div태그의 속성은 static이다. 따라서 비교대상이 적혀있는 div태그의 부모 태그는 body태그일 것이다! body태그가 기준이 된다면 웹사이트 좌상단의 위치가 좌표(0,0)이 되어 우리가 top,bottom,left,right에 pixel을 주는 만큼 좌표가 이동한다.
그렇다면,부모태그가 body태그가 아니라면?
See the Pen Untitled by 김도현 (@d0zzang) on CodePen.
위와 다르게 첫번째 div태그에 relative 속성을 줘 보았더니 자식태그는 부모태그의 위치가 새로운 기준이 되어 (0,0)으로 좌표가 형성되다. 이것이 바로 absolute속성의 사용 방법이다.
3)static
static은 웹사이트의 기본 속성 값이다. 따라서 위치 속성인 top,left,right,bottom를 필요로 하지 않는다. default값이다.
4)fixed
fixed속성은 기본적으로 absolute속성과 사용법이 같다. 하지만 스크롤 바를 내려도 브라우저 창을 기준으로 개체가 따라온다는 차이점이 있다.
5)sticky
위 fixed속성이 absolute속성과 사용법이 같지만 스크롤 바의 이동에 따른 차이점이 있었다면,sticky 속성은 relative 속성에 위 fixed의 차이점이 더해진 것이라고 보면 된다. 역시 브라우저 창을 기준으로 개체가 따라온다.
'Web' 카테고리의 다른 글
| [HTML] <input> 태그 정의/속성/예시 (hidden 속성에 대하여) (0) | 2022.09.21 |
|---|---|
| [HTML] <a> 태그 정의/용도/예시 (0) | 2022.09.12 |