학습내용
오늘은 CSS의 Position의 Sticky와 fixed에 대해서 알아봤다. Position은 선택자의 위치를 조정하는 CSS 속성이다. 속성 값을 지정하는데 선택할 수 있는 값 중에 오늘 알아본 sticky와 fixed가 있다.
position : sticky
sticky는 해당 선택자의 요소가 viewport를 벗어나게 될때 지정한 위치에 남아있는 효과를 주는 값이다. viewport는 현재 보여지는 브라우저 화면 전체를 viewport라고 한다. 우리는 한 페이지에 여러 정보를 담으면서 스크롤로 올리고 내리면서 필요한 정보의 위치로 이동해서 보는데 이때 스크롤로 이동하면서 보여지는 화면이 viewport다. 스크롤로 보이지 않는 화면은 viewport가 아니다. sticky는 원래 위치가 viewport 안에 있을때는 원래 위치에 있다가 viewport를 벗어날때 옆의 요소는 안보이는데 sticky가 적용된 요소는 left top 등으로 지정된 위치에 머물러 있게 된다. 여기서 주의할점은 left, top 등으로 위치를 지정하지 않으면 sticky를 지정한다고 해도 적용되지 않는다. 꼭 머물러 있을 위치를 지정해 줘야 효과가 나타난다.
position : fixed
fixed도 sticky와 같이 머물러 있을 위치할 곳을 left, right, top등으로 지정해 줘야 효과가 나타난다. fixed는 sticky와 달리 viewport에 항상 머물러 있는 효과를 나타낸다. sticky는 viewport를 벗어날때 효과가 나타나는 반면 fixed는 현재 페이지에서 어떤 위치로 스크롤을 이동해도 항상 고정된 절대 위치에 있다. 그래서 위치 지정을 할때 현재 위치한 요소의 위치가 아니라 화면 viewport의 절대 위치로 지정해야 한다.
느낀점
CSS 여러 효과를 보면서 정말 신기하고 재미있는 속성들이 많다는 것을 알게된다. 재밌기도 하지만 여전히 익숙치 않아서 어렵다. 여러 페이지를 만들어보면서 연습해야 친숙해지고 자신감이 붙을 것 같다. 시간이 날때마다 조금씩 만들고 적용해보면서 연습해봐야겠다.
