반응형 블로그(Fastboot) 본문 제목 타이틀 글씨 및 배경 색상 설정 변경하는 방법

 부트스트랩을 기반으로 한 반응형 웹인 Fastboot 스킨을 사용한 기간도 2년이 넘어갑니다. 블로그를 만든 초기에 관련 자료들을 찾아보다가 일반 형식의 블로그보다 반응형 웹이 앞으로 모바일 시대에 더 유리하다는 말에 바로 적용을 했었습니다. 아주 기초적인 HTML의 코드만 알았던 저에게는 어렵기만 했고 변경하기도 귀찮아져서 지금까지는 계속 기본으로 두고 사용을 했었는데 언젠가 한번 지금 이 뭐든지 블로그를 관리자 모드가 아닌 PC방에서 접속할 일이 생겼었는데 너무 칙칙한 느낌이 들어서 꼭 바꿔야겠다는 생각에 정리도 할 겸 이렇게 포스팅을 하게 되었습니다.

 

 

제목 타이틀의 글씨 배경 색상 변경하는 방법

 

 

 

▲ TISTORY 관리 - HTML/CSS 편집을 클릭해서 들어갑니다. 거기에서 위에서는 포스트의 본문이 시작하는 지점을 가리키는데 이곳에서 포스트 본문의 속성을 변경할 수 있습니다. 찾기 어렵다면 F3이나 Ctrl + F를 눌러서 포스트의 본문이라는 이름으로 검색을 하면 보다 쉽게 찾을 수 있을 것입니다. 이곳에서 아랫부분에 <h3 class="title"> 이 부분이 본문 타이틀을 가리키고 있고 CSS에서 속성을 불러와 적용을 합니다.

 CSS의 타이틀 이름을 찾았으니 위에 HTML 옆에 CSS를 눌러서 타이틀의 속성이 어떻게 적용되어 있는지를 찾아줍니다.

 

 

▲ CSS로 넘어와서 H3.Title a 속성 아래로 타이틀 제목의 설정을 변경할 수 있는데 설명하자면 다음과 같습니다.

h3.title a {
  color: #fff; 글씨 색상
}
h3.title {
  color: #fff; 앞에 아이콘 색상
  line-height:35px; 타이틀 박스의 높이
  font-size: 35px; 글씨 크기
  font-weight: bold; 글씨 굴기(기본값 : nomal, 두껍게 : bold)
  border-radius:3px; 테두리 모서리의 둥근 정도
  padding-top: 3px; 타이틀 박스 위 여백
  padding-bottom: 1.5px; 타이틀 박스 아래 여백
  padding-left: 10px; 타이틀 박스 왼쪽 여백
  margin-bottom: 2px; 타이틀 박스와 제목간의 여백
  margin-top: 5px; 타이틀 박스와 상단 메뉴바간의 여백
  background: #aab2bd; 타이틀 박스 색상

 

 위에 내용을 보면 알겠지만 글씨 색상을 바꾸는 코드는 h3.title a {color:색상}이고 타이틀 박스의 배경 색상을 변경하는 코드는 맨 아래에 있는 Background:색상 코드인데 이 색상을 변경하여 적용해보도록 하겠습니다.

 

 

▲ 저는 블로그의 엠블럼과 색상을 맞춰서 진한 초록색으로 변경을 하였습니다. 변경할 때 글씨 색상만 변경할 경우 위에 글씨만 색상이 적용되고 앞에 ≡ 모양의 아이콘의 색상은 변경되지 않기 때문에 함께 변경해야 합니다.

 제목 타이틀을 바꾸면 위에 상단 메뉴바도 자연스럽게 같은 색상으로 바뀔 줄 알았는데 아니었습니다. 다음 시간에는 위에 상단 메뉴바의 색상 바꾸는 방법으로 돌아오겠습니다.