FastBoot스킨 수정 – 폰트추가, 소제목꾸미기, 인용구박스 수정

2014년 8월 3일

FastBoot스킨 수정 – 폰트추가, 소제목 및 인용구 박스 수정

Readiz님의 Fast Boot 스킨은 그냥 써도 멋지지만, 나눔고딕을 기본 서체로 하고 소제목 표시와 인용구 박스등 소소한 것 몇 개를 수정해 내게 맞게 고쳐봤다.

1. 폰트 추가

 

 

 

 

 

지금 이 블로그의 기본 서체는 ‘나눔고딕’이다. 그렇게 하기 위해서는 꾸미기>>HTML/CSS편집 에서 CSS를 살펴본다. 

CSS 맨 처음에 font-family에 빨간 네모로 표시된 것 처럼 “나눔고딕”이라고 넣어주면 된다.

2. 소제목 수정

지금은 소제목 맨 앞에 있는 진회색 직사각형이나 밑줄이 가늘지만, 원래는 각각 10px, 2px로 상당히 두꺼웠다.

CSS에서 ‘article’이라고 표시된 부분을 찾는다. 7,800번째 줄 쯤 거의 아래쪽에 있다.

 

소제목을 수정하기 위해서는 ‘h1, h2, h3, h4…’로 된 부분을 찾는다. 

눈치껏 살펴보면, border-bottom은 밑줄, border-left는 소제목 앞의 회색 직사각형임을 알 수 있다.

이것을 각각 마음에 드는 두께로 고쳐준다. 이 블로그는 4, 1로 바꿨다.

 

 

3. 인용구 박스 수정

지금은 인용구 박스(이렇게 부르는 것이 맞는 것인지는 모르겠다. 하지만 어떻게 불러야 할지 몰라 임의로 지어 불러본다)가 파란색과 연한 하늘색으로 되어 있지만, 원래는 겨자색+회색으로 내 취향과는 맞지 않았다. 

 

위 그림에서 보는 바와 같이 ‘article blockquote’라고 쓰여있는 부분으로 가서 배경이 되는 background-color와 박스 왼쪽 앞부분의 강조색을 나타내는 border-left를 찾아 마음에 드는 색과 두께로 바꾼다. 

 

색상은 HTML 컬러 코드에서 마음에 드는 색을 찾아 코드를 복사해 붙이면 된다. 아래는 소개한 페이지에서 색상을 고를 수 있는 컬러 차트와 컬러 픽커다. 

 

 

 

이렇게 바꾸고 난 뒤의 인용구 박스 모습은 다음과 같다.

 

 

<도움받은 글>

– <hx>태그로 소제목 만들기

– 블로그 포스팅 소제목 꾸미는 방법