티스토리 블로그 밑줄긋기 색연필 효과내기(형광펜효과)

요즘 티스토리 꾸미는 재미가 쏠쏠한데요

제 티스토리 블로그에서 쓰는 밑줄 긋기 색연필 효과를 소개 해보려고 합니다.

 

밑줄긋기로 색연필 효과내기 소개

1. CSS에 서식 넣기

글 쓸 때마다 코드 넣지 않고 CSS에 서식 넣기만 하면 매우 간단한데요.

일단 메모장파일을 다운로드하여주세요!

글씨 색연필효과.txt

0.00MB

 

2. 바꿔야 하는 코드 확인하기 

메모장에서 전체 복사한 다음 복사한 서식을

CSS창을 킨 후 맨 위에 붙여 넣기 하면 1차는 끝났습니다. 

혹시 제 블로그에 나오고 있는 색상이나 두께가 마음에 드신다면 그대로 두셔도 좋습니다.

css에 서식 붙여넣기

 

1) 색연필 효과내기 색상 바꾸기

빨간색으로 표시한 곳에 마우스 커서를 갖다 대면 색상표가 나옵니다. 거기서 맘에 드는 색상을

선택해 주시면 됩니다. 

 

 

2) [매우 중요] 색연필 효과내기 CSS에 서식 넣는 것의 단점 

CSS에 서식을 넣다 보니 글쓰기를 작성할 때는 기본 밑줄 긋기로 보입니다. 이것은 단점이 아닌데요

이제부터 단점을 소개하겠습니다. 메인 테마색상과, 소제목 색상과 반드시 같은 색감으로

코드 색 지정하셔야 합니다. CSS라 한 가지 색상만 넣는 게 가능합니다 편리함대신 색상은 한 가지로

정해야 하는데요

 

저는 메인 테마랑 모든 소제목의 색감을 핑크로 통일했기 때문에 색감은 분홍색으로 

지정했습니다. 색상코드는 같지만 어떤 기기로 보는지에 따라 다른 색으로 표현되기도 하고

약간씩 다른 색상코드로 표현한 것도 있습니다. 메인 제목과 소제목은 다른 분의 도움을 받아서 

꾸몄기 때문에 공유하지는 않겠지만 워낙 알려져 있는 코드들이어서 검색만 하셔도

다양한 서식을 소장하실 수 있을 겁니다.  

 

 

3. 색연필효과 두께 조절하기

1) 글씨두께 9픽셀과 15픽셀 비교하기

아래 두 개의 사진이 나오는데 9픽셀과 15픽셀이라 차이는 크지 않지만

15픽셀의 경우에는 거의 배경색으로 다 채워지는 것을 볼 수 있습니다.

그래서 15픽셀의 경우 밑줄 긋기를 하는 의미가 없기 때문에

7픽셀-9픽셀 정도로 숫자 조절하시기를 바랍니다. 

여기서 마이너스(-)는 건드리지 마시고 숫자로만 조절해보셔야 합니다.

색연필 효과 9px일때의 굵기

 

 

색연필 효과 15px일때 거의 배경색으로 채워지는 효과

 

 

2) 마지막으로 적용하는 방법 소개

'inset'라는 뜻은 덧붙인 것이라는 뜻이더라고요 여기서 빨간색으로 테두리 친 부분을 확인하시고

숫자 부분만 변경하면서 맘에 드시는 부분을 고르신 후 적용을 꼭 눌러주셔야 합니다!

숫자만 조절하고 적용 누르기!

 

4. 마치며, 색연필 효과 내기 실전

이제 다 적용이 되었습니다. 글쓰기에 들어와서 강조할 부분을

밑줄 긋기하고 나서 미리 보기를 눌러보세요. 원하는 색상과 두께가 지정되셨나요?

그렇다면 색연필 효과 또는 형광펜 효과내기가 완성되었습니다. 

 

 

색연필효과내기가 잘 구현된 글을 보고 싶으시다면 아래의 포스팅을 보는 것을 추천합니다.

 

정사각 6공 다이어리 꾸미기 방법, 카꾸, 썸띵비러브드 쉐이커다이어리

 

 

호보니치테쵸로 다이어리 꾸미기 스티커 배치하는 팁