Tistory(#1) icon들을 CSS로 구현하기

이 Tistory(#1) 아이콘 CSS로 구현하기 포스팅은 Tistory(#1) theme toggle 구현기의 내용을 일부 공유합니다.

계기

theme toggle을 구현하고 나니 기존 tistory에서 제공하는 아이콘이 깨지는 것을 알았습니다. 미관상 좋지 않다고 판단하여 fontawesome을 쓸 수 있지만 간단하여 직접 CSS를 활용하여 구현해보기로 하였습니다.

돋보기 아이콘 🔍

html

<!--reading-glasses-->
<span class="reading-glasses">
  <span class="reading-glasses__circle"></span>
  <span class="reading-glasses__line"></span>
</span>
<!--reading glasses-->

css의 이름은 BEM을 참고하여 정해보았습니다. 모두 <span> 태그를 사용하여 reading-glasses 클래스를 부모 요소로 하여 자식 요소로 돋보기 모양의 원인 reading-glasses__circle, 그리고 돋보기 모양의 선에 해당하는 부분인 reading-glasses__line을 둡니다.

css

.reading-glasses {
  display: flex;
  flex-direction: column;
  width: 16px;
  height: 16px;
  margin: auto;
}

.reading-glasses__circle {
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-radius: 50%;
}

.reading-glasses__line {
  width: 6px;
  border: 1px solid var(--color-a);
  border-radius: 1px;
  transform: translate3d(8px, -1px, 0) rotate(45deg);
  background-color: var(--color-a);
}

.reading-glasses

.reading-glasses {
  display: flex;
  flex-direction: column;
  width: 16px;
  height: 16px;
  margin: auto;

display를 flex로 설정하여 flexible 속성을 부여합니다. 또한 flex-direction을 column으로 설정하여 행이 아닌 열을 기준으로 자식 요소들이 나열되게 합니다.

width, height 즉 너비와 높이 또한 16px로 기존에 tistory #1 스킨에서 설정해준 초기 설정값을 지향합니다.

margin은 auto로 하여 여백을 페이지에서 자동으로 적절하게 설정해주도록 합니다. 즉 돋보기 아이콘이 중앙으로 오게 합니다.

.reading-glasses__circle

.reading-glasses__circle {
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-radius: 50%;
}

돋보기 아이콘의 거울입니다. 부모 요소의 클래스인 reading-glasses의 display: flex이므로 <span> 태그여서 display: inline인 속성은 모두 display: block가 되어 높이가 존재할 수 있게 됩니다.

돋보기의 원 모양을 담당하는 클래스이므로 width와 height 즉 너비와 높이는 모두 8px로 설정해주고 border의 굵기는 2px, solid 즉 직선, themes.css에서 이어지는 var(--color-a) 즉 #8b949e, 57606a의 색을 가지게 됩니다. border-radius 즉 border 테두리 경계를 50% 둥글게 하여 완전한 원이 되게 합니다.

.reading-glasses__line

.reading-glasses__line {
  width: 6px;
  border: 1px solid var(--color-a);
  border-radius: 1px;
  transform: translate3d(8px, -1px, 0) rotate(45deg);
  background-color: var(--color-a);
}

돋보기 아이콘의 손잡이입니다. reading-glasses__line 클래스를 가진 <span> 태그 또한 display: block가 되어 높이를 가질 수 있게 됩니다. 하지만 이 클래스는 높이가 필요가 없는 클래스입니다. 다만 존재함으로서 부모 요소의 display: flex 속성에 의한 위치를 지켜줍니다.

직선 형태의 손잡이이므로 width: 6px 즉 너비를 6px로 설정합니다. border의 굵기는 1px, solid 직선, var(--color-a)의 색상으로 설정합니다.

transform로 위치를 이동시킵니다. translate3d(8px, -1px, 0)으로 설정하여 x축의 오른쪽 방향으로 8px만큼 이동하고, y축으로 위로 1px만큼 이동하여 돋보기의 거울 부분과 연결시킵니다.

돋보기 직선안에 빈 공간이 생기게 되는데 이 부분은 background-color: var(--color-a) 속성을 주어 빈 공간을 직선 색상과 동일하게 해주어 없애줍니다.

이전, 이후 아이콘 〈〉

html

<!-- prev -->
<span class="prev"></span>
<!-- prev -->

<!-- next -->
<span class="next"></span>
<!-- next -->

이전 아이콘은 prev, 다음 아이콘은 next라고 클래스 이름을 지었습니다.

css

.prev {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-top: none;
  border-right: none;
  transform: rotate(45deg);
  margin: 0 0 1px 3px;
}

.next {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-a);
  border-bottom: none;
  border-left: none;
  transform: rotate(45deg);
  margin: 0 3px 1px 0;
}

이전을 의미하는 클래스인 prev입니다. 높이를 가지는 block 속성과 한 줄로 늘어서 보이는 속성을 가지는 inline 합한 display: inline-block 으로 설정하여 다음 번호들과 일렬로 나열되게 합니다.

prev와 같은 경우 border-top, border-left를 none으로 설정하여 상단과 좌측 부분 선을 없앱니다. next의 경우는 반대로 border-bottom, border-right를 none으로 설정하여 하단과 우측 부분 선을 없앱니다. 그리고 transform: rotate(45deg)]로 중심을 기준으로 시계방향으로 45도 회전시킵니다.

마지막으로 margin: 0 3px 1px 0, 우측 여백을 3px, 하단 여백을 1px으로 설정해 기준축과 교차축에 대하여 중앙으로 온 것처럼 보이게끔 합니다.