내 블로그 커스터마이징 진행 상황 (2025.05.14 기준)

 

⚡1. Main 영역

 

원래 티스토리 기존 스킨

 

현재 커스텀 상황

Dark 모드 

 

 

Light 모드

---

✅ 오늘의 명언(랜덤명언) 삽입

명언은 퍼왔으나 HTML/CSS는 직접 커스텀함

✅ 상단에 Navigation Bar 삽입

 

⚡2.  Thumbnail Header 영역

hELLO 스킨 기본 버전

 

 

변경후

✅ 썸네일 이미지 추가, 카테고리명 hover 

 

✅ Navigation Bar 추가

모바일에서 접속하면 Side Bar가 없어져서 다른 카테고리에 들어가기 어려움

상단에 메인헤더, 썸네일 헤더에 Navigation  Bar 추가

 

메인이랑 마찬가지로 헤더에 다섯가지 탭 달아 주고 hover 효과 주었음.

 

---

 

⚡3. Side Bar 영역

✅ 배경 음악 뮤직플레이어

 

 

✅ 프로필 사진 그라데이션 테두리

✅ 메뉴 hover 효과

- 마우스를 올리고 있는 해당 카테고리명은 연한 보라색에서 민트색으로 불이 들어온것처럼 변함

- 왼쪽에서 오른쪽으로 그라데이션 바가 부드럽게 생김 

---

⚡ 4. 기타 커마

✅ 방명록

고양이 이미지에 가상선택자로 빗금효과 넣어줌!

✅ 댓글창 프로필 테두리 그라데이션

 

✅ 팅커벨 마우스 이펙트

마우스 움직이면 별가루 흩뿌리는 이펙트 추가

 

✅ 코드블럭 커마

- 코드블럭에 카피버튼 생성 (복사하기 전에는 복사하면 체크 표시로 바뀜)

- 코드블럭 옆에 인라인 넘버 추가

- highliter.js 에서 코드블럭 테마 `vs2015` 적용

- 폰트 변경

 

사실 개인적으로 코드블럭은 티스토리에서 기본으로 제공하는 atom one light 가 가장 깔끔하고 이쁜 것 같다. 

다시 돌아가기엔 손을 너무 많이 대서 너무 늦음,,,,

✅ 백틱으로 인라인 코드 블럭 생성

게시글 쓸 때 단어를 ` 으로 감싸면 인라인 코드블럭 생성