티스토리 글 밑줄 형광펜 효과 생성

@거대토끼성장기

 

티스토리 포스팅 글에 특별한 형광펜 효과를 주고 싶으신가요? 그렇다면 제가 간단하게 알려드리겠습니다! 천천히 잘 따라오세요~

 

전/후

전/후

 

저는 밑줄과 취소선을 형광펜으로 커스터마이즈 해봤습니다.

 

 

밑줄 형광펜 효과를 적용할 속성 찾는 방법

 

일단, 밑줄을 칠 문장 혹은 단어의 속성을 찾아야합니다.

 

저는 예시로 '비공개' 이 문장에 형광펜을 칠하고자 합니다.

 

 

1️⃣ 개발자 도구 열어서 문구 찾기

 

1️⃣-1️⃣ 개발자 도구 여는 방법

윈도우: F12 / 맥: command(⌘) + option(⌥) + i 

 

1️⃣-2️⃣ 문장 찾기

ctrl + f 또는 command(⌘) + f 로 '비공개' 찾기

 

혹은, 위 사진 동그라미 친 부분(마우스)을 클릭하고 문장 클릭하면 개발자 도구에 뜹니다.

 

개발자 도구에 뜨는 걸 보면, 

<p>
   <u>비공개</u>
   "글이지롱"
</p>
...
<p>
   <s>비공개</s>
   "글이지롱"
</p>

 

이렇게 문장이 존재하는 걸 볼 수 있습니다.

 

<p> ... </p> : 본문 단락의 모든 속성이 <p> 태그 안에 존재

<u> ... </u> : 밑줄 모든 속성이 <u> 태그 안에 존재

<s> ... </s> : 취소선 모든 속성이 <s> 태그 안에 존재

 

즉, 각 본문 단락(p) 안에 밑줄(u)과 취소선(s)이 있음을 볼 수 있습니다.

 

우리는 u 태그, s 태그를 꾸며보도록 하겠습니다.

 

⚠️ 개발자 도구를 보면 아시겠지만, <u>, <s> 등 각 문장의 스타일마다 다르기 때문에 본인이 형광펜 치고 싶은 단락/문장/단어마다 확인해주세요!

 

 

스킨 편집하는 방법

 

아래 포스팅을 보시고 스킨 편집하는 곳까지 와주세요~!

 

티스토리 스킨 변경 방법

 

 

형광펜 속성 생성하기

 

1️⃣ css 맨 위나 맨 아래에 코드 삽입

/* 본문 밑줄 형광펜 효과 */
u {
    text-decoration:none;
    border-radius: 30px;
    font-weight: normal;
    color: #000;
    background: linear-gradient(to top, #색상 50%, transparent 50%);
}

/* 본문 취소선 형광펜 효과 */
s {
    text-decoration:none;
    border-radius: 30px;
    font-weight: normal;
    color: #000;
    background: linear-gradient(to top, #색상 50%, transparent 50%);
}

 

여기서 색상만 원하시는대로 설정하면 됩니다. 그리고 %를 조절해서 투명도 조절 가능합니다.

예시

 

2️⃣ 코드 삽입 후 확인 버튼 클릭

 

 

활용 예시

 

밑줄, 취소선 뿐만 아니라 문단 모양에 따라서 스타일을 변경할 수도 있습니다.

 

예시

 

코드

 

 

---

 

이렇게하면 끄읕~!