[블로그 커스텀] 사이드 메뉴에 hover 커스텀 & 백틱으로 인라인 넘버 커스텀

 

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%);
    opacity: 1;
    content: '';
    display: block;
}
#sidebar #category .tt_category ul li:hover::after {
    width: 100%;
} 
/* 사이드바 호버 그라데이션바 커스텀(24.11.11) 끝 */

/* 사이드바 메뉴 글씨 hover 애니메이션 효과(24.11.29) */
#sidebar .sidebar-element a:not(.link_tit):hover {

  --tw-text-opacity: 1;
  animation-duration: 1.5s;
  animation-name: pastelPulse;
  animation-iteration-count: infinite;
  
  /* color: rgb(30 31 33 / var(--tw-text-opacity)) */
}
@keyframes pastelPulse {
  0% { color: #8A63CC; }         /* 선명한 연보라 */
  12.5% { color: #A77DD9; }      /* 조금 더 밝은 연보라 */
  25% { color: #C095E6; }        /* 밝은 연보라 */
  37.5% { color: #4CC8A1; }      /* 선명한 민트 */
  50% { color: #38B591; }        /* 약간 더 어두운 민트 */
  62.5% { color: #2FAE89; }      /* 짙은 민트 */
  75% { color: #85DBC9; }        /* 중간 톤의 민트 */
  87.5% { color: #B1EAE2; }      /* 밝은 민트 */
  100% { color: #8A63CC; }       /* 다시 선명한 연보라 */
}
/* 사이드바 메뉴 글씨 hover 애니메이션 효과(24.11.29) 끝 */

---

2. 인라인 코드블럭 커스텀

노션이나 chatGPT 쓰다 보면 인라인 코드블럭으로 편하게 원하는 단어를 강조할 수 있다. 
인라인 코드블럭은 일반적으로 한 줄 안에서 특정 코드나 명령어를 강조할 때 사용되는 블럭이다.
Markdown 문법에서 흔히 백틱(`)으로 감싸면 인라인 코드블럭이 된다. 
 
[예시]

이것은 `inline code`입니다.

 

chatGPT 인라인 코드블럭

이건 기본 스타일이고 다른 환경에서는 인라인 코드블럭 스타일이 다를 수 있는데, 개인적으로 노션 인라인 코드블럭이 이쁘다. 아래와 같이 주황색 글씨에 회색 배경 완전 취저 ㅎㅎㅎ

노션 인라인 코드블럭

 
하지만 현재 내 블로그는 다크모드 때문에(골치아픔ㅜㅜ)
모든 글씨색은 흰색이나 검은색으로만 바뀌도록 설정 해 놓았다...
다크모드를 위해 이쁜걸 다 포기함.... < 
그래서 기본 블럭으로 설정해 주었음
`어때?` `이쁘지?` `따라하고싶지?` `ㅋㅋㅋ` 
(pc모드에서만 보임)
 
 
스킨편집 -> [html편집]  > `</body>`태그 바로 위쪽에 자바스크립트 코드 추가

<!-- 백틱으로 인라인 코드블럭 커스텀(24.11.12) -->
<script defer>
    window.addEventListener('load', () => {
    let textNodes = document.querySelectorAll("div.tt_article_useless_p_margin.contents_style > *:not(figure):not(pre)");
    textNodes.forEach(node => {
      node.innerHTML = node.innerHTML.replace(/`(.*?)`/g, '<code>$1</code>');
    });
    })
</script>
<!-- 백틱으로 인라인 코드블럭 커스텀(24.11.12) 끝 -->

 
아래는 인라인 코드블럭을 원하는 글씨색이나 배경색으로 커스텀할 수 있는 CSS

/* 인라인 코드 블럭(24.11.12) */
code {
  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;
  background-color: #f0f0f0;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 95%;
  margin: 0px 1px; 
}
/* 인라인 코드 블럭(24.11.12) 끝 */

---

3. 프로필 사진 테두리 커스텀

다크모드 테마에서 이쁘게 보이도록 3px 그라데이션 테두리를 만들어 주었다.
hELLO 스킨에서는 .round-full 클래스 수정하면 됨

 

/* 프로필사진 테두리 커스텀 */
.rounded-full {
  border-radius: 9999px;

  border: 3px solid transparent; /* 투명한 기본 테두리 */
  background: linear-gradient(90deg, #d6a7f1 0%, #85b7f1 50%, #6fdad6 100%);
}