3일차 미니 팀프로젝트 css 보충(애니메이션 효과, 수직정렬, 스크롤)

오늘은 중간중간 멘탈이 나가고 다시 붙잡고를 반복하는 날이였습니다😭

오늘의 study 목표!!!

• <팀프로젝트> css 보강하기

일단 오늘 목표인 css 보강을 시작했다. 2년전 학원을 다니면서 웹퍼블리셔 공부를 했던 날 배웠던 코드를 활용했다.

2년 전 썼던 낡은 코드라 지금도 쓰는지는 모르겠지만..

//카드에 마우스를 올리면 버튼보이기
   $("#cards-box .col .info").on({
      'mouseenter': function () {
          $(this).animate({ "opacity": 1 }, 200);
      },
      'mouseleave': function () {
          $(this).animate({ "opacity": 0 }, 200);
      }
   });

다음은 정렬에 관한 사항이다.

저렇게 텍스트들이 이미지 위로 올라가 정렬이 안맞는 모습이였다..
그래서 검색해보니 요런게 있었다.

vertical-align: middle;

요걸 쓰니까 딱 예쁘게 정렬이 되는 모습을 볼 수 있었다.
또 하다보니 텍스트가 너무 길어 div를 벗어나는 일이 벌어졌는데

::webkit-scrollbar : 스크롤 바 전체
::webkit-scrollbar-thumb : 스크롤 막대
::webkit-scrollbar-track : 스크롤 막대 외부
[출처][CSS] 스크롤바 스타일 디자인 변경하는 방법|작성자 3PM

검색해보니 위와 같이 스크롤을 이용하는 것을 보고 활용해보기로 했다.

그래서 요렇게 예쁜 스크롤이 생겼다!!


요렇게 디자인을 보충해주고 4시 팀 회의를 시작했다.
우리 모두 각 프로필 모달 창에 댓글을 각각 어떻게 달것인가에 대해 이야기를 했는데
성공하신 팀원분께서 계셔서 그 분 코드를 보고 열심히 공부를 해볼 예정이다.
또 모달창을 다른 방식으로 만들어보는 방법을 모색해 볼 예정이다.