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

 

⚡1. Main 영역

 

원래 티스토리 기존 스킨

 

현재 커스텀 상황

 

전체 뷰

 

Dark 모드 

 

Light 모드

 

---

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

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

✅ Header 이미지 변경

변경전

기존에는 프로필 사진이 반투명 효과 적용되어 메인 헤더 부분에 띄워짐.

 

변경후

고양이 이미지로 변경 해 주고 border-radius 

 

✅ 상단에 Navigation Bar 삽입

 

헤더 커스텀이 끝나고 나니 모바일 화면에서는 Side바에 hidden이라 카테고리명이 안 뜬다.

그래서 상단에 네비게이션 바를 달아주기로 했다. 

 

 

변경 후 

- `Home`, `Algorithm`, `Coding`, `ETC.`, `Visitor` 탭 Navigation Bar 달아줌

- hover 하면 그림자 생기고, 폰트 색상 변하도록 해줌

- 내 블로그명 -> `내 블로그명 (전체글 or 카테고리명)` 형식으로 변경

 

✅ 영화 리뷰 게시물들 모아서 필름 모양으로 띄우기

- 이미지에는 sepia(), grayscale() 줘서 움짤 톤 어둡게 맞춤

- 부드럽고 자연스럽게 움직임 (오른쪽에서 왼쪽으로) transform 0.3s ease,

- hover 하면 영화 제목이 사진 중앙에 나오면서 grayscale(80%)

- `<a href="">` 걸어서 해당 영화 리뷰한 게시물로 넘어갈 수 있도록 했음

- 가상선택자 `::after`로 `border`에 점선 추가해서 영화 필름 테두리도 만들어줌

---

⚡2.  Thumbnail Header 영역

 

hELLO 스킨 기본 버전

 

 

변경후

 

✅ 썸네일 사진 변경

- 기존에는 썸네일에 게시글 대표 사진이 흐려지면서 확대되어 나타났는데 해당 효과 삭제함

- 기존 가운데 정렬을 왼쪽 정렬로 바꾸고 미모지 추가해줌

✅ 썸네일 카테고리명 hover 효과

- `Algorithm/PCCP과제테스트` 라는 카테고리명에 배경색 넣어서 버튼으로 만들어 줌

- 버튼 위에 마우스 올리면 배경이 그라데이션으로 변함 + 글씨색 white로 변화

 

✅ Navigation Bar 추가

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

 

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

 

마우스 올리기 전

 

마우스 올림

---

 

⚡3. Side Bar 영역

✅ 배경 음악 뮤직플레이어

- 해당 블로그는  전혀 수익 창출하지 않으며 어떠한 광고도 내고 있지 않습니다.

- 음악 바뀌면 CD와 배경 색상도 함께 바뀜

- 음악 플레이하면 CD가 회전하는 효과

- 플레이 버튼 마우스 올리면 하늘 색상이 바뀌는 효과

- 뮤직플레이어에 마우스 올리면 곡정보(이름, 재생위치) 알려주는 효과

- 배경이 투명한 svg 파일로 건물과 달 넣어줌

 

 

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

✅ 네이버지식인 & 깃허브 배지

- 네이버 지식인 프로필, 깃허브로 이동하는 배지 달아주었으나 현재 공사중으로 잠시 내림

- 아래 기술 스택 배지들로 조만간 재배치할 예정

✅ 메뉴 hover 효과

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

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

---

⚡ 4. 기타 커마

✅ 방명록

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

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

내 프로필 사진 및 이웃들 프로필 사진에 그라데이션 테두리 넣어 줌 

 

✅ 팅커벨 마우스 이펙트

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

 

✅ 코드블럭 커마

기존 코드블럭

기존 코드블럭 사진이 없어서 구글링 했다.

거의 다 커스텀된거라 기본 코드블럭 찾는게 어려웠다.

찾긴 했는데 스크롤바가 있음

 

변경후

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

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

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

- 폰트 변경

 

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

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

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

게시글 쓸 때 단어를 ` 으로 감싸면 인라인 코드블럭이 생성되는 편리한 효과