Post

[Gitblog] Jekyll 기반 Chirpy 테마 Gitblog 수정 - Title과 Tagline 글자 및 레이아웃 속성 변경

Posted Updated
By 이효준
5 min read
[Gitblog] Jekyll 기반 Chirpy 테마 Gitblog 수정 - Title과 Tagline 글자 및 레이아웃 속성 변경

Title과 Tagline 수정하기

글자 속성과 레이아웃 속성을 수정해보도록 하겠습니다.

우리는 [Gitblog] Jekyll 기반 Chirpy 테마 Gitblog 수정 - _config.yml 수정에서 Title과 Tagline을 입력하여 Sidebar에 표시되는 내용을 수정했습니다. 하지만 _config.yml에서는 글자 및 레이아웃 속성을 수정할 수 없습니다. /_sass/layout/_sidebar.scss에 접근하여 글자 및 레이아웃 속성을 수정해보겠습니다.

SASS는 Syntactically Awesome StyleSheet로 CSS의 확장 언어입니다. 중첩 규칙, 변수, 믹스인, 선택자 상속 등 다양한 기능을 추가합니다. SASS는 커맨드라인 도구나 빌드 시스템용 플러그인을 통해 잘 정리된 표준 CSS로 변환됩니다.
(SASS GitHub README)

/_sass/layout/_sidebar.scss 수정

이 포스트는 Chirpy 테마(ver. 7.3.0) 기준으로 작성했습니다.

디렉토리 /_sass/layout/에서는 Sidebar, Footer, Panel 등의 속성을 바꿀 수 있습니다.

우리는 Title과 Tagline을 수정할 수 있는 _sidebar.scss만 살펴보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

#sidebar {
  @include mx.pl-pr(0);

  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  overflow-y: auto;
  width: v.$sidebar-width;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border-color);

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
	
	/* Hide scrollbar for Chrome, Safari and Opera */
	&::-webkit-scrollbar {...}
	@include bp.lt(bp.get(lg)) {...}
	@include bp.xxxl {...}
	 %sidebar-link-hover {...}
	a {...}
	#avatar {...}
	.profile-wrapper {...}
	.site-title {...}
	.site-subtitle {...}
	ul {...}
	.sidebar-bottom {...}
  /* .sidebar-bottom */
}

위의 코드는 _sidebar.scss 소스 코드에서 주요 요소의 내용을 {...}으로 생략했습니다. 여러 요소들을 확인할 수 있지만 우리가 눈여겨 봐야하는 것은 .site-title, .site-subtitle입니다. 그럼 .site-title, .site-subtitle 코드를 확인해보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  .site-title {
    @extend %clickable-transition;
    @extend %sidebar-link-hover;

    font-family: inherit;
    font-weight: 900;
    font-size: 1.5rem;//1.75rem;
    line-height: 1.2;
    letter-spacing: 0.25px;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    width: fit-content;
    color: var(--site-title-color);
  }

  .site-subtitle {
    font-size: 80%;//95%;
    color: var(--site-subtitle-color);
    margin-top: 0.25rem;
    word-spacing: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

.site-title, .site-subtitle 코드에서 어떤 글자 및 레이아웃 속성들을 바꿀 수 있는 지 보겠습니다. 먼저, 글자 속성들을 살펴보겠습니다.

  • font-family
    글꼴. 기본 값은 inherit, 즉 상속 받은 값입니다.
  • font-weight
    글자의 굵기. 기본 값은 900로 매우 굵은 글씨입니다.
  • font-size
    글자의 크기. 기본 값은 1.75rem이지만 저는 Title이 길어서 1.5rem으로 조정했습니다. 또한, rem이 아니라 %으로도 조정이 가능합니다.
  • line-height
    줄 간격. 기본 값은 1.2입니다.
  • letter-spacing
    글자 사이의 간격. 기본 값은 0.25px입니다.
  • color
    텍스트의 색상. 기본 값은 var(--site-title-color)으로 지정되어 있는데, 이는 /_sass/themes/_dark.scss와 /_sass/themes/_light.scss에서 선언 및 정의한 값입니다.
  • word-spacing
    단어 사이의 간격. 기본 값은 1px입니다.
    • user-select
      블로그 이용자가 텍스트를 선택 가능하도록 할 것인지 설정하는 값입니다. 기본 값은 none으로 지정되어 있는데, 이는 블로그 이용자가 드래그를 하지 못하도록 합니다.
    • webkit-user-select
      Safari, Chrome와 같은 Webkit 기반 브라우저에서 user-select를 지정할 때 사용.
    • moz-user-select
      Mozilla Firefox 브라우저에서 user-select를 지정할 때 사용.
    • ms-user-select
      Microsoft 브라우저에서 user-select를 지정할 때 사용.

그 다음 레이아웃 설정을 살펴보도록 하겠습니다.

  • margin-top
    Title이나 Tagline의 위쪽 바깥 여백을 설정.
  • margin-bottom
    Title이나 Tagline의 아래쪽 바깥 여백을 설정.
  • width
    Title이나 Tagline의 너비를 설정.

마치며

이번 포스트에서는 Title과 Tagline의 글자 및 레이아웃 설정을 수정했습니다. 저는 프론트엔드 전문가가 아님에도 SASS가 그렇게 어렵지 않아서 꽤 수정하기 편했습니다. 여러분들도 이 포스트를 통해서 쉽게 자신만의 블로그를 구축했으면 좋겠습니다.

Gitblog, Jekyll기반 Chirpy 테마 Gitblog 수정
This post is licensed under CC BY 4.0 by the author.