이 포스팅은 tistory 스킨 #1을 기준으로 작성된 것입니다. 계기 현재 Tistory에서 제공하는 #1 스킨을 사용중입니다. 평소 모니터를 3대를 사용중인데 이 스킨을 사용하면서 피벗 모니터에서 블로그 글을 보았을 때는 세로가 길어 가독성이 괜찮아 보였다가 반대로 피벗이 아닌 평범한 16:9 비율의 환경에서 글을 보았을 때 글의 내용이 상단바에 가려져 가독성이 좋지 않아 글을 읽기가 불편한 것 같다라는 생각을 하게 되었습니다. '글을 읽을 경우 상단바를 없애면 읽기 편하지 않을까?' 라는 호기심에 이 기능을 만들어보게 되었습니다. :) github 저장소는 아래에 있습니다! :) sukvvon/tistory-top-bar-visible css .hidden { animation: hi..
이 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..
github에서 fork 후 PR(pull requset) Tistory #1 스킨을 사용하던 중 TOC의 필요성을 느꼈습니다. wbluke 님의 tistory-table-of-contents 프로젝트를 발견하여 감사하며 사용하던 중 추가하고 싶은 사항이 생각나 fork 후 pull request 하였습니다. 다행히 wbluke님께서 저의 PR을 merge 해 주셔습니다. 감사합니다. 그리고 fork된 repo에 원본으로부터 오늘까지 업데이트된 최신 사항을 반영해야하는데 처음 해보는 과정이어서 한 번 정리해 보았습니다. git remote -v git remote add upstream https://github.com/wbluke/tistory-table-of-contents.git 가 이미 된 상태입..
이 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의 내용을 모두 합하여 코드를 작성하고 태그 제일 하단에 태그를 추가하고 테스트를 하였습니다. 그..
firebase 연동 오류 오류 발생 코드 import firebase from "firebase/app"; import 'firebase/auth'; const firebaseConfig = { apiKey: process.env.REACT_APP_APT_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID, appId: process.env.REACT_APP_APP_I..
적용하게 된 계기 Tistory 플랫폼을 이용하면서 markdown 문법을 이용하여 포스팅을 합니다. 하지만 뭔가 필자에겐 tistory 블로그에서 기존에 제공해주는 css가 부자연스럽고 가독성을 해친다는 생각이 들었습니다. 그리하여 수정을 해야겠다는 생각을 하였습니다. 직접 css 파일을 수정할 수 있지만 더 쉽고 간단하게 편하게 적용할 수 있는 방법이 뭐가 있을까 생각을 하였더니 github-markdown-css 프로젝트를 알게 되었습니다. github를 이용하는 필자에게도 매우 친숙한 css 스타일이기에 최종적으로 github-markdown-css 양식을 tistory 블로그에 적용하기로 마음을 먹었습니다. github-markdown-css GitHub 사이트 접속 github-markdown..
수동으로 적용하게 된 계기 포스팅을 하면서 github-markdown.css를 활용하여 작성을 해 오고, syntax highlight는 tistory에서 제공하는 플러그인을 활용하였습니다. 하지만 블로그 테마를 Book Club에서 #1으로 변경하니 syntax highlight의 첫 줄에서 공백이 일어나는 현상이 발생했습니다. 기술 블로그를 운영하는 입장에서 code highlight는 매우 중요한 요소이므로 자동으로 적용이 잘 되지 않는 이 현상을 수동으로 적용시켜 해결하고, 기본적으로 tistory에서 제공하는 것 외에 다양한 syntax highlight을 선택해 적용해야겠다고 생각하였습니다. highlight.js 설정 highlight.org 접속 highlight.org 공식사이트로 이동..
utterances를 적용하게 된 계기 이미지 출처: utterances 여러 개발자들의 기술 블로그들을 보니 댓글창이 저와 다르다는 것을 느꼈습니다. 타 플랫폼의 기술 블로그라면 그려려니 했지만 같은 티스토리 기반의 기술 블로그여도 기본 댓글창을 사용하는 것이 아닌 GitHub와 관련된 어떤 무언가를 쓰는 것 같다고 생각했습니다. 대다수의 기술 블로그 개발자분들이 utterances를 쓴다는 것을 알아냈습니다. 또한 이 utterances가 markdown 형식까지 지원한다고 하여 코멘트를 하더라도 markdown 형식으로 하면 틀에 억압되지 않고 좀 더 편하게 표현하며 소통할 수 있겠다고 생각하여 기존의 티스토리 기본 댓글을 비활성화하고 utterances을 적용하자는 생각을 했습니다. GitHub에..
Warning Warning: Error searching on GitHub: GitHub API Error: Bad credentials The GitHub credentials in the macOS keychain may be invalid. Clear them with: printf "protocol=https\nhost=github.com\n" | git credential-osxkeychain erase Create a GitHub personal access token: https://github.com/settings/tokens/new?scopes=gist,public_repo,workflow&description=Homebrew echo 'export HOMEBREW_GITHUB..
