패스트부트 머리말 색 변경

2018. 1. 2. 17:48 / 서기랑

 패스트부트의 머리말은 단순히 글자 크기만 다른것이 아니라 사용자가 보기좋게 왼쪽에 굵은 선(?)과 아래쪽에 밑줄이 쳐져 있다.

 그래서 잘 사용하기만 한다면 작성하는 글을 깔끔하게 해주고 전체적인 가독성을 높이는데 많은 도움을 준다.

 하지만 패스트 부트의 기본 색상이 회색 계통이다 보니 머리말 부분도 회색으로 되어있는데 이 색을 변경하고 싶다면 css부분의 수정이 필요하다.

패스트부트 머리말 색 변경

 지금까지 이 블로그는 머리말을 사용하지 않았다.

 하지만 최근 글부터 머리말을 사용하기 시작하면서 관련 색 변경 방법도 이제 찾아서 포스팅을 하게 됐는데 css부분의 코드를 변경해야 하지만 방법 자체는 매우 간단하기 때문에 어려움 없이 쉽게 변경이 가능할 것이다.


 1. HTML/CSS편집 클릭.

 머리말 색 변경을 위해서는 css부분의 코드를 편집해야 하니 우선 블로그 관리 페이지에서 HTML/CSS편집을 클릭하도록 하자.

패스트부트 머리말 색 변경


 2. CSS 탭에서 article h1 검색.

 HTML/CSS편집 화면이 나타나면 여기서 CSS탭으로 이동한 뒤 'ctrl + f'를 눌러 'article h1'을 검색하도록 하자.

 (특별하게 수정하거나 추가한 부분이 없다면 검색되는 부분은 하나밖에 없을 것이며 만약 몇 개가 더 검색된다면 스샷을 보고 찾아가도록 하자.)


 3. 색상 코드 수정.

 위치를 잘 잦았다면 이제 머리말 색과 관련된 부분을 원하는 색상 코드 넣어 변경하면 된다.

 여기서 border-bottom의 solid 색상을 변경하면 밑줄 부분의 색상을 변경할 수 있고,

 border-left의 solid 부분의 색상을 변경하면 왼쪽 굵은 선의 색상을 변경할 수 있다.

패스트부트 머리말 색 변경2


 참고로 solid 전에 px 부분은 선과 밑줄의 굵기이니 원하는 수치를 주고 변경할 수 있으며 font-size는 머리말의 기본 글자 크기이니 이 부분 역시 설정을 하여 변경이 가능하다.

 한마디로 이 부분에서 머리말과 관련된 설정은 다 변경이 가능하다.

 (왼쪽과 아래에 선이 있는 형태가 아닌 네모 박스 형태로 변경한다던가 하는 것도 가능할 듯.)