position: sticky 개인 프로젝트에 활용하기

개인 웹 페이지를 만들어보고 있던 중에 5일 차에 배웠었던

position 속성(property)의 sticky를 사용해보면 좋을 것 같아서 다시 지난 학습을 돌아보았다 

position에 대한 정의는 MDN을 참고하시길

position - CSS: Cascading Style Sheets | MDN

 

 

개인 포트폴리오

재료를 선택했을 때 선택된 리스트를 보여주는 박스(오른쪽)가 스크롤을 내리더라도 따라다니면 좋을 것 같다

 

개인 포트폴리오

현재는 아래로 스크롤 해서 다른 재료들을 선택했을 때 오른쪽에 박스가 보이지 않기 때문에 선택이 잘 되었는지 보려면 

다시 스크롤을 위로 올려야 하는 불편함이 있다 

 

마침 얼마전에 position에 대해 짧게 배운 기억이 있어 응용해보려고 한다 

 

방법은 아주 간단하다! 

박스에 아래와 같이 코드를 넣었다 

position: sticky;
top: 30px;

`top: 0`을 했을 때는 박스가 너무 위에 달라붙어있어서 적당히 30px를 주었는데 딱 보기 좋은 것 같다

 

 

개인 포트폴리오