[티스토리꾸미기] 밑줄 서식, 누가 그거 쓰니? 간편하게 사용하자. 2탄

1탄을 보고 오신 분이 대부분이라고 생각한다. 1탄을 알고 계시다면 그렇게 어려운 내용은 아닐 것이다. 앞서 1탄에 설명했던 "배경색"을 활용해, 다른 배경색으로 꾸미는 방법에 대해 1탄에서 소개했다면, 2탄에서는 배경색을 지정했는데 형광펜 효과가 나타나는 효과에 대해 만들어보고자 한다.

 

꼭 숙지해두어야 할 것

 

1. 제목에 1탄이라고 쓰진 않았지만, 해당 내용이 1탄이다. 가장 기초버전이라고 할 수 있으니 참고해 주시길 바란다.

[티스토리꾸미기] 밑줄 서식, 누가 그거 쓰니? 간편하게 사용하자.

 

2. 본 글은 서식 활용 CSS 활용에 지친 어떤 사람 하나가 간편하게 떼우고자 시작한 프로젝트… 까지는 아니고 내가 사용해 보니 괜찮은 거 같아서 공유하는 바이다.

 

BEFORE & AFTER

Before

기본모드와 변경 전에 보이는 색상 이미지 그대로

After 예시

Ver.1

Ver.2

배경색을 형광펜으로 바꾸는 방법

1. 색상 정하기

이번엔 이 색상을 사용해보려고 한다.

아무래도 사용을 잘 안 하게 되는 색상 중 하나다. 주로 진한 색으로 사용하려면 글자 색상이 검정색인 것보다는 하얀색인가 잘 두드러져 보이는데 두 번 설정하기는 귀찮다.

 

이 경우도 CSS로 활용해서 간편 해결은 가능하다. 1탄에 있는 코드에 아래 내용만 집어 넣으면 가능하다.

 

color:white;

 

물론 가능하지만, 그렇게 흔한 효과를 주는 것보단 다르게 효과를 주는 게 낫지 않나 싶다. 물론 사용하실 분은 1탄 코드에 저 코드만 살짝 끼워 넣어서 사용하셔도 괜찮다.

 

2. 색상 코드 뽑아내기

기본모드를 html로 바꿔서(잘 이해가 되지 않는다면 위에 1탄을 보시면 이해된다. 일일이 캡처하기 귀찮아서 그런 건 안 비밀) 해당 색상 코드를 뽑아내주면 된다.

 

 

여기에서 기억해둘 것. span과 background-color: #ee2323;

3. 형광펜 코드 찾기

앞서 적어두었던 형광펜 코드를 찾아주면 된다. 여러분이 사용하는 형광펜 코드여도 되고 네이버, 다음, 구글에서 찾은 형광펜 코드여도 된다.

 

1탄에서 이미 코드를 다운로드하신 분들은, 1탄에 있던 코드에서 {여기 안에 내용}만 수정해주면 된다.

※ {} ←얘네는 건들지도 말고 내버려두고, 안의 내용만 수정해 주면 된다.

 

이 설명이 어려우신 분이 계실까봐 코드와 함께 예시를 함께 넣어두었으니, 이해가 어려우신 분은 아래 내용을 다운로드하여 사용하시면 됩니다.

기본모드서식활용하기2탄.txt

0.00MB

 

결과물

 

분명히 저 빨간색을 체크했음에도 내가 쓴 글을 볼 때, 저렇게 형광펜 효과가 보이게 된다. 그렇다면 저기 위에 있는 색상을 다 활용해 보는 것도 방법이지 않겠는가?

 

단점

단점도 고백하는 나란 인간. 단점은 기본모드에서는 그 색 그대로 보이기 마련이다.

 

따라서 여러분이 하실 때

한 줄은 형광펜, 한줄은 background 그대로인 색으로 한다는 식으로 하거나

아니면 비슷한 색상과 매치를 시키는 것을 추천드린다.

 

※ 그리고 글을 다 쓴 다음 색상을 입히고 미리보기로 본 후에 완료 누르기

 

나는 현재 한 줄만 사용하고 있다. 1탄에서 언급한 줄만 사용하고 그 줄과 비슷한 색상으로 만들었다. 예쁜 색상 고르는 재미도 쏠쏠하다.

 

선택은 자유다.

1. <u>, <b>, <s> <i> 등을 간단하게 사용해서 4개의 색을 사용한다.

2. u에 class를 입혀서 사용한다. (아래 내용을 통해 확인하면 이해하기 쉬움)

[정보] 티스토리 모바일웹 본문 꾸미기 | 밑줄 형광펜 효과 주기(고급)

3. 아니면 이것도 저것도 귀찮아진 나처럼, background 색상 33개의 버전을 만들어 사용할지

티스토리 관련 글 모아보기

[티스토리꾸미기] ChatGPT가 알려준 클립보드 복사 버튼 만드는 방법

목차 꾸미기 1탄

[정보] 티스토리 카테고리명 쪼개기(?)

[정보] 티스토리 보면 스킨 예쁜 거 많던데…. 1탄

티스토리모바일웹과 관련된 글 모아보기

[정보] 티스토리 모바일웹 본문 꾸미기 | 밑줄 형광펜 효과주기

[정보] 티스토리 모바일웹 본문 꾸미기 1탄 | 폰트 바꾸기

GRAVITY SKIN 8 스킨 수정 일지 모음

[스킨] GRAVITY SKIN 8 | 작전명: IDOL KRYSTAL

[스킨] GRAVITY SKIN 8 | 스킬바 활용

[스킨] GRAVITY SKIN 8 | 내가 수정하는 스킨 수정 일지 #1

 

방금 읽은 이 글이 도움이 되었다면 공감, 댓글을 남겨주세요. :)