[CSS] 무작정 따라하기—0. 티스토리에서 소제목 꾸미기

오늘은 티스토리에 게시된 글의 가독성을 높이기 위해 글의 일부분을 강조하는 방법을 따라해보려고 합니다. 티스토리에는 HTML 편집기가 지원되기 때문에 사용자가 직접 내 블로그를 자유자재로 꾸밀 수 있는 있습니다. 

HTML 편집기로 변경 방법

 

1. 점선 테두리

제목 주변에 점선 테두리를 추가하여 글을 강조할 수 있습니다. 점선의 굵기와 색, 점선과 글자간의 간격을 저정할 수 있으며, 제목뿐만 아니라 여러 곳에서 활용할 수 있습니다. 

>  Code

<h4 data-ke-size="size20"><span style="border: 3px dashed #C6C6C6; padding: 0.6em;">제목에 점선 테두리를 추가할 수 있습니다.</span></h4>

> Result

제목에 점선 테두리를 추가할 수 있습니다.

 

2. 포스트잇

마치 포스트잇 플래그를 붙인 느낌을 줄 수 있는 효과입니다. 색상과 굵기가 모두 변경이 가능합니다. 

>  Code

<h4 data-ke-size="size20"><span style="background: #CCCCFF; border-left: 0.5em solid #688ff4; padding: 0.5em; font-family: 'Noto Serif KR';">포스트잇 느낌을 줄 수 있습니다.</span></h4>

> Result

포스트잇 느낌을 줄 수 있습니다.

 

3. 그라데이션 

색을 설정하여 그라데이션 효과를 줄 수 있습니다. 선택할 수 있는 색상 제한은 따로 정해져 있지 않기 때문에 원하는 만큼 입력하면 되고, 그라데이션의 방향 또한 설정할 수 있습니다.

>  Code

<h4 style="background: linear-gradient(to right, #DFFF00, #9FE2BF, #40E0D0, #6495ED, #CCCCFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent;" data-ke-size="size20"><span style="font-family: 'Noto Serif KR';">원색이 아닌 그라데이션 효과를 줄 수 있습니다.</span></h4>

> Result

원색이 아닌 그라데이션 효과를 줄 수 있습니다.

---

 

색상 선정이 어렵다면 아래의 주소를 참고하세요

⬇⬇⬇⬇⬇⬇

https://htmlcolorcodes.com/

HTML Color Codes