복붙 해서 쓰는 html 형광펜 코드
티스토리를 운영하다 보니 글을 예쁘게 정리하고 싶은 욕심이 나더라고요. 그래서 알아본 결과 html을 이용해서 글의 디자인을 바꿀 수 있는 방법들을 찾고 있습니다. 사실 제가 보려고 정리하는 것 같습니다. 이걸 다 메모장에 넣어놓자니 정리가 잘 안 되더라고요.
html을 활용한 두 가지를 알려드릴 건데요. 첫 번째는 글자 바탕을 바꿔서 이용하는 전체 형광펜 효과, 그리고 두 번째는 그러데이션 코드를 이용하는 절반 형광펜 효과입니다.
목차
1. 형광펜으로 문장 강조하기
2. 형광펜으로 문장 절반만 강조하기
3. 형광펜 색상과 높이를 바꿔보자
글자를 형광펜으로 강조하기
형광펜을 영어로 하이라이터(highlighter)라고 하는데, 그래서 형광펜 코드 또는 하이라이트 코드라고 합니다.
블로그 글 작성 시 html 모드로 변경하셔서 붙여 넣으셔야지만 코드가 적용되어 나타납니다.
▶︎텍스트 형광펜 밑줄 효과
▶︎여기서 background-color를 변경하면 하이라이트 색깔이 바뀌고, color 부분의 색을 바꾸면 글자색이 바뀝니다.
<span style="background-color:#FF00DD; color:#000000;">형광펜으로 문장 강조하기</span>
형광펜으로 글자 절반만 강조하기
위아래를 모두 채운 형광펜이 답답하게 느껴지신다면 절반만 채운 형광펜으로 강조할 수도 있습니다.
이것은 background가 아닌 linear-gradient를 사용합니다. 위쪽은 투명한 transparent로 설정하고 아래쪽은 내가 원한 색깔로 채우는 개념입니다.
▶︎형광펜으로 문장 절반만 강조하기
<span style=" background: linear-gradient(to top, #FFE400 50%, transparent 50%)">
html 색상표 보기 좋은 홈페이지 링크입니다.
제가 이용하는 사이트는 두 개인데요. 보시고 편하신 걸로 고르셔서 즐겨찾기 해두시고 사용하시면 될 것 같습니다.
요즘은 형광펜을 형광색으로만 하지 않고 부드럽고 눈이 편한 색상으로도 하는 것 같습니다. 그래서 응용 예시로는 다른 색상을 적용해봤습니다.
Html Colors
How to add border color And a little description. and so one
htmlcolors.com
2. https://htmlcolorcodes.com/
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
오늘의 정리
작은 블로그 하나를 꾸미는 것도 정성이 듭니다. 하지만 결국 글을 읽는 분들에게 편의성을 제공하기 위한 것이기 때문에 전체적인 통일성과 너무 과하지 않은 색상 선택이 중요한 것 같습니다. 도움이 되셨다면 글에 좋아요❤️ 부탁드립니다. 😊
댓글