본문 바로가기
티스토리 팁

티스토리 글에 형광펜 효과 넣는 방법

by 당나귀귀 2023. 12. 30.
반응형

 티스토리 블로그 글들을 보면 중요한 부분에 형광펜으로 강조를 해 놓은 글을 볼 수 있습니다. 하지만 글쓰기의 기본 메뉴에는 아무리 찾아봐도 형광펜 효과가 없는데 어떻게 하는 것일까요? 자신의 글을 좀 더 가독성 있게 만들어 주는 형광펜 효과를 넣는 방법을 알려드리겠습니다.

티스토리 형광펜 효과

반응형

1. 형광펜 효과 넣기


 티스토리에 형광펜 효과를 넣기 위해서는 글쓰기의 HTML 모드에서 형광펜 효과 코드를 입력해 주셔야 합니다.

 먼저, 아래와 같이 위쪽 기본메뉴에서 기본모드에서 HTML 모드로 변환시켜 줍니다.

 

 형광펜 효과 코드: <span style="box-shadow: inset 0 -5px #fff612;">형광펜으로 강조하고 싶은 부분</span>

HTML 모드 들어가기

 

 HTML 모드에서 형광펜 코드를 자신이 강조하고 싶은 부분에 넣어주기만 하면 끝입니다.

형광펜 코드

 

다음 다시 기본모드로 돌아온다면 아래와 같이 형광펜이 칠해져 있음을 알 수 있습니다.

형광펜 강조

 

영어로된 코드 입력이 힘드신 분들은 아래의 메모장에 코드가 있으니 그대로 복사 - 붙여넣기 하시면 됩니다.

형광펜효과.txt
0.00MB

 

 

2. 형광펜 효과를 다양하게 변경해보기


 형광펜 효과의 코드는 형광펜 효과에 대한 다양한 명령어 들이 들어있습니다. 우리는 이 명령어들의 변경을 통해 다양한 형광펜들을 활용할 수 있습니다.

 

<span style="box-shadow: inset 0 -5px #fff612;">

 

위의 모드 문구를 해석해 보면 코드의 구조를 좀 더 파악하기 수월합니다.

  • span style : 스타일을 넣겠다는 시작 명령어
  • box-shadow: 스타일 중 형광펜을 지칭하는 이름
  • -5px: 형광펜의 두께입니다. 숫자가 커질수록 두껍고 낮아질 수록 얇습니다.
  • #fff612; : 형광펜의 색상 코드번호입니다. 

우리가 형광펜의 두께나 색깔을 바꾸고 싶다면 뒤의 두 부분만 변경해 주면 됩니다. 

 

▶ 형광펜 두께 변경 예시

HTML 모드

 

형광펜 두께 변경 -15px

형광펜 두께 변경 -10px

형광펜 두께 변경 -5px

형광펜 두께 변경 -2px

 

▶ 형광펜 색깔 변경 예시

색깔 변경은 코드에서 색깔부분에 자신이 원하는 색깔 코드로 변경만 해주면 됩니다. 그럼 색깔 코드는 어떻게 알 수 있느냐....? 아래와 같이 글쓰기에서 글자색 부분에서 원하는 색깔의 코드값을 볼 수 있습니다. 이를 복사해서 HTML에 바꿔넣어주기만 하면 됩니다.

 

색 코드

 

 티스토리에 있는 색 외에 다른 색을 원하신다면 색상 팔레트에서 조회를 해서 자신만의 시그니쳐 형광효과 색을 이용하셔도 좋습니다. 색상 팔레트에서 다양한 색들의 코드를 볼 수 있습니다.

 

색상코드 조회 사이
색상팔레트

 

색상변경 코드

 

형광펜 색상 변경 예시

형광펜 색상 변경 예시

형광펜 색상 변경 예시

형광펜 색상 변경 예시

형광펜 색상 변경 예시

 

 이상으로 티스토리에서 형광펜 효과를 주는 방법에 대해 알아보았습니다. 그때그때 해당 코드를 기억하고 쓰기에 귀찮으시 분들은 따로 메모장에 저장해서 그때그때 붙여넣으시는 방법과 서식에 저장해 두고 사용하시는 방법이 있으니 편하신 방법을 선택해 주시면 됩니다.

 

  티스토리 형광펜 효과 설명 끝~~!!!

 

2023.12.30 - [티스토리 팁] - 티스토리에 구글 번역기 적용하는 법(5분컷!)

 

티스토리에 구글 번역기 적용하는 법(5분컷!)

자신의 블로그에 더 많은 방문자수를 늘리기 위해서는 국내 뿐만 아니라 해외 방문자들도 볼 수 있도록 한다면 좋겠죠? 여러 블로그들을 방문하다보면 블로그를 다양한 언어로 볼 수 있는 번역

pp02.proprietor01.com

 

반응형