이 Tistory(#1) 아이콘 CSS로 구현하기 포스팅은 Tistory(#1) theme toggle 구현기의 내용을 일부 공유합니다. 계기 theme toggle을 구현하고 나니 기존 tistory에서 제공하는 아이콘이 깨지는 것을 알았습니다. 미관상 좋지 않다고 판단하여 fontawesome을 쓸 수 있지만 간단하여 직접 CSS를 활용하여 구현해보기로 하였습니다. 돋보기 아이콘 🔍 html css의 이름은 BEM을 참고하여 정해보았습니다. 모두 태그를 사용하여 reading-glasses 클래스를 부모 요소로 하여 자식 요소로 돋보기 모양의 원인 reading-glasses__circle, 그리고 돋보기 모양의 선에 해당하는 부분인 reading-glasses__line을 둡니다. css .read..
이 TisTory(#1) 간단하게 로딩 창 구현하기 포스팅은 Tistory(#1) theme toggle 구현하기를 일부 공유합니다. html html 코드는 크게 3개의 요소로 이루어집니다. #loading → loading 화면 전체 #loading-circle → loading을 의미하는 원 #loading-empty → #loading-circle에서 원의 미완성 부분 loading.css #loading { display: flex; justify-content: center; align-items: center; z-index: 32; position: fixed; top: 0; width: 100vw; height: 100vh; background-color: var(--background-..
나만 없는 다크모드,,, 본 포스팅은 티스토리 #1을 기준으로 합니다. velog나 notion 그리고 github.io를 이용하는 블로거분들의 페이지를 방문할 때가 있습니다. 그리고 이 분들과 저의 차이점, 그리고 부러운 점이 하나 있었습니다. 바로 다크모드 테마가 있다는 것이었습니다... 평소 tistory에서 제공하는 #1 스킨을 사용하는 저는 다크모드 그리고 다크모드와 라이트모드를 사용자 기호에 맞게 사용할 수 있는 토글도 없었습니다. 그래서 저의 티스토리 블로그 테마에 다크모드와 라이트모드 토글을 구현하였습니다. FOCU 현상 문제 ... 처음에 구현할 때 theme.js와 themeToggle.js의 내용을 모두 합하여 코드를 작성하고 태그 제일 하단에 태그를 추가하고 테스트를 하였습니다. 그..
