[BlogDev] 태그 그림자 효과 부여

설계 목적

포스트 태그가 너무 2차원적인 느낌이 들어서 그림자효과를 부여해 조금의 입체감을 주고자 한다.

📃_page.scss

음 이제 디렉토리 구조를 알고 나니까 archive에 태그를 따로 지정했어야 했는데 이제야 클래스명이 잘못되었음을 알게 되었다. 하지만 archive든 page든 post든 태그의 디자인을 달리할 생각은 지금으로선 없어서 그냥 쓰려고 한다.

아무튼 📁_sass📁minimal-mistakes📃_page.scss 를 살펴보면 .page__taxonomy-item-tag 의 scss 속성에 아래의 코드를 추가해보자.

page__taxonomy-item-tag

box-shadow: 0em 0.2em 0.3em 0.2em darken($background-color, 5%);

앞에서부터 수평 그림자, 수직 그림자, Blur, Spread, color이다. Blur는 가장자리를 부드럽게 하는 번지는 정도이고, Spread는 그림자의 중앙점을 기준으로 어느정도 가장자리의 크기를 키운다.

색상은 배경색을 5%정도 어둡게 하여 설정하였다. (사실 20%로 두고 한 번 렌더링 했는데 너무 짙게 나와서 재설정) 왜냐하면 언젠가 색상에 대한 변경이 있을 수도 있어서 되도록 앞으로 짜는 코드에 대해서는 하드코딩이 아닌, 📃_variables.scss나 📃_dark.scss 파일의 변수를 가공해 사용하는 식으로 하려고 하기 때문이다.

shadow 설정 꿀팁

크롬 개발자 도구로 해당 태그에 shadow 속성을 입력하고 대충 조금 쓰고 enter를 누르면

이렇게 레이어가 겹쳐진 모습이나 네모칸을 볼 수 있다. 이걸 누르면

shadow의 상세에 대한 설정이나, 색상을 연속된 스펙트럼에서 확인할 수 있고, 해시값까지 알려주기 때문에 유용하다. 이는 shadow의 종류인 box-shadow와 text-shadow에서 모두 활용할 수 있다.

결과

적절하게 잘 반영되었다.