[티스토리 블로그 꾸미기] 푸터 배경색/글자색 변경하기

이번 글에서는 블로그 푸터(바닥글) 배경색/글자색 변경하는 방법에 소개해드리겠습니다. 헤더 부분과 원리는 동일합니다. 코드의 위치만 조금 다르니 이 부분만 확인해서 변경하면 됩니다.

티스토리 '북클럽' 스킨을 기준으로 진행합니다.

 

스킨 편집 들어가기

관리자 페이지에 왼쪽 메뉴에서 '꾸미기' 탭 안에 '스킨 편집'버튼을 클릭하면 새로운 창이 열립니다.

새로운 창이 열리면, 우측 상단에 있는 'html 편집' 버튼을 클릭합니다.

꾸미기 탭 안에 스킨 편집을 누른 후 새로운 창이 열리면 오른쪽 상단에 html 편집을 클릭합니다.

 

CSS 코드 바꾸기

우측 상단에 있는 'HTML | CSS | 파일업로드' 중에 'CSS'를 클릭합니다.

html 편집 창에서 우측 상단에 HTML ❘ CSS ❘ 파일업로드 중에 CSS를 클릭합니다.

 

배경색 변경하기

 

푸터(바닥글) 색상이 본문 배경색과 같은 것을 확인할 수 있습니다.

푸터의 배경색이 본문 배경색과 같아 구분이 되지 않는 모습입니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#footer'를 입력합니다. 보통 431번째 줄에 있습니다.

#footer

CSS 파일에서 검색창에 #footer를 검색합니다.

아래의 코드를 복사하여 '#footer'에 넣습니다.

#footer {
  padding: 38px 0 28px;
  border-top: 1px solid #eee;
  background-color: #04beb8; /* 헤더와 동일한 색 */
}

코드를 복사하여 #footer에 배경색 코드를 헤더와 같은 색상 코드를 넣고 저장합니다.

헤더와 동일한 색으로 진행해도 좋고, 원하는 색상을 하셔도 됩니다.

원하는 색상을 찾고 싶으시면 여기에서 색상을 찾아보세요.

변경 후 미리보기로 확인한 다음에 저장합니다.

미리보기를 눌러 배경색이 적용 되었는지를 확인합니다.

글자색 변경하기

 

푸터(바닥글) 글자색이 검정색인걸 확인할 수 있습니다.

푸터의 글자색이 검정색인 것을 확인할 수 있습니다.

CSS 파일 내에서 아무 곳이나 클릭한 후, Ctrl+F를 눌러 검색창에 '#footer p'를 입력합니다. 보통 443번째 줄에 있습니다.

#footer p

CSS 파일에서 글자색 코드인 color가 검정색으로 되어 있는 것을 확인할 수 있습니다.

아래의 코드를 복사하여 '#footer p'에 넣습니다.

 

#footer p {
  margin-bottom: 10px;
  font-size: 0.875em;
  color: #fff; /* 헤더 글자색과 동일한 색 */
}

글자색 코드를 흰색 코드인 #fff로 바꿔줍니다.

변경 후 미리보기로 확인한 다음에 저장합니다.

미리보기를 눌러 글자색이 변경 되었는지를 확인합니다.

 

다음 글 예고

다음 글에서는 카테고리 리스트 타입 변경하는 방법에 대해서 소개해드리겠습니다.