티스토리 북클럽(BookClub) 스킨 편집 - 본문 폰트 디자인 변경

지난번에 했던 본문 제목영역에 이어서 이번엔 본문영역의 수정을 해볼까 합니다.

기본상태로 사용해도 나쁘지 않은 스킨이지만 개인적으로 변경이 필요했고, 필요하신 분들께서 쉽게 수정하실 수 있게 남겨봅니다.

이 포스팅에서 다룰 것

• 포스팅 본문영역 : 제목폰트 및 디자인 변경
• 포스팅 본문영역 : 기본폰트 변경

 

CSS 선택자

• 제목1 = .entry-content h2
• 제목2 = .entry-content h3
• 제목3 = .entry-content h4
• 기본 글꼴 = body

티스토리 북클럽 스킨에서는 h1 태그는 본문의 제목영역에 사용됩니다. 본문 안에서는 h2~h4까지의 태그가 제목1~3으로 선택할 수 있게 되어있습니다. 그 외 본문1~3, 인용1~2가 있지만 우선 가장 많이 사용하는 제목 폰트 디자인만 다뤄보겠습니다.

 

제목1~3 폰트변경 방법

.entry-content h2~h4 까지의 스킨 기본 CSS코드 입니다.

.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
}
.entry-content h3 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: #000;
}
.entry-content h4 {
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.5;
	color: #000;
}

제 경우 제목1인 h2는 이 부분에서는 건드린 것이 없습니다.
폰트 디자인 소스코드는 입맛에 따라 아래에서 선택해서 각각 넣어주면 됩니다.

 

제가 수정한 제목2 (h3태그)

• font-size : 1.3124em; -> 1.35em; 으로 크기를 살짝 키워줬습니다.
• text-align: center; = 추가. 가운데 정렬 합니다.
• border: 5px solid #f9e8b6; = 추가. 텍스트를 감싸는 상하좌우 박스를 노출합니다. 순서대로 두께, 형태, 컬러 입니다.
• padding: 4px 4px 4px 4px; = 추가. 상하좌우 박스 안쪽의 여백을 지정합니다. 순서는 '상-우-하-좌' 입니다.

 

제가 수정한 제목3 (h4태그)

• font-weight: 400; -> bold; 로 변경. 폰트 두께입니다.
• font-size: 1.125em; -> 1.25em; 로 변경. 폰트 크기입니다.
• border-bottom-style: solid; = 추가. 언더바를 노출합니다.
• border-bottom-color: #f9e8b6; = 추가. 언더바 컬러를 설정합니다.
• border-bottom-width: 8px; = 만약 언더바 두께를 설정해주고 싶다면 숫자를 조정해서 넣어주면 됩니다.

선택자Selector를 알고 있다면 어디를 수정해야 디자인이 변경되는지를 알게 되는 것이기 때문에, 무수히 많은 디자인 옵션 코드를 다 나열할 수는 없네요. 원하는 디자인이 별도로 있으시다면, 선택적으로 구글 검색 등을 통해서 디자인 변경하는 코드를 찾아서 적용해보시기 바랍니다.

 

제목태그 수정한 결과

보시기에 어떠실지 모르겠지만 저는 아래와 같이 제목2와 제목3을 사용하고 있습니다. 그러고보니 제목1은 거의 사용하지 않고 있네요. 나중에 운영을 좀 더 하다보면 더 다양하게 변경해서 사용하고 있을지도 모르겠습니다. :)

제목2 수정결과

제목3 수정결과

 

기본 글꼴 변경 방법

스킨 기본 CSS 코드 입니다.

body {
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
	font-size: 1em;
	line-height: 1.25;
	color: #555;
}

포스팅에 기본적으로 쓸 폰트의 글꼴과 컬러 등 속성을 설정하는 영역입니다.

• font-family: 'Nanum Gothic', 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif; = 기본 글꼴 설정. 제 경우 맨 앞에 'Nanum Gothic'을 넣어서 나눔고딕을 기본폰트로 변경했습니다.
• color: #555; -> #000; = 폰트 컬러 설정. 그레이 컬러는 약간 가독성이 떨어지는 듯 해서 블랙 컬러로 변경해주었습니다. 여기서 변경하는 것은 글 에디터에서 작성시 아무런 폰트도 선택하지 않았을 때 변경해주는 옵션입니다. 만약 제목1~3처럼 별도로 형식을 지정해준다거나, 글 에디터에서 폰트를 변경해준다면 그것으로 변경되니 전체적으로 적용되는 것은 아님을 알아두시기 바랍니다.

 

p태그 폰트 변경

스킨 기본 CSS 코드 입니다.

.entry-content p {
	margin-bottom: 32px;
	word-break: break-all;
	font-size: 0.9375em;
	line-height: 2;
	color: #555;
}

위에서 설명했듯이, 기본폰트 설정영역에서 폰트 컬러를 변경해준다고 다 적용되는 것은 아닙니다. 특히나 [관리자 -> 콘텐츠 -> 설정] 에서 "단락 앞뒤에 공백을 사용합니다"로 설정하신 분들이라면 글 작성 시 Enter 칠 때마다 p 태그가 붙습니다. 이 경우 p태그의 속성값에 별도로 폰트 컬러가 들어가 있다면 변경해주어야 합니다. 

color: #555; -> #000; 으로 변경해서 기본 글자색을 검은색으로 변경했습니다.

 

p태그 추가 (모바일 글자 간격)

스킨 기본 CSS 코드 입니다.

	.entry-content p {
		margin-bottom: 22px;
		line-height: 1.625rem;
	}

선택자 이름은 동일한데 훨씬 아랫쪽에 위치하는 위와 같은 코드가 있습니다. 제 경우에만 해당할지 모르겠지만, 모바일에서 포스팅을 볼 때 상하 글자 간격이 너무 좁은 문제가 있어서 해당 부분을 주석처리 했더니 그런 문제가 사라졌습니다.

주석처리는 아래와 같이 해두었으니 참고 바랍니다.

	.entry-content p { 
		/* margin-bottom: 22px;
		line-height: 1.625rem; 모바일에서 글자 상하 간격 너무 좁아지는 문제 때문에 사용안함  */
	}

 

본문 폰트관련 수정방법은 여기서 마치겠습니다. 앞서 언급했듯이 모든 경우의 수를 나열하기에는 내용이 너무 방대해질것 같아서 그러지 못했네요. 혹시 잘 안되시거나 모르시는 부분 있으면 댓글로 질문 주세요. 저도 잘 아는건 아니지만 하다보니 이쪽에 흥미도 생겨서 시간이 될때 찾아서 알려드릴 수 있도록 하겠습니다.