티스토리블로그 - 형광펜효과 주는 html소스코드

 

형광펜 효과

티스토리 블로그에 열심히 글작성하고 여러가지 유용한 글꾸미기나 스킨의 적용을 고려하고 있을텐데요. 이번시간에는 글본문에 유용하게 사용해볼 수 있는 형광펜효과를 적용하는 소스코드를 알려드리니 내 블로그에도 지금 바로 적용해보세요.

 

 

 

---

 

 

 

소스코드 확인

형광펜효과를 적용하면 아래의 글자처럼 밑줄이 표현됩니다. 굉장히 가독성 높고 예쁘지않나요? 이렇게 글에 밑줄을 그어서 형광펜처럼 보이는 효과의 소스코드를 복사해 내 블로그에 적용할 수 있습니다. 현재 적용되어 있는 코드에는 제목에 글자를 굵게하고 밑줄의 굵기와 색상을 조절할 수 있습니다. 필요없는 부분은 삭제하고 필요한 부분만 복사하여 적용하거나 색상등을 변경하여 사용해볼 수 있습니다.

 

형광펜 예제

제목란 제목란 제목란 제목란

 

위의 예제 소스코드

<h2 style="padding: 2px 5px; font-weight: bold; background: linear-gradient(to top, #bb9df9 30%, transparent 30%); display: inline-block;" data-ke-size="size26"><span style="font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;">제목란</span><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';"></span></h2>
<h2 style="padding: 2px 5px; font-weight: bold; background: linear-gradient(to top, #f3c000 30%, transparent 30%); display: inline-block;" data-ke-size="size26"><span style="font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;">제목란</span><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';"></span></h2>
<h2 style="padding: 2px 5px; font-weight: bold; background: linear-gradient(to top, #99cefa 30%, transparent 30%); display: inline-block;" data-ke-size="size26"><span style="font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;">제목란</span><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';"></span></h2>
<h2 style="padding: 2px 5px; font-weight: bold; background: linear-gradient(to top, #9d9d9d 30%, transparent 30%); display: inline-block;" data-ke-size="size26"><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';">제목란</span><span style="font-family: 'Noto Sans Demilight', 'Noto Sans KR';"></span></h2>

 

 

이 글에도 적용할 수 있어요. 지금 바로 해볼까요?

 

↑ 위의 글에 적용한 소스코드도 확인해 보고 내가 원하는 방법대로 소스코드를 변경해보세요.

<p style="padding: 2px 5px; font-weight: regular; background: linear-gradient(to top, #FFF000 30%, transparent 30%); display: inline-block;" data-ke-size="size26">이 글에도 적용할 수 있어요. 지금 바로 해볼까요?</p>

 

옵션

*형광펜의 색상은 #FFF000 이부분을 원하는 다른색상 코드로 변경하면 됩니다.

*그 다음 30%는 밑줄의 크기를 나타냅니다.

*transparent 30% 는 투명도를 나타냅니다.

 

 

 

이 소스코드를 가지고 원하는 위치에 적절하게 사용한다면 더욱 깔끔하고 멋진 블로그글을 쓰는데 도움이 될 수 있습니다. 코드를 메모장이나 적당한 곳에 복사해서 저장한뒤에 필요할때마다 사용해보세요. 

 

 

 

---

 

 

 

관련글

이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.

 

반응형

 

티스토리 블로그의 폰트를 간단하게 변경하는 방법 (미넴스킨 사용)

 

티스토리 블로그 대표이미지를 본문에서 안보이게 설정하는 방법

 

티스토리 블로그에 PDF파일을 바로 보여주는 간단한 방법

 

 

 

---

 

 

 

참고하세요

· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 다양한 어필리에이트 활동으로 수익금을 지급받을 수 있는 링크가 있습니다.
· 이 글은 티스토리블로그 카테고리에 위치하고 있습니다. 비슷한글을 보시려면 아래를 확인하세요.