티스토리 블로그 코드 수정하기 - 2. 카테고리 transition 적용하기

처음 블로그를 열었을 때 다양한 플러그인과 광고 티스토리만의 어떤 서버 연결 등 처리가 느려서 그런지 css의 적용이 느렸다. 그리고 hover 효과를 주었었는데 깜박깜박 거리는게 사용자 경험이 좋지 않다고 판단이 되어서 transition을 부드럽게 주려고 마음먹었다.

---

#gnb ul li a {
	position: relative;
	display: block;
	text-decoration: none;
	padding: 22px 4px 24px;
	color: #777;
	font-weight: bold;
}
#gnb ul li a:hover,
#gnb ul li.current a {
	color: #FEB802; // 색 바꿈
}
#gnb ul li.current a:after,
#gnb ul li a:hover:after,
#gnb ul li a:focus:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #FEB802; // 색 바꿈
}

보아하니 전에 color와 background-color를 바꿔준 것을 찾았다. :after 이라는 표현방식은 찾아보니 오래되었다는 것을 알게 되었고 ::after로 써야하는 것을 알게됐다. 그리고 transition이 먹지 않는다는 것을 알게 되었는데 stackoverflow에서 찾아보니 방법이 있었다.

 

https://stackoverflow.com/questions/65700968/css-transition-on-hoverafter

CSS Transition on hover:after

여기서 설명하는 방식은 a::after 에는 투명도를 준 후, a:hover::after 에 투명도를 없애면서 transition을 주는 방식이다.

 

* 하다가 한줄 주석이 안먹혀서 왜 의도대로 안되는거지? 하면서 엄청 헤맸네요..ㅎㅎ

/* 상단 카테고리 텍스트 트렌지션 적용 */
#gnb ul li a {
	position: relative;
	display: block;
	text-decoration: none;
	padding: 22px 4px 24px;
	color: #777;
	font-weight: bold;
	transition: all .1s ease-in;
}
/* 상단 카테고리 텍스트 컬러 변경 */
#gnb ul li a:hover,
#gnb ul li.current a {
	color: #FEB802; // 색 바꿈
}
/* 상단 카테고리 밑줄 생성. 트렌지션 적용 */
#gnb ul li.current a::after,
#gnb ul li a::after,
#gnb ul li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	transition: all .1s ease-in;
}
/* 현재 상단 카테고리 밑줄 활성화 */
#gnb ul li.current a::after {
	background-color: #FEB802; // 색 바꿈
}
/* 상단 카테고리 밑줄 컬러 변경 */
#gnb ul li a:hover::after,
#gnb ul li a:focus::after {
  background-color: #FEB802; // 색 바꿈
}
/*--------------------------------------------------*/

적용 후 모습

- 훨씬 편안한 느낌이 든다.

- transition-duration을 0.2s 이상 느리게 주면 티스토리 블로그가 다운 받는 양이 많은지 hover 효과가 렉이 먹는 모습이 보였다. 그래서 0.1s로 주었더니 적당했다.

- 다음에는 밑줄이 움직이는 것에 대해서 좀 더 찾아보고 바꿀 생각이다.

- ::after 태그에 대해서 알게 되었다.