콘텐츠로 건너뛰기

티스토리 형광펜 효과 넣는 방법 (HTML, CSS사용)

    티스토리 형광펜 효과 넣는 방법 (HTML, CSS사용)

    가끔 티스토리를 하다보면 텍스트 전체가 아닌 강조하고 싶은 문구에 형광펜 밑줄 친 효과를 넣고 싶은 경험이 있으실겁니다. 이번 포스팅에서는 원하는 곳에 형광펜 효과 넣는 방법을 정리해 보겠습니다.

    티스토리 형광펜 효과 넣는 방법 (HTML, CSS사용)

    형광펜 효과 넣기

    형광펜 효과로 극을 강조하는 방법은 아주 간단합니다.

    1. HTML과 CSS를 사용하기 때문에 글쓰기 모드를 기본모드에서 HTML 모드로 변경해줍니다.
    2. 원하는 곳에 코드를 넣고 원하는 문장으로 변경합니다.

    아래 코드를 그대로 복사해서 사용하실 수 있습니다.

    <span style="box-shadow: inset 0 -5px #FFF612;">형광펜 효과 넣는 방법</span>

    노란색 형광펜 효과가 아닌 다른 효과로 변경하고 싶으면 어떻게 하는지 궁금하실텐데요.

    형광펜 효과 변경하는 방법

    원하는 색상 찾기

    일단 노랑색이 아닌 다른 색으로 바꾸고 싶은데, 어떻게 찾아야하는지 모르실 수 있습니다.

    HTML CSS 색상을 찾는 방법은 두가지가 있습니다.

    우선 간단한 방법은 티스토리 글자 색상을 보고 해당 코드를 복사해서 사용하는 것입니다.

    빨간색을 선택하면 #EE2323 이라는 코드로 바뀌는데, 이게 빨간색 색상코드입니다.

    잘 기억해두고 있으시면 됩니다.

    만얀, 티스토리 글씨 색상에 원하는 색깔이 없을 경우, 더 많은 색상코드를 찾을 수 있는 방법이 있습니다.

    색상 팔레트에서 원하는 색상을 찾는 방법인데요, 아래 링크를 통해서 확인 할 수 있습니다.

    원하는 색상 찾으러 가기

    원하는 색상을 찾았다면 코드를 복사해줘야겠지요. 이번에 빨간색은 아까와 다른 #FF0000 라는 코드가 되었습니다.

    같은 색으로 보여도 세세하게 색상코드가 달라지기 때문에 원하시는 색상으로 찾아가시면 됩니다.

    형광펜 색상 변경

    원하는 색상을 찾았다면 이제 형광펜 색상을 변경해주면 됩니다.

    원하는 색상으로 변경 하면 아래와 같이 다양한 효과를 만들 수 있습니다.

    형광펜 색을 아래 처럼 자신이 원하는 색상으로 바꾸는 방법은 아주 간단합니다.

    빨강색 형광펜 효과

    주황색 형광펜 효과

    노랑색 형광펜 효과

    초록펜 형광펜 효과

    파랑색 형광펜 효과

    보라색 형광펜 효과

    HTML <span> 태그 안에 있는 style 중에 #FF612; 부분을 원하는 색상코드로 바꿔주기만 하면 됩니다.

    여기서 주의하셔야 할 점은 복사한 코드에 세미콜론이 붙어 있지 않아서

    꼭 색상코드 뒤에 세미콜론( ) 을 꼭 붙여주셔야 합니다.

    원하는 색상으로 변경 하셨으면, 기본 모드에서 잘 들어갔는지 확인해보시면 됩니다.

    HTML 모드에서 미리보기로도 확인 가능하니, HTML 에서 색상코드를 바꾸면서 확인하셔도 됩니다.

    형광펜 두께 바꾸기

    형광펜 색상은 바꿨는데, 형광펜 두께를 바꾸고 싶으실 수 있습니다.

    두꼐를 변경하는 방법도 간단하니 그대로 따라하시면 됩니다.

    우선 아래 -5px 을 기억하고 계세요.

    -5px 부분의 숫자를 바꾸면 아래와 같이 원하는 두께로 변경 할 수 있습니다.

    형광펜 효과 두께 -10px

    형광펜 효과 두께 -7px

    형광펜 효과 두께 -5px

    형광펜 효과 두께 -3px

    숫자가 커질 수록 두꺼워지고, 숫자가 낮아질 수록 얇아지는 것을 볼 수 있습니다.

    여기서 숫자 앞에 마이너스(-)를 붙여주셔야. 글자 아래 형광펜 효과가 됩니다.

    형광펜 효과 두께 -3px

    마이너스를 빼고 넣게 되면 형광펜 효과가 글자 위로 되는 것을 확인 할 수 있습니다.

    결론

    이번 포스팅에서는 문장이나 글자를 강조하고 싶을 때 HTML과 CSS를 이용해서 형광펜 효과를 넣는 방법과 형광펜 효과를 꾸미는 방법에 대해서 알아보았습니다. 편하게 사용하시려면 서식 관리에 등록하여 원할 때 불러와 수정하는 방법을 사용하시면 더욱 효과적일 거 같습니다. 

    이 글이 조금이나마 티스토리 블로그를 운영하는데 도움이 되시길 바라겠습니다.

    #티스토리 형광펜 효과 #티스토리 문장 강조 #티스토리 형광펜