Fastboot v1.6.2 본문타이틀 속성 변경하기

이번에는 Fastboot v1.6.2 티스토리 스킨의 본문 타이틀 속성 중

다음 사항을 변경해보도록 하겠습니다.

 

ο 본문 타이틀 앞의 아이콘 변경

ο 본문 타이틀 글씨 색상 변경

ο 본문 타이틀 배경 색상 변경

ο 본문 타이틀 테두리 생성

 

본문 타이틀 앞에 사용된 원본스킨의 기존 아이콘은

메뉴, 목록의 이미지가 강해서 연필 아이콘으로 변경하고 싶어요.

그리고 배경색을 바꾸고 테두리를 설정하여 변화를 줄거에요.  

 

 

 

 

 

#1. 아이콘 바꾸기

 

html에서 아이콘이 사용된 태그를 찾아야합니다.

Ctrl+F를 눌러 <포스트의 본문 시작> 으로 검색하세요.

전 <h3 class="title"> 로 검색해서 찾았었지만, 찾고 보니 주석이 달려있네요.

 

 

<i class="fa fa-bars"></i> 가 타이틀 앞에 사용된 아이콘 태그입니다. 따옴표안에 다른 아이콘 태그를 넣어주시면 돼요.

연필은 fa fa-pencil 입니다. 그 외에 다양한 아이콘 태그는 아래 텍스트로 첨부하였으니 참고하세요.

 

icon 태그.txt

 

 

 

#2. 본문 타이틀 디자인 변경하기

 

이번에는 CSS로 가서 <h3.title>을 검색합니다.

해당 태그 속성을 원하는 데로 변경해주고~

 

 

 

 

맨아래에 CSS border속성을 추가합니다.

기본적인 형태는 {border: 선두께 선종류 색상;} 입니다.

dotted(짧은 점선) 대신 soild(실선), dashed(긴 점선)으로 속성을 정할 수 있어요.

 

 

h3.title 속성에서는 이 외에도

테두리 박스 높이, 글꼴 크기, 글꼴 굵기, 테두리 모서리 굴곡 정도, 여백 등을 취향대로 조정할 수 있고

추가로 다른 태그 속성을 적용할 수도 있습니다.

 

 

 

변경사항 적용 후 본문 타이틀 화면입니다.

 

 

한결 제 마음에 들어요.

글씨체만 바꾸면 좋겠는데...

h3.title a 태그에 font-family 속성을 추가하여 글씨체를 바꿀 수도 있지만 이건 그냥 나중에 한번에 적용하도록 하겠습니다.