[TIL] 2021/11/25 Thu - 정신 체리세요.

 

 

 

Today I learned

 

 

 

오늘은 한 게 개인과제밖에 없다. (파워당당)

근데 개인과제를 하루종일 했다!

 

 

필수로 넣어야 하는 요구사항 + 카드 수정하기, 삭제하기 구현은 어제 끝나서

오늘 자잘구리한 기능이랑 CSS만 하면 됐는데, CSS가 오래 걸렸다.

CSS는 하면 할수록 어려운 것 같다.

 

오늘은 과제에서 아래의 것들을 적용했다.

 

 

📌 카드에서 체크 아이콘을 클릭하면 해당 카드 데이터의 checked가 false에서 true로 업데이트되면서

     아이콘의 색이 변하도록 하였다.

     아이콘의 색이 유색인 상태에서 다시 체크 아이콘을 클릭하면 데이터의 checked는 다시 true에서 false로 바뀌며,

     아이콘의 색도 다시 흰 색으로 돌아온다.

 

 

📌 카드 위에 마우스를 올리면 해당 카드의 단어에 언더라인이 생기면서 하이라이트되도록 만들었다.

     처음에는 단어에 마우스를 올리면 언더라인이 생기도록 만들었는데

     단어는 면적이 너무 좁은 것 같아서 카드 전체 영역으로 변경했다.

 

     변경하는 과정에서 카드에 호버했을 때 어떻게 글자의 영역만 css를 적용할 수 있는지 몰라서 한참 헤맸다.

     :hover::after 와 ::after를 이곳 저곳에 시도했더니 되었다!

   

 

 

myownvoca - main card view

 

 

 

📌 스크롤투 버튼을 만들었다.

     위 방향 버튼을 누르면 페이지 최상단으로, 아래 방향 버튼을 누르면 페이지 최하단으로 이동한다.

    

 

 

myownvoca - main scrollto

 

 

 

📌 모든 컴포넌트들의 css 적용을 마쳤다.

   

 

 

myownvoca - add voca

 

 

 

Tomorrow I Will

 

 

📌 개인과제 마무리

     어울리는 폰트 찾아서 적용하기

     로딩 중 보여지는 화면 만들기

     input value 유효성 검사 추가하기

 

 

📌 알고리즘 문제 풀기

 

 

 

 

 

안 그러려고 하는데 자꾸만 과제가 우선순위가 돼서

결국 하루에 해야 할 일을 다 못하게 되는 일이 종종 일어나고 있다 ㅠ_ㅠ

정신 체리자!