티스토리 블로그 소제목 꾸미기 내 마음대로 색 변경 방법

티스토리 블로그들을 방문하다 보면, 다양하게 자신만의 방식으로 소제목을 꾸며놓은 것을 볼 수 있습니다.

 

여기저기 공개되어 있는 소제목 꾸미기 서식을 적용하다 보면, 내 입맛에 맞게 꾸며보고 싶은 욕구가 올라오기 마련입니다.

 

기본적인 소제목 꾸미기 방법과, 꾸미기 색상을 변경하는 방법에 대하여 알아보겠습니다. 소제목 꾸미기에 관심이 있으시다면 잠깐만 보시고 정보 얻으시길 바랍니다.

 

소제목 꾸미기 서식

 

소제목을 꾸미는 방법은 글을 작성하면서 수동으로 소제목을 꾸미는 방식과, 스킨편집의 CSS에서 고정 적용하는 2가지 방법이 있습니다.

 

저는 스킨편집의 CSS를 사용하는 방식을 사용하고 있습니다. 따라서 수동으로 소제목에 서식을 적용하는 분이시라면 색상 변경 정도만 확인해 주시길 바랍니다.

 

 

저는 #1스킨과 북클럽 스킨을 사용합니다. 두 가지 스킨에서는 작동하는 것을 확인했지만, 나머지 스킨에서는 작동 안 할 수 있습니다. 참고 부탁드립니다.

 

 

 

 

.tt_article_useless_p_margin h2 {
text-align: left;
border-left: #6af946 10px solid;
border-bottom: 1px solid #4de938;
padding: 8px 0 8px 8px;
margin-bottom: 3px;
}

 

위 내용은 제가 다른 블로그에서 소제목 꾸미기로 사용하는 서식입니다. 간단하게 설명드리자면, 위 사진처럼 왼쪽과 아래쪽에 연두색 테두리를 만들어줍니다.

 

여기서 선의 색상을 바꾸시려면 "#우측에 있는 6자리 숫자/문자"를 변경해주시면 됩니다. 위 서식의 예를 보자면, 3번째 줄에 #6af946, 4번째 줄에 #4de938이라고 되어있습니다.

 

 이 부분만 수정해 주시면, 소제목 꾸미기 색상을 마음대로 바꿀 수 있게됩니다.

 

색상 변경 방법

 

블로그 스킨편집의 CSS에 들어가면, 위 사진처럼 지금 소제목 꾸미기에 적용되고 있는 색상이 작은 네모로 나오고 있습니다.

 

제가 색상코드라고 말씀드린 #뒤에다가 마우스 포인터를 가지고 가면, 위 사진처럼 파렛트가 생성됩니다. 마우스 클릭이 아니고, 그냥 포인터만 올려놓으면 됩니다.

 

 

위 사진을 보시면 현재 색상이 파렛트의 어떤 위치에 있는지 동그라미로 표시를 하고 있습니다.

 

해당 동그라미를 움직이거나 원하는 색상을 클릭하는 것으로 자동으로 색상 선택이 가능합니다. 어렵게 색상 코드를 외울 필요가 없습니다.

 

 

동그라미 포인트를 마우스로 클릭하고, 대충 검은색 정도로 보이는 곳으로 움직여봤습니다.

 

파렛트 상단의 우측에는 기존색, 좌측에는 지금 선택한 색이 나오기 때문에 색상이 어떻게 변경되는지도 비교가 가능합니다.

 

원하는 위치에 동그라미를 위치시키면 자동으로 해당 코드로 색상이 입력됩니다.

 

 

 

이번에는 붉은색으로도 바꿔봤습니다. 가장 우측에 있는 색상바가 붉은색 부분에 위치한 것이 보입니다.

 

그리고 색상을 조금 연하게 해 주기 위해서 우측에서 두 번째 부분을 낮춰서 투명도 조절도 해봤습니다.

 

이런 식으로 자신이 원하는 색상을 찾아서 간단하게 바꿔 줄 수 있습니다.

 

 

한번 원하는 색상을 찾았다면, 색상 코드를 복사했다가 나머지 색상코드 부분에 전부 붙여 넣기 해주면 됩니다.

 

이렇게 색상을 변경하고 CSS화면 우측 상단에 있는 '적용'을 눌러주면 자연스럽게 색상 변경이 완료됩니다.

---

이상 소제목 꾸미기의 색상을 변경하는 방법에 대하여 알아봤습니다.

 

알고 보면 정말 간단한데, 모르고 보면 너무나도 어려운 부분입니다.

 

스킨편집에서 '적용'만 누르지 않으면 변경되는 것은 없으니, 한번 직접 색상을 바꿔봐 보시는 것을 추천드립니다.

 

-같이 보면 좋은 글-

글 분석 도구 클래리티(Clarity)로 방문자 행동 분석하기