오늘은 position 속성 중 비슷한 2가지에 대해서 자세히 포스팅을 해보려 한다. 지난번에 인스타그램을 클론코딩해보았는데, 최근에 인스타그램과 똑같은 기능을 구현해보고자하는 마음이 들었다. 그래서 스크롤바를 내려도 메뉴가 고정된 위치를 유지하고, 인스타그램의 사이드바인 "스토리 기능"과 "팔로우 추천 기능"이 스크롤바를 따라 함께 움직이는 기능을 구현해보고 싶어졌다. 그러면서 알게 된 지식들을 다시 상기시켜보고자 업로드해본다.
위 영상을 보면 상단의 메뉴바가 고정되어 스크롤을 내려도 사라지지않는다. 또한, 오른쪽의 사이드바 메뉴는 스크롤을 따라 움직인다.
sticky는 CSS의 Position의 속성으로 사용된다. Fixed가 브라우저 화면의 절대 위치를 사용하는 반면, Sticky는 부모 태그의 절대위치값을 사용하는 방법입니다. 그래서 반드시 Sticky의 상위에 부모 컨테이너가 존재해야 합니다.
- position : fixed => 최상위 브라우저 창을 기준으로 절대 위치를 지정
- position : sticky => 부모 태그의 크기를 기준으로 절대 위치를 지정
1. position : fixed 란 ?
위 속성을 적용하게 되면 일반적인 document 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다.
2. position : sticky 란 ?
위 속성을 적용하게 되면 일반적인 document 요소 순서에 따라서 배치가 되는 것은 fixed랑 동일하지만, 가장 가까운 부모 element를 기준으로 배치가 된다. 해당 부모의 스크롤 위치에 도달하면 그때부터 fixed처럼 지정한 위치에 고정되기 시작해서 해당 부모의 위치가 스크롤을 벗어나면 고정되던 위치가 사라진다. 각각의 콘텐츠마다 고정해야 하는 내용이 달라져야 되는 경우에는 sticky를 이용하면 좀 더 콘텐츠에 맞는 내용을 고정시켜 사용자에게 명확한 정보를 전달해줄 수 있다.
즉, fixed와 sticky의 의미가 비슷해보여 헷갈릴수있지만 둘의 동작하는 차이는 뚜렷하다. 요약하면 아래와 같다.
Position: Fixed => 스크롤과 관계없이 화면에 고정 된다.
Position: Sticky => 최초에 relative속성과 같이 동작하다가 스크롤이 이동하면 사용자가 지정한 지점에 요소가 고정된다.
보통 fixed는 상단 메뉴바에 사용하고 sticky는 오른쪽 사이드바에 주로 사용된다.
왜냐면 , 페이지 전체 영역을 기준으로 고정이 되는 fixed와 다르게 sticky의 경우는 부모요소를 기준으로만 움직이기 때문이다.
즉 sticky 속성은 sticky 선언한 영역의 부모 요소 안에서만 고정되어 스크롤에 따라 움직이게 된다는 것을 알 수 있다. 그렇기 때문에 fixed와도 확연히 다르다는 것을 알 수 있다. 페이지 전체 영역을 기준으로 고정이 되는 fixed와 다르게 sticky의 경우는 부모요소를 기준으로만 움직이기 때문이다.
아래는 이해를 돕기 위한 예제 코드이다.
<body>
<nav>상단메뉴바</nav>
<div class="container">
<div class="content">Main content</div>
<div class="sidebar">Sticky Sidebar</div>
</div>
<div class="footer">Footer</div>
</body> .container {
display: flex; //--> 레이아웃 지정
flex-flow: row nowrap; //--> container안의 자식 요소들을 가로로 펼쳐서 보여 줌
}
.content {
width: 80%;
height: 800px; //--> 높이를 sidebar보다 높게 설정함
background: #f5f5f5;
}
.sidebar {
width: 20%;
height: 400px; //--> sticky가 적용될 요소는 꼭 height값이 있어야 함
position: sticky; top: 0; //--> sticky 상단의 offset 0으로 부터 적용됨
background: yellowgreen;
}⭐️ 중요한 것은 sticky를 지정 할 때는 본문보다 height가 작아야 효과가 적용되는 모습을 볼 수 있고 꼭
퍼센트던지, px던지,높이값을 지정하는 것이 좋다.
top : 0이면 상위 부모 컨테이너(.container)의 가장 상단에서 부터 적용이 시작된다.
만약 top : 10px이면 부모 컨테이너의 상단 10px 이후 부터 적용된다. ⭐️
3. sticky 속성이 동작하지 않으면 . .?
sitcky 속성은 굉장히 유용한 속성이다. 하지만 sticky 속성은 사용하기가 조금 까다롭다. 실제로, sticky 속성을 오른쪽 사이드바에 줬을 때, 작동하지 않았다. 작동시키기 위해서 해결방법을 열심히 찾아서 해결했다. 그래서 sticky 속성이 동작하지 않을 때, 확인해봐야할 것을 정리하려고 한다.
① 도달 위치 설정이 되어 있는지 확인하기
sticky는 top, bottom, left, right 속성 중 하나는 반드시 필요하다.
설정 된 위치에서 fixed 속성처럼 동작해야 하는데 기준 위치가 없기 때문에 동작하지 않는 경우가 있기 때문이다.
② 부모 또는 조상 노드에 overflow 속성이 설정되어 있는지 확인하기
sticky 속성의 경우, 부모 또는 조상 노드에 overflow 설정이 아래와 같이 설정되어 있으면 동작하지 않는다.
overflow: hidden / overflow: scroll / overflow: auto
③ 부모 노드의 height가 설정되어 있는지 확인하기
sticky 속성을 갖는 element의 부모 노드는 반드시 height가 설정되어 있어야 한다.
그렇지 않으면 sticky 속성의 엘리먼트는 stiatc 속성처럼 동작하게 된다.
( ❗️주의❗️ height : xx%; 와 같이 퍼센트로 설정한 경우에는 동작하지 않는다. )
'HTML & CSS' 카테고리의 다른 글
| [CSS] 이미지 크기 비율에 맞게 줄이기 (0) | 2022.02.12 |
|---|---|
| [CSS]상속되는 요소 / 상속되지 않는 요소 (0) | 2022.02.12 |
| < 개발자 도구 > (0) | 2022.01.30 |
| Layout (레이아웃)의 모든 것 (0) | 2022.01.25 |
| "Semantic Web"(시맨틱 웹) & "Semantic Tags"(시맨틱 태그) (0) | 2022.01.25 |
댓글