[Todo] css, htmlFor, 다크모드 하고 싶은데

모코코 이미지 - 스마일게이트 로스트아크

폰트 - 휴먼범석체

 

형광펜 그어지는 게 어두워지니까 별로기도 하고... 완전 쭉 그어져서 그냥 줄 그어지고 색 어둡게 하는 걸로 바꿨다. 

 

지금 궁금한 건 체크박스 커스텀, 라이트모드 추가하기! 

아직까지 우산을 한 번도 씌워본 적이 없다. 

 

체크박스가 쉬울 것 같아서 그것부터! 

input을 숨기고 label을 커스텀하는 방식이라고 하는데.. .최근에 라디오 버튼인가 체크박슨가 커스텀 가능하게 됐다고 본 것 같은데 아닌가? 최근도 아냐 학원 다닐 때였는데? 근데 아닌가봄... 검색해도 안 나오네

 

 

 

.todo-li label:before {
  content: "";
  display: inline-block;
  border: 1px solid gray;
  width: 14px;
  height: 14px;
}

이걸 추가하니까

옆에 박스가 생겼다! 

 

열심히 꾸몄는데ㅠㅠ,, 아 움짤엔 마우스가 안 나오네..ㅎㅎ

오른쪽꺼보면 다른 곳 label 아무리 눌러도 첫번째꺼만 체크된다. 

 

아이디가 같다.. 왜? 

 

그럼 onClickCheck에서 item을 보낼 때부터 다른 애가 간다는 거잖아,,,

htmlFor가 없을 땐 오류가 발생하지 않는다.

그래서 일단 체크박스를 감싸는 식으로 만들었다. 

 

근데 그럼 자식이 바꼈을 때 부모가 바뀌는 걸 만들어야 한다... 

 

그럼 다시 취소 ㅠㅠㅠㅠㅠㅠㅠ

그리고 단톡방에 물어보면서 정보를 얻었다~

() => onClickHeart(love) 랑 onClickHeart(love) 의 차이를 알려주셨다. 

전자는 콜백 함수를 넘겨주고 후자는 결과값을 받는 거라고 하셨다. 

 

스택오버플로우에 올렸더니 

 

You are passing same id for all the input elements. Change your id and make it unique. May be use id of todo if you have one. Something like id={todo-${item.id}} this. 

– Shubham Waje

그리고 Ali님의 Do this.. 라는 말과 함께 써진 코드... 

너무나 잘 작동해!!!!!!!!! 

 

아까 uuid를 넣어보긴 했었는데 그거랑 다른건가? 

 

 

 

... 라이트모드 도전^^! 

조건이 여러개일 때 클래스 네임 주기 

너무 어려운 거 아냐...???!?!?!!? 이렇게 하는 거 맞나? 이런건 이모션이 편했던 것 같다. 둘의 차이점을 아주 잘 느끼는 중 

 

그리고 이렇게 하면 꼬여서 안되는 것 같다. ^ㅁ^ 어떻게 해야 쉽고 빠르게 다크모드를 만들 수 있을까,,, 

 

 

 

+

택배 예약했다!

롯데택배는 1월 13일까지 가능

 

 

import mokoko from "../../img/mokoko.jpeg";

이미지가 깨지길래 src밑에 img 폴더 놓고 거기서 수입해왔다. 

 

할 일 추가하기, 삭제하기, 완료하기

전부/하는 중/다 함 나눠서 보기

 

안되는 것 : 다크모드(라이트모드), 해냈음에서 추가를 하면 checked가 전부 풀림