티스토리 꾸미기 | 본문 밑줄에 '형광펜' 효과를 주는 방법

 

밑줄에 형광펜 효과를 주는 방법을 찾고 계셨군요! 티스토리에서 강조하고 싶은 단어나 문장에 형광펜 같은 밑줄 효과를 넣어보세요. 이 방법은 CSS 코드를 사용해 간단히 적용할 수 있답니다. 다만, 이 방법을 적용하면 기존 밑줄은 사용할 수 없다는 점 참고해주세요.

 

1. 티스토리 스킨 편집에서 CSS 코드 추가하기

1. 티스토리 '관리' → 스킨 편집 → HTML 편집 → CSS로 이동하세요.
2. 아래의 CSS 코드를 추가합니다.문 색상밑줄 끝 *

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

 

 

이제 기본적인 형광펜 효과를 줄 수 있는 설정이 완료되었습니다.

2. CSS 'u 코드' 색상 및 두께 변경 방법

밑줄의 색상과 두께를 원하는 대로 변경할 수 있어요.

• 색상 변경: #FFEB3B 부분을 원하는 색상 코드로 변경하세요. 예를 들어, 파란색으로 변경하려면 #0000FF로 바꿔주세요.
• 두께 변경: -10px 부분이 밑줄의 두께를 나타냅니다. -20px으로 변경하면 글자 전체를 덮는 효과를 낼 수 있고, -5px로 하면 얇은 밑줄이 됩니다.

예시:

 

css
코드 복사
u { text-decoration: none; display: inline; box-shadow: inset 0 -10px #FFEB3B; /* 이곳의 색상 코드와 두께를 변경할 수 있어요 */ color: #000000; /*

3. 형광 밑줄 적용법

글을 작성할 때 형광펜 밑줄을 넣고 싶은 부분을 드래그한 후, 상단 메뉴에서 밑줄 버튼을 클릭하세요. 그러면 적용한 CSS 코드에 따라 밑줄이 형광펜처럼 강조된 효과를 줄 수 있습니다.

---

4. 적용 전후 비교

• 적용 전: 일반 밑줄이 적용됩니다.

• 적용 후: 형광펜처럼 밑줄이 강조되어 나타납니다.

이 방법으로 티스토리에서 멋진 형광펜 밑줄 효과를 쉽게 적용할 수 있을 거예요. 색상이나 두께를 자유롭게 조절해, 더 다양한 스타일을 시도해보세요! 😊