[Blog] 페이지 배치 따라하기(카테고리별 대표 페이지)

폰트나 스타일링은 우선 배제하고 “카테고리별 대표 페이지의 구조”를 따라 해보자

처음에는 보통 home.html 을 통해서 “최근 포스트” 들이 기본으로 구성한다.

이를 앞 포스팅에서 이미 “Recent Posts” 로 이름을 바꾸는 것은 진행을 했다!

그렇다면 카테고리를 등록했을 때 카테고리별 대표 페이지는 어떻게 커스텀하는 걸까? 커스텀을 아래와 같이 만들고 싶다면?? 따라 해보자!

기존 페이지 모습

따라 할 카테고리별 페이지의 모습

“카테고리별 대표 페이지”의 커스텀 따라 하기

제목 변경 -> 밑줄 제거 순으로 소개

이전 포스팅에서 이어지는 내용이므로 여기선 “제목 변경, 밑줄 제거”만 소개한 것이다.

이전 포스팅 참고

제목 변경

제목 스타일을 보면 “Recent Posts” 스타일과 많이 다르다. 따라서 이를 통일해주기 위해 “Recent Posts” 제목을 제거한다.

• _layouts/home.html 을 보면 “Recent Posts” 를 나타내는 h태그가 있는데 이를 “주석처리”
• 이후 _layouts/archive.html 에서 아래와 같이 코드를 작성하여 “두 제목”을 한 번에 관리하자!
• archive__subtitle__default 를 archive.scss에 추가로 정의하는데 자세한 스타일링은 다음 포스팅을 함께 참고!

밑줄 제거

사진에서 포스팅 된 글들을 보면 제목들이 밑줄이 있는데 이를 제거한다.
보통 archive.html 을 사용하지만, 필자는 따로 수정한 파일을 사용하므로 archive-single2.html 에서 변경

• includes/archive-single2.html 에서 text-decoration="none" 속성을 추가한다.

<a href="" style="text-decoration-line: none;"></a>

또는

_base.scss 에서 설정한 a태그의 스타일에서 text-decoration="none" 속성을 추가한다.

• 이 방식은 a태그 전부를 밑줄 없애 버리므로 그 점은 알아둘것

/* links */

a {
  text-decoration: none;
  &:focus {
    @extend %tab-focus;
  }

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

  &:hover {
    color: $link-color-hover;
    outline: 0;
  }
}