개요
Todolist 프로젝트에서 css를 이용하여 Todo 추가하기 버튼을 오른쪽 아래에 고정시키려고 하는데, 고정이 되지 않는 이유 그리고 해결법을 정리한 글이다.
상황
Todolist 기능중에서 새로운 할일을 추가하기위한 버튼을 오른쪽 아래에 고정되도록 css를 설정했다. 하지만 scroll에 따라서 button이 고정되지 않고 같이 움직이고 있었다.
css sticky property
css에서 position property중 하나인 sticky를 사용해서 오른쪽 아래에 고정을 하려했다. 그런데 내가 원하던 위치에 고정이 되지를 않았다.
플러스 버튼이 오른쪽 밑에 부분에 고정되는걸 예상했으나 실제론 달랐다. 내가 원했던 것은 todolist 오른쪽 아래에 고정되는걸 원했으나, todolist의 밑에 붙어서 list의 길이에 따라 같이 버튼이 움직이게 되었다. 원인은 높이에 있었다.
그리고 sticky의 문제점은 overflow property를 같이 사용할수 없다는 점이었다. Todolist의 길이가 길어지면 overflow처리로 전체 스크롤이 생기지 않도록 하려고 하였기에 sticky는 적합하지 않은 방식이다.
리스트와 버튼 제목 (시간) box 구분
높이에 따라서 변하는 이유는 모든 element가 하나의 box 안에 다같이 있기 때문이다. 그렇기에 버튼과 Todolist (incomplete/complete)를 다른 box에 분리하였다. 그리고 제목부분의 box는 css에서 sticky 처리를 하여 위에 고정시키는 방식으로 수정하였다. Todolist 부분은 list의 길이가 길어질때를 대비하여 css에서 overflow-y 및 height :100% 설정을 주고 높이를 고정하였다.
결론
Todolist 프로젝트를 통해서 React의 기본적인 사용법을 다시 복습할수 있는 시간이었다. React를 공부할때 누구나 가장 처음 하는 프로젝트 이지만, 생각해보면 쉽다고 생각하는 이 Todolist를 만들어 본적이 없었기에 이번 기회를 통해서 Todolist 프로젝트를 진행하게 되었다. 실제로, 쉽다고 생각했었지만 의외로 어려운 부분들이 꽤나 많았기에 좋은 React 경험을 쌓을수 있었다.
이 프로젝트를 통해서 알게된 것, 더 자세히 알게된 것은 다음과 같다.
- CSS의 sticky property의 개념 및 사용법
- tailwind의 기본적인 사용법
- CSS의 box 모델의 사용법
이 프로젝트를 통해서 알게된 내가 잘 모르는 부분은 다음과 같다.
- svg가 정확히 무엇인지, svg를 왜 사용하는지, svg의 사용법
- React에서 이미지를 다루는 방법
svg는 요즘 이미지를 다룰때 많이 사용되는 확장자이다. 하지만 svg가 무엇인지 그리고 어떻게 사용하는지에 대해서 지금까지 아는부분이 거의 없었다. 이후, 더 깊게 알아볼 예정이다.
Ref
[CSS] position sticky를 사용 할 때 top이 아닌 bottom, 아래에 위치하는 방법
오른쪽에 컴포넌트 position:sticky 로 고정하기
