Categories
Tags
8
16
32
![커버: [JAVASCRIPT] 정적웹에 다크모드 적용하기 04 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
다크모드 적용 몇 달 전 다크모드에 대해 포스팅으로 기록한 적이 있습니다. 벌써 네번째 포스팅이라 거창한 내용은 아니지만 조금 더 나은 방법을 기록하고자 합니다.
2021년 11월 02일![커버: [JAVASCRIPT] 정적웹에 다크모드 적용하기 03 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
다크모드 부드러운 전환 다크모드 1편이 단순하게 다크모드를 구현하는 주제였으면, 다크모드 2편은 "언제 `body`태그에 `dark`클래스를 넣는가"였습니다. 런데 문제는 `transition`을 주는 것이었습니다. `transition`을 주게 되면 `dark`클래스로 저장하여 여는 것 아니면 켤때마다 까매지고, 하얘지는 현상이 계속 됐습니다.
2021년 08월 13일![커버: [JAVASCRIPT] 정적웹에 다크모드 적용하기 02 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
다크모드의 적용 시기 다크모드를 구현하고 쓰다가 느낀 점이 있습니다. 페이지가 리로드되거나 redirect할 때마다 .dark클래스가 늦게 적용되어 하얀 화면이 나왔다가 다크모드로 전환되는 현상이 발생한 것입니다. 아직 이해도가 부족한 시점에서 과연 어떻게 해결해야하는지 고민되기 시작했습니다.
2021년 08월 10일![커버: [JAVASCRIPT] 정적웹에 다크모드 적용하기 01 커버 이미지](/assets/images/post/covers/TIL-javascript.png)
다크모드 사용자 인터페이스에서 밝고 검은 글자 대신 어둡고 흰 글자를 나타내는 테마 요즘 다크모드가 핫한 기능이라고 해서 따라해보려고 합니다. 특히나 밤에 모바일로 기사를 읽거나 사이트를 이용할 때 아무리 폰의 밝기를 낮춰도 눈에 피로감이 가기 마련인데요. 피로한 눈을 보호하기도 하고 밝은 색상이 아닌 어두운 색상을 선호하는 사람들에게 좋을 것 같습니다. 그런데 요 며칠간 고민되었던 부분은 구현방법입니다. 동적 웹의 경우 서버측에서 데이터베이스나 요청 등을 관리해서 손쉽게 토글버튼으로 값을 저장하여 구현됩니다.
2021년 08월 09일