현재 제 커스텀 스킨 카테고리에 마우스 오버 시 줄이 생기는 이벤트에 대한 포스팅 요청을 받아 작성합니다.
티스토리 클래스의 구조
우선 카테고리를 커스터마이징 하려면 카테고리의 클래스 구조를 이해해야 합니다.
아래 이미지처럼 상위 카테고리에는 .link-item 클래스가 적용되어 있으며, 하위 카테고리에는 .link-sub-item 클래스가 적용되어 있습니다.
이는 hELLO스킨 기준이며, 다를 수도 있으므로 개발자 도구를 열어 정확한 클래스를 확인해보면 됩니다.
기본 CSS 설정
#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::after는 #sidebar 아래의 #category 아래의 .tt_category 아래의 ul 아래의 li 요소의 ::after 가상 요소를 선택한다는 의미입니다. 지금 보니 조금 더 가시적으로 지정해줄 수도 있었을 것 같지만.. 일단 이렇습니다.
이 가상 요소 ::after 는 li 요소의 뒤에 추가되는 것으로, 마우스 오버 시에 효과를 줄 선을 나타냅니다.
width: 0%;는 가상 요소의 초기 너비를 0%로 설정한다는 의미입니다. 따라서 처음에는 보이지 않습니다.
height: 2px;는 가상 요소의 높이를 2px로 설정합니다. 이것은 가상 요소가 가로로 얇은 선으로 나타나도록 합니다.
position: absolute;는 가상 요소를 절대 위치로 배치하겠다는 것을 의미합니다. 다른 요소와 겹치지 않고 자유롭게 위치할 수 있도록 합니다. 이 코드가 없어도 무리 없이 작동하긴 합니다니다. height 만큼 여백을 줄 것이냐, 아니면 요소 위에 오게 할 것이냐의 문제입니다. 즉! 취향입니다.
transition: width 0.4s;는 가상 요소의 너비 속성에 대한 변화가 일어날 때, 부드러운 애니메이션 효과를 0.4초 동안 적용하겠다는 의미입니다.
background-color 및 background-image 속성은 가상 요소의 배경색 및 배경 이미지를 설정합니다. 여기서는 그라데이션 배경 이미지를 사용하여 선의 색상을 표현하고 있습니다.
opacity: 1;은 투명도 고민의 흔적으로, 가상 요소의 투명도를 1로 설정하여 투명도가 없게 만들도록 설정했습니다.
content: '';는 가상 요소에 내용을 추가하지 않겠다는 것을 의미합니다. 이 경우, 가상 요소는 시각적인 요소로만 사용됩니다.
display: block;은 가상 요소를 블록 요소로 표시하겠다는 의미입니다. 가로로 해당 너비의 전체를 차지하겠다는 뜻입니다.
마우스 오버 시 CSS 설정
#sidebar #category .tt_category ul li:hover::after {
width: 100%;
}위의 코드에 마우스를 올렸을 때의 효과를 추가하기 위해 :hover 가상 클래스를 사용합니다.
width: 100%;은 마우스를 올렸을 때 가상 요소의 너비를 100%로 확장하라는 의미입니다. 이렇게 하면 가상 요소가 가로로 늘어나면서 아까 설정한 height 굵기의 선이 표시됩니다.
카테고리 하위 목록 열었을 때 마우스 오버 효과 유지하기
카테고리가 열려있을 때도 마우스 효과를 유지하고 싶어 다음과 같은 꼼수(?)를 썼습니다.
지금 생각해보면 그냥 JS로 카테고리가 열려있는지 감지하고 열려있는 동안 무조건 width:100% 을 주면 될 것 같은데 당시에는 생각이 미치지 못했던 듯 합니다. (예를 들어 지금 지정되어있는 li아래의 2번째 차일드인 a의 link_item 클래스에 duration-200이 추가되면 width를 100%으로 설정한다. 그렇지 않으면 해당 설정을 없앤다. 같은 방법으로 진행할 것 같습니다.)
그래도 참고가 될까 하여 일단 올려봅니다.
리스트의 첫번째 카테고리에 위와 동일한 스타일을 지정하는 방식입니다.
#sidebar #category .tt_category .sub_category_list li:first-child {
position: relative;
}
#sidebar #category .tt_category .sub_category_list li:first-child::before {
width: 100%;
position: absolute;
height: 2px;
background-color: #80D0C7;
background-image: linear-gradient(90deg, #80D0C7 0%, #7e92eb 100%);
opacity: 1;
content: '';
display: block;
}#sidebar #category .tt_category .sub_category_list li:first-child는 카테고리를 열었을 때 표시되는 하위 카테고리 중 첫 번째 항목을 선택합니다.
즉 그 항목 위에 위의 코드에서 설정한대로의 스타일이 표시되도록 하면 됩니다.
