이 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-..
