My Tech Blog (커스텀)

1. 사이드 메뉴 hover 효과 커스텀 [기존 메뉴] 기본 메뉴도 깔끔하고 이쁘지만 나는 다크모드를 위해서 눈에 띄는 효과를 주고 싶었다.마우스 올리면 글씨색이 변하면서 글씨 아래에 그라데이션바가 생기도록 커스텀 했다. hELLO 스킨 기준/* 사이드바 호버 그라데이션바 커스텀(24.11.11) */#sidebar #category .tt_category ul li::after { width: 0%; height: 2px; position: absolute; transition: width 0.4s; background-color: #80D0C7; background-image: linear-gradient(90deg, #80D0C7 0%, #7e92eb 100%); ..

⚡1. Main 영역 원래 티스토리 기존 스킨 현재 커스텀 상황 전체 뷰 Dark 모드  Light 모드 ✅ 오늘의 명언(랜덤명언) 삽입명언은 퍼왔으나 HTML/CSS는 직접 커스텀함✅ Header 이미지 변경변경전기존에는 프로필 사진이 반투명 효과 적용되어 메인 헤더 부분에 띄워짐. 변경후고양이 이미지로 변경 해 주고 border-radius  ✅ 상단에 Navigation Bar 삽입 헤더 커스텀이 끝나고 나니 모바일 화면에서는 Side바에 hidden이라 카테고리명이 안 뜬다.그래서 상단에 네비게이션 바를 달아주기로 했다.   변경 후 - `Home`, `Algorithm`, `Coding`, `ETC.`, `Visitor` 탭 Navigation Bar 달아줌- hover 하면 그림자 생기고, 폰..

✨커스텀 전 기본 헤더 티스토리에서 hELLO 스킨을 적용하고 게시글을 발행 한 뒤 헤더 부분의 모습이다. 썸네일로 설정한 이미지가 blur 처리되면서 헤더 배경으로 오고, 제목이 가운데로 온다. 그리고 아래는 글 발행시간과 해당 글의 카테고리가 한 줄로 나오는데, 카테고리명에는 태그에 href 속성이 걸려 있어서 클릭하면 해당 카테고리로 넘어 간다.  🧞‍♀️헤더 커스텀 완성작  이번 포스팅에서 커스텀할 내용은 크게 두 가지이다.헤더 좌측 상단에 아이콘 추가카테고리 이름에 마우스 올리면 색상이 변하는 hover 효과 주기물론 위 캡처처럼 발행일, 카테고리명의 위치를 카테고리명이 먼저 나오게 바꾸어 줄 것이다.카테고리에 hover 효과를 주면서 배경에 박스가 생기게 되어  앞으로 나오는 것이 더 낫기 ..

어제 블로그에 MAC 스타일 코드블럭 테마 적용하려고 했는데COPY 블럭이 안 먹히는 문제 & window에서 코드블록 깨지는 현상으로 원상복구 했다.  내 블로그는 다크모드 막아놨는데 코드블럭만 다크모드로 나오게 해 주고 싶어서그래서 그냥 다크모드로 직접 커스텀 하기로 했음 참고로 나는 heLLO 스킨 사용중 + 다크모드 강제로 해제 + 코드블럭인라인넘버 추가해 놓은 상태에서 시작함 완성작 (코드 카피 버튼은 별도로 포스팅 할 예정) 1. 코드블럭 배경 색상 변경스킨편집 > html편집 > css 편집 > pre code 검색해당 블럭 주석 처리#content .contents_style pre code { padding-left: 1rem; padding-right: 1rem; line-height:..