본문 바로가기
티스토리 운영

티스토리 형광색 밑줄 표현하기(형광밑줄)

by *&*^%$ 2023. 8. 16.
반응형

티스토리 형광색 밑줄 표현하기 썸네일

 

티스토리에서 형광색 밑줄이 표현되어 있는 것을 보면 신기하고 내 것도 저렇게 하고 싶다는 생각이 들 때가 있습니다.

이렇게 말이죠

 

그런데 말입니다 생각보다 이런 형광밑줄표현이 코드하나만 삽입해 주면 완료되는 것을 알고 계셨나요?

오늘은 형광밑줄표현을 알려드리겠습니다.

 

 

목차

     

     

     

    반응형

     

    형광색 밑줄 표현하기

    형광밑줄은 가독성은 물론 기존 티스토리에서 제공하는 강조기능보다 더 눈에 띄는 것은 사실입니다.

    요즘 많은 티스토리블로거들이 사용하는 기능 중 하나죠.

     

    형광색 밑줄 적용 CSS

    형광펜 밑줄 적용은 css에서 작업을 합니다.

    한 번의 적용으로 이후 발행되는 모든 포스팅에 사용할 수 있는 장점이 있고 색상도 원하는 색상으로 언제든지 변경할 수 있습니다.

    티스토리에 꾸미기 관련된 작업은 거의 대부분 css에서 하고 있다고 해도 과언이 아닐 정도로 많은 부분에서 css를 찾게 되고 따라서 티스토리에 포스팅을 계속하실 거라면 css와 어느 정도 친해지셔야 할 겁니다.

     

     

     

    형광색 밑줄 만들기

     

    1. 블로그관리 ▶ 꾸미기 내 스킨편집 ▶ HTML 편집 ▶ CSS 클릭하여 CSS 화면으로 입장합니다.

    2. 형광펜 밑줄을 만들기 위해 다음의 코드를 CSS 최하단에 넣어주세요.

    가능하면 최하단에 넣으세요. 이유는 자칫 아무 곳에 넣었다가 프로그램이 깨지는 경우가 발생할 수 있습니다.

    기존 명령들도 보호하는 의미죠.

     

    /* 본문 색상밑줄 */
    u{
    text-decoration:none;
    display:inline;
    box-shadow:inset 0 -10px #baff1a;
    color: #000000;
    }
    /* 본문 색상밑줄 끝 */

    위의 명령문을 삽입하고 반드시 적용버튼을 클릭하세요.

    다들 잘 알지만 이를 잊고 그냥 나와서 안된다고 답답한 상황이 종종 생기는 경우가 있습니다.

     

     

    형광색 밑줄 명령어 내용

     

    형광색 밑줄 명령어의 내용을 숙지하시면 스스로 조정도 가능하실 겁니다. 중요한 부분만 알려드리겠습니다.

     

    box-shadow:inset0-10px#baff1 a;이곳이 변경을 위한 핵심부위라고 할 수 있습니다.

     

    inset는 형광펜의 두께입니다. 이 부분이 크면 클수록 형광펜의 두께는 두꺼워집니다. 20px까지 올리면 글 전체를 형광으로 채울 수 있습니다.

     

    #baff1a는 형광펜의 색깔입니다.

    대표적으로 쓰이는 형관펜색깔은 아래와 같습니다. 맘에 드는 걸로 선택하여 해당 부분수치를 수정해 주시면 됩니다.

     

     

    형광색 밑줄 사용방법

    사용방법은 상단 메뉴 원하는 부분을 활성화한 후 U버튼을 클릭해 주면 됩니다.

    활성화하는 방법은 원하는 부분에 커서를 놓고 클릭한 체로 원하는 부분까지 쭉 그러주시면 됩니다.

    그런데 화면에서는 U버튼을 클릭했음에도 밑줄만 보이고 형광으로 보이지 않을 것입니다.

    이때 티스토리 하단 미리 보기를 클릭하면 형광으로 표현된 것을 확인할 수 있습니다.


    오늘은 형광색 밑줄 표현하는 방법에 대해 알아보았습니다.

    여러분도 형광색 밑줄을 사용하시어 멋진 포스팅 만들어보시기 바랍니다.

     

    반응형