다크모드 변경(1/?)

김치성·2022년 3월 23일
0

학습내용

  1. 구글 애널리틱스 사용
  2. javascript 기초
  3. css로 다크모드 변경

1. 구글 애널리틱스 사용

재료 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에서 이미지 크기는 어떻게 줄이지?
같은 사이트내 다른 페이지로 넘어갔을때도 선택한 모드를 유지하려면 어떻게?

학습소감

기분이 좋다..

profile
디지털백수

0개의 댓글

관련 채용 정보