320x100 728x90 다크모드2 로컬스토리지를 이용해서 웹사이트 다크모드 구현하기 오늘은 국비지원 교육과정 중 2차 프로젝트에 포함된 내용이며 실제 제가 구현한 내용을 바탕으로 로컬 스토리지와 세션 스토리지, 쿠키에 대해 알아보겠습니다. 일단 제가 다크모드를 구현하기 위해 했던 설계입니다. 위 그림의 이해가 어려울 수 있어, 추가 설명을 하자면 1. 클라이언트가 서버에게 최초 문서를 요청할 때는, 값이 null임. 이를 이용해 null이거나 false면 데이터 타입이 boolean인 flag의 값을 사용. 2. 사용자의 클릭 이벤트에 따라서 flag값이 true , false를 반환함. 이를 클릭 시마다 localStorage.setItem('flag', 'true') , localStorage.setItem('flag', 'false')를 flag라는 키워드에 Value를 저장 3... 2020. 7. 2. 구글 확장프로그램 Dark Reader 자주 사용하는 구글 확장 프로그램인데 모든 웹 사이트에서 다크 모드로 바꿔주는 프로그램이다. 구글의 웹스토어에 들어가서 이 프로그램을 설치하면 크롬 브라우저 우측 상단에 이미지와 같은 아이콘이 등장한다. 선택적으로 켜고 끌 수 있고, 눈에 무리가 많이 갈 때, 자주 사용한다. 더군다나 요새 모바일이나 랩탑 모니터 등 대부분의 디스플레이는 OLED 디스플레이를 많이 사용한다. 해당 디스플레이의 특징은 많이 사용하면 열이 발생하고 발생된 열로 인해 해당 픽셀이 마치 타버린듯한 번인 현상이 자주 일어난다. 때문에 색표시에 부담이 덜 한 다크모드를 사용함으로써 디스플레이에 소모되는 배터리를 줄이고 눈도 편안한 프로그램이라 자주 사용한다. 요새 많은 웹 사이트들이 다크 모드를 지원하는 만큼 다크모드는 OLED디스.. 2020. 5. 21. 이전 1 다음 300x250 320x100
