[Blog] 페이지 스타일링(2) - 카테고리 & 태그 모양 수정

필자의 블로그를 보면 게시판 부분에 “카테고리, 태그” 모양이 네모로 감싸져 있는데 이처럼 스타일링을 해보자!

• 아래 모양처럼 바꾸는 것 -> “네모로 감싸져 있는 Blog”

카테고리 스타일링

참고로 태그 스타일링은 생략! -> 태그는 안 보이게 했기 때문

• _includes/archive-single.html 에서 수정
• h2태그로 감싸주며, 각각 margin을 적절히 주고, 날짜가 먼저 나오게 순서도 변경해준다

• 그리고 진하게를 없애주고, 사이즈도 적절히 수정해준다

• % 와 { 를 함께 사용하는 ruby 문법 때문에 사진으로 코드 대체

• _base.scss 에서 방문한 후 색변환을 없애고 싶어서 없애준다.

/* links */

a {
  // &:visited {
  //   color: $link-color-visited;
  // }
}

• _page.scss 에서 카테고리 모양을 마저 스타일링 한다.

.page__taxonomy-item-category {
  display: inside;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 8px;
  padding: 2px 6px;
  text-decoration: none;
  border: 1px solid $background-color;
  border-radius: $border-radius;
  background-color: #d1d2d3;
  font-family: $serif;
  color: $primary-color;

  &:hover {
    text-decoration: none;
    color: mix(#0091b5, $text-color, 40%); /* 커서 댈 때 색깔 */
  }
}