모각소 5주차 활동내용
이번 주차는 프로젝트의 메인페이지를 제작하는 것과 프론트와 백엔드 공부한 것을 공유하는 목표로 만났다. 그 중 나는 프론트로 참여했기 때문에 프론트에 대해 막혔던 부분과 해결과정을 얘기했다.
겪었던 어려운 점들, 해결방법 🚩
처음엔 block 웹 요소들을 display: inline-block이나 float으로 이쁘게 정렬하면서 프로젝트를 진행했으나, 자식 요소들이 많아지고 원하는 배치대로 할려면 요소들 하나하나를 바꿔줘야하는 불편한 점이 있었다. 예를 들어 float으로 속성이 지정된 container에 요소들을 일정 자식 요소 뒤에 다음 줄로 바꿔줄려고 했는데 wrapper를 쓰고 width를 바꿔주는 등 복잡하게 신경쓸 일이 너무 많았다.
그래서 요즘 block요소들을 배치하는 트렌드인 display: flex에 대해 완벽정리해서 써보자라는 생각으로 공부했고, 좋은 블로그를 찾아서 공유해보고자 한다!
display: flex 총정리 : https://heropy.blog/2018/11/24/css-flexible-box/
또 다른 난관은 삭제, 추가할 때 이쁜 애니메이션 효과를 어떻게 넣어줄까에 대한 고민이 있었다. 자바스크립트로 애니메이션 효과를 주는 것을 아직 잘 몰랐기에 css를 통해 transition과 keyframe으로 만들고 체크를 해제/표시 할때마다 해당 요소의classList에 삭제 추가를 하는 방식으로 만들려고 했지만, 부모요소가 같이 따라오는 버그나 애니메이션 결과에 멈추지않고 돌아오는 것을 animation-fill-mode: forward로 막고 해봤는데 생각대로 되지않았다.
이때 gsap이란 좋은 애니메이션용 JS 라이브러리를 찾아서 정말 간편하게 효과를 줄 수 있었다!!
앞으로 계획 🐳
이번 페이지를 제작하면서 많이 서칭해보고 느낀점이, CSS는 입문하기엔 쉽지만 마스터하기엔 정말 어렵다는 점이다. 같은 결과물이지만 사람마다 해결방법이 다르고, 어떤 방법이 더 좋다는 것이 없기때문이다. 사실 기능만 구현하는 것은 금방할 수 있지만 이번에 이쁜 애니메이션을 넣어보고싶다는 생각에 많이 찾아보고 공부해볼 수 있었다. 문제점을 해결하려고 공부하면서 생긴 새로운 목표가, 통통 튀는 웹페이지를 만들고 싶다는 것이다. 프론트의 꽃은 시각적 재미라 생각하기 때문이다!
결과물 😊
git 주소 💻
