다크모드 변경(1/?)
학습내용
- 구글 애널리틱스 사용
- javascript 기초
- css로 다크모드 변경
1. 구글 애널리틱스 사용
- 구글 애널리틱스 사용
- javascript 기초
- css로 다크모드 변경
재료 https://analytics.google.com/
구글 애널 가입 후 사용하는데 큰 문제는 없음
이때 cms를 통해 만든 사이트 경우 head에 코드를 넣어줘야 되는데 코드를 다시 찾으려니 찾기가 힘들어 다시 기록
만든 속성에서 데이터스트림 - 속성 - 테그하기에 대한 안내 순서로 보면 코드를 찾을 수 있다.
2. javascript 기초
생략
3. css로 다크모드 변경
<input type="button" name="button" value="white mode" onclick=" document.querySelector('body').style.backgroundColor='white'; document.querySelector('body').style.color='black';"> <input type="button" name="button" value="night mode" onclick=" document.querySelector('body').style.backgroundColor='black'; document.querySelector('body').style.color='white';">
body에 위 내용 추가하면 이런 버튼이 생기고 클릭시 다크모드 설정/해제가 가능하다.
기타
일반 웹에서 devtool에서
document.querySelector('body').style.backgroundColor='black'
입력시 웹을 임의로 다크모드로 설정할 수 있어 보였다.
궁금증
자동으로 모든 웹에 접속시 자동으로 입맛데로 바꿀수는 없는가?
velog에서 이미지 크기는 어떻게 줄이지?
같은 사이트내 다른 페이지로 넘어갔을때도 선택한 모드를 유지하려면 어떻게?
학습소감
기분이 좋다..
Author And Source
이 문제에 관하여(다크모드 변경(1/?)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@veeve12/day1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)