티스토리 소제목 꾸미기 - h1, h2, h3, h4 태그에 css 적용

티스토리 스킨 중에 h1, h2, h3, h4 태그가 밋밋한 경우가 많이 있습니다. 발행된 글을 보면 소제목이라고 붙여 넣었지만 중간에 글자만 조금 클 뿐 소제목으로 와닿지 않는 경우가 많은데요. 이 경우 스킨 편집에서 css만 적용해도 소제목처럼 보이게 만들 수 있습니다.

예를 들어 이런식으로 '애플 3m 썬더볼트 4 프로 케이블' 이라는 소제목과 '썬더볼트 4'라는 소제목이 있습니다. 본문에 비해서 글자가 조금 더 크고 볼드 처리되어 있을 뿐 소제목이라는 느낌이 확 와닿지 않습니다.

티스토리 소제목 꾸미기

티스토리 스킨 편집 기능을 이용해서 소제목을 좀 더 소제목처럼 보이게 만들 수 있습니다.

티스토리 관리 메뉴에서 '스킨편집'을 들어가서 html 편집을 누릅니다. CSS 탭을 찾아들어가서 '.entry-content' 항목을 찾습니다.

/* Entry Content */
.entry-content h1 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}
.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
	border-bottom:2px solid #333333;
	border-left:10px solid #333333;
	padding: 5px 15px;
}
.entry-content h3 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: #000;
	border-bottom:2px solid #333333;
	border-left:10px solid #333333;
	padding: 5px 15px;
}
.entry-content h4 {
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.5;
	color: #000;
	border-bottom:2px solid #333333;
	border-left:10px solid #333333;
	padding: 5px 15px;
}

저는 이렇게 수정을 해놨는데요. border-bottom, border-left 항목을 수정해가면서 스타일을 조금씩 바꿀 수 있습니다. 이 스타일이 적용되면

이런식으로 소제목이 좀 더 소제목처럼 보이게 됩니다. 소제목을 이런식으로 구성해두면 글의 가독성이 조금더 좋아지게 됩니다.