CSS를 사용한 티스토리 소제목 테스트(Odyssey 오디세이 스킨)

이것은 제목1입니다

이것은 제목2입니다

이것은 제목3입니다

 

티스토리의 CSS 기능을 이용하면 위와 같이 소제목을 눈에 띄게 꾸밀 수 있습니다.

 

저는 오디세이(Odyssey) 스킨을 사용하고 있는데, 본인이 기본 스킨으로 어떤 스킨을 사용하느냐에 따라서 CSS 코드가 조금씩 다를 수 있음을 유의해 주세요.

대략적인 맥락은 같으니, 적당히 이해했으면 정확한 코드는 본인과 같은 스킨을 사용하는 블로그를 검색해서 참고하길 바랍니다.

 

티스토리의 CSS탭에서 ctrl+F를 눌러 h2를 검색하여 .article-view h2{ } 부분을 찾아주세요.

(다시 말하지만, 오디세이 스킨 기준 코드입니다)

 

제 CSS코드 일부 발췌하였습니다.

 

만들 수 있는 소제목 중에서 글자 크기가 제일 큰 제목1이 h1에 해당하는지, h2에 해당하는지에 유의해주세요.

저같은 경우는 제목1이 h2, 제목2는 h3, 제목3은 h4에 대응하여 이에 맞게 적용했습니다.

위에 적힌것을 참고로해서 아래 코드를 복사한 후 자신이 필요한 부분에 붙여넣기 해주세요.

주석으로 설명도 달아놨으니, 본인의 취향대로 값들을 수정해주시면 됩니다.

아래 코드는 저 처럼 왼쪽과 아래쪽에 구분선이 생기게 하는 코드입니다.

 

font-weight: 600; /*소제목 굵기 조절*/
padding: 3px 5px 3px 10px; /*여백조정 (순서는 위, 오른쪽, 아래, 왼쪽)*/
border-left: #98DDCA 12px solid;  /* 좌측 선 두께 12px */
border-bottom: #98DDCA 2px solid; /* 하단 선 두께 2px */

 

#뭐라뭐라 붙어있는 부분은 경계선의 색상을 뜻하는건데요, 네이버 검색창에 "RGB 색상표"를 검색하여 원하는 색상으로 바꿔주시면 됩니다. 

저는 여러 색상을 사용하고 싶어서 아래 사이트에서 적당히 골랐습니다.

 

색감 출처 https://colorhunt.co/

Color Palettes for Designers and Artists - Color Hunt