멋쟁이사자처럼
position: sticky 개인 프로젝트에 활용하기
Sulog 수록
2023. 3. 9. 23:50
개인 웹 페이지를 만들어보고 있던 중에 5일 차에 배웠었던
position 속성(property)의 sticky를 사용해보면 좋을 것 같아서 다시 지난 학습을 돌아보았다
position에 대한 정의는 MDN을 참고하시길
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
재료를 선택했을 때 선택된 리스트를 보여주는 박스(오른쪽)가 스크롤을 내리더라도 따라다니면 좋을 것 같다
현재는 아래로 스크롤 해서 다른 재료들을 선택했을 때 오른쪽에 박스가 보이지 않기 때문에 선택이 잘 되었는지 보려면
다시 스크롤을 위로 올려야 하는 불편함이 있다
마침 얼마전에 position에 대해 짧게 배운 기억이 있어 응용해보려고 한다
방법은 아주 간단하다!
박스에 아래와 같이 코드를 넣었다
position: sticky;
top: 30px;`top: 0`을 했을 때는 박스가 너무 위에 달라붙어있어서 적당히 30px를 주었는데 딱 보기 좋은 것 같다