- 티스토리 꾸미기 | 본문 밑줄에 '형광펜' 효과를 주는 방법2024년 08월 12일
- Study.Jobs
- 작성자
- 2024.08.12.:29
728x90반응형밑줄에 형광펜 효과를 주는 방법을 찾고 계셨군요! 티스토리에서 강조하고 싶은 단어나 문장에 형광펜 같은 밑줄 효과를 넣어보세요. 이 방법은 CSS 코드를 사용해 간단히 적용할 수 있답니다. 다만, 이 방법을 적용하면 기존 밑줄은 사용할 수 없다는 점 참고해주세요.
1. 티스토리 스킨 편집에서 CSS 코드 추가하기
- 티스토리 '관리' → 스킨 편집 → HTML 편집 → CSS로 이동하세요.
- 아래의 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. 적용 전후 비교
- 적용 전: 일반 밑줄이 적용됩니다.
- 적용 후: 형광펜처럼 밑줄이 강조되어 나타납니다.
이 방법으로 티스토리에서 멋진 형광펜 밑줄 효과를 쉽게 적용할 수 있을 거예요. 색상이나 두께를 자유롭게 조절해, 더 다양한 스타일을 시도해보세요! 😊
728x90반응형LIST'블로그 > 티스토리' 카테고리의 다른 글
티스토리 몇일 만에 애드센스 승인 받기 (0) 2023.01.02 티스토리 상위 키워드 작성 (0) 2022.12.23 수익형 티스토리 돈버는 글쓰기 방법 (1) 2022.12.22 데이블 연동 좋을까? (0) 2022.12.22 티스토리네이버 검색 노출 방법 : 네이버 서치어드바이저 (0) 2022.12.22 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)