[BlogDev] 사이드바 hover 스타일 변경

설계 목적

카테고리가 세분화되고 대분류 아래 중분류, 그리고 소분류와 그 세부 항목까지 세분화되다 보니까 처음에 중분류까지 1차 카테고리만 내렸을 때에는 나름 효과적이었던 hover 스타일이 이제는 너무 정신이 없어지는 것을 느끼게 되었다. 그래서 정신 없는 스타일은 조금 줄이면서도 효과적인 hover 스타일로 바꿔보기로 했다.

기존 방식

현재 사이드바 카테고리의 모습이다. 어제 오늘 카테고리를 세분화 시켰던 TIL 카테고리에 대해 살펴보자. 대분류는 Private, 중분류는 TIL, 소분류는 연도별이고, 극소분류는 월별이다.

중분류 details는 두꺼운 primary color border를 왼쪽에 두었고, 소분류 details, 즉 연도별로 details를 내렸을 때에는 opacity를 0.2로 둔 글자와 같은 색으로 border를 왼쪽에 얇게 두었다.

그런데 2021년 07월 카테고리를 보면 hover를 해놓은 상태이다. 왼쪽에 border로 primary color로 강조를 두었고, 간격을 두기 위해 padding을 이용했기 때문에 글자가 오른쪽으로 조금 이동하는 모습이다. 이런 부분이 조금 정신 없게 느껴졌다. 이는 비단 월별이 아니라 중분류 카테고리부터 모든 ul태그와 summary 태그 모두 해당한다. 이를 대대적으로 바꿀 것이다.

작업 계획

text-shadow를 이용할 것이다. color는 안 정했지만 shadow의 중심을 x 0, y 0으로 중심에 두고 번짐을 크게 두어 hover시 주변이 번쩍이는 분위기를 주려고 한다. padding의 변화가 없기 때문에 글자가 이동하지 않아서 정신 없는 상황은 많이 개선이 될 것이다!

작업 과정

기존 hover시 border, padding 제거

기존 scss 속성을 제거해보자. 사이드바 네비게이션에 해당하는 scss 파일은 📂_sass📂minimal-mistakes📃_navigation.scss 파일이다.

.nav__sub2-title {
  font-size: 0.9em;
  margin: 0.2em 0;

  &:hover {
    border-left: 0.2em solid $primary-color;
    padding-left: 0.3em;
  }

  &:active {
    color: white;
  }
}

중분류 카테고리의 scss 속성을 담당하는 코드이다. details 태그가 아닌 중분류 카테고리의 속성이다. 다른 코드들도 hover은 비슷한 조건으로 되어 있으므로 대표로 조작해보겠다.

우선 이후에 hover 시 text-decoration은 있어야 하므로, hover 자체를 제거하지는 않을 것이다. border-left와 padding-left에 해당하는 속성을 제거해준다.

추가로 :active에 border-color도 제거해주는데, 이는 기존 hover시 border-left가 primary-color로 있는 상태에서 링크를 클릭하면 흰색으로 잠시 변하는 효과를 위해서 넣어둔 코드였다. 이제는 border가 없으니 불필요하므로 제거해준다.

.nav__sub2-title {
  font-size: 0.9em;
  margin: 0.2em 0;

  &:hover {
  }

  &:active {
    color: white;
  }
}

새로운 코드를 맞이할 준비가 되었다.

:hover 코드에 text-shadow 속성 추가

본격적으로 데코를 할 차례이다. text-shadow: 0 0 0.5em white; 코드를 hover에 넣어준다.

0 0은 각각 x, y축으로 치우져진 정도를 의미하는데 중심점을 중앙에 둘 것이기 때문에 0 0으로 두면 된다.

0.5em은 blur, 즉 퍼지는 정도를 의미하는데 이 값이 클수록 주변에 더 많이 영롱해진다고 보면 된다. 0.5em인 이유는 특별히 없다. 그냥 개발자 도구로 여러 번 건드려 보다가 가장 적당한 크기인 것으로 생각되어 설정한 것이다.

white는 shadow의 색을 의미한다. white는 흰색 그림자로 따지면 네온과 같은 효과를 줄 것이다.

최종적으로 코드는 다음과 같아진다.

.nav__sub2-title {
  font-size: 0.9em;
  margin: 0.2em 0;

  &:hover {
    text-shadow: 0 0 0.5em white;
  }

  &:active {
    color: white;
  }
}

다른 코드들도 이렇게 border-left와 padding-left를 두는 모든 hover 효과에 대해 text-shadow로 효과를 변경해줄 것이다.

결과

2021년 8월의 TIL을 보면 hover를 한 상태의 효과이다. 기대했던대로 네온사인처럼 영롱하다. 정신 없는 것보다 너무 마음에 든다. 성공!