티스토리 제목1 디자인 적용하기 (feat. CSS border-bottom,

 

티스토리 본문 글 제목1 영역
디자인 입히기. 

 

블로그 글 작성시 SEO 도 중요하지만, 글의 가독성을 높이는 것도 매우 중요합니다. 티스토리는 HTML, CSS 편집이 가능한 글 작성 툴이므로 가독성을 높일 수 있는 타이틀 CSS 적용을 해보도록 하겠습니다.

왼쪽 이미지는 티스토리 블로그에 아무런 설정도 하지 않았을 때, 기본 제목 폰트를 적용한 이미지입니다. 이를 우측 이미지 처럼 제목을 명확히 구분할 수 있는 디자인을 입혀보도록 하겠습니다.

 

 

본문 제목1 영역 강조 표시 CSS 

 

본문 제목1 영역 강조를 위해 스킨편집을 해보겠습니다.

 

① 티스토리 관리 > 꾸미기 > 스킨편집 > Html 편집 > CSS 선택 

② Ctrl+F 찾기로 entry-content h2 검색 

③ 아래 코드블럭의 내용으로 대체하여 CSS 적용하기.  

.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
	padding: 2px 5px;
	border-bottom: 3px solid rgb(1 10 118 / 85%);
	border-left: 13px solid rgb(1 10 118 / 85%)
}

 

위와 같이  padding, border-bottom, border-left CSS 조건을 추가하면, 제목 영역의 왼쪽과 아래 영역에 테두리를 추가할 수 있으며 테두리의 색상과 두께를 지정할 수 있습니다.

저는 좌측과 아래 영역에만 테두리를 추가하였는데, 개인 취향에 맞추어 border-top, border-right 조건을 추가하여 제목영역 전체를 사각형으로 테두리를 씌울 수도 있습니다. border-bottom만 사용한다면 밑줄만 그어지도록 디자인을 적용할 수도 있습니다. 

 

좌측 변경전, 우측 변경후 CSS 스크립트입니다. 글자 색상과 폰트만 지정되었던 entry-content h2 태그에, 패딩과 테두리 조건이 추가된 것을 확인할 수 있습니다. 

 

 

CSS 적용 결과 

css 적용 결과, 아래와 같이 제목1 폰트를 적용 시, entry-content h2 CSS 가 자동적용되어 제목이 강조되어 표현되는 것을 확인할 수 있습니다. 스킨편집을 통해 h2 태그 전체를 변경한 것이므로, 기존에 작성했던 글 모두 디자인이 적용되는 것을 알 수 있습니다.