자주 구경하는 SANKOU에서 효과나 모션이 예쁜 곳들을 북마크를 해 놓는다.
그중에 桜十字病院 이 병원 사이트의 호버 효과들이 예뻐서 따라해보려고 북마크해 놨었다.
웹사이트의 장점은 브라우저 개발자도구로 소스코드를 확인할 수 있는 것 아닌가.
호버할 때마다 (분명 SVG인)아이콘 색이 자연스럽게 바꾸길래 어떻게 하고 있나 CSS 코드를 살펴보았는데,
SVG 자체에 fill을 바꾸는 코드는 안보이고 상위 i태그에 color만 바꾸고 있는거다.
오잉? 어떻게 한거지? 싶어서 SVG 태그의 CSS를 살펴보았다.
포인트는 바로 이것!
.svg {
fill: currentColor;
}
fill에 컬러값만 직접 넣어봤지, 이렇게 쓰는건 처음 봐서 찾아봤다.
https://css-tricks.com/cascading-svg-fill-color/
여기를 보면 처음 문단에 다음과 같이 적혀있다.
한 번은 누군가가 SVG 아이콘의 가장 큰 문제는 텍스트 색상과 일치하지 않는다는 것입니다. 사실 그것은 그들에게 매우 큰 문제였습니다. SVG 아이콘의 장점을 보았음에도 불구하고 그들은 아이콘 글꼴을 고수했습니다. 당시에는 생각하지 못했지만, 이에 대한 꽤 쉬운 해결책이 있습니다.
이 아이디어는 텍스트 색상을 SVG 모양으로 전달하기 위해 CSS의currentColor를 사용하는 것입니다.
MDN에서는 currentColor를 이렇게 설명하고 있다.
currentColor 키워드
currentColor키워드는 요소의color속성값을 나타냅니다.
이를 통해 다른 속성이color속성값을 따라가도록 설정할 수 있습니다.
color속성의 값으로currentColor키워드를 사용하면, 값을 상속받은color속성에서 대신 가져옵니다.
color 속성에 currentColor를 쓸 수 있다는걸 처음 알았고, 덕분에 아이콘 이미지를 svg로 더 쉽게 사용할 수 있겠다!
