일단 블로그 일단 블로그

CSS와 JavaScript로 다크 모드, 라이트 모드 전환을 구현해보았다. 토글 체크박스 클릭 시 아이콘이 바뀜과 동시에 모드가 바뀌도록 구현했다. 우선 Light Mode, Dark Mode에 쓰일 css 변수부터 지정해줬다. 그리고 토글 체크박스을 하나 생성 후 css를 입혀준다. transform과 transition을 사용해 토글 박스 체크시, 아이콘이 0.5초 동안 32px 움직이도록 했다. Icon은 Material-icon을 사용했기 때문에 아래의 자바스크립트 코드처럼 .html을 사용해 텍스트를 변경해주었다! (아주 손쉽게 아이콘이 변경된다.) 이제 CSS와 토글 체크박스는 완성이 되었다. 자바스크립트만 작성해주면 끝이 난다. 체크 박스가 작동됬을 때, 바디에 다크모드 클래스가 없다면 다..

입력한 폼을 컨트롤러로 전송하기 전에(form action이 수행되기 전에) 함수를 통해 입력한 내용이 유효한지 확인하거나, 또는 모달창을 닫고 부모창을 새로고침 함으로써 자연스레 입력한 값이 부모창에 노출되게 해야할 필요가 분명 있을 것이다. 현재 진행하는 프로젝트에서는 스케줄을 입력 시 옵션을 Loop로 할 지, OneTime으로 할 지 선택을 해야하는데 각 선택값마다 입력하는 폼이 다르다. 동적으로 html을 생성하지 않고 hide(), show()메소드를 사용해서 가려주고 보여주는 형식으로 코드를 짰기 때문에 폼 전송 시 가려졌던 폼도 전송이 되는 이슈가 발생하였다. (지금 생각해보니 동적으로 html form을 생성했다면 더 쉽고 코드가 간결했을 텐데 아쉽다. 하지만 내가 했던 방법도 분명 언젠..