형광펜 밑줄 효과 HTML, CSS
홈페이지나 블로그에서 글을 쓸 때 강조하고 싶은 부분이 있을 때 보통은 글자를 굵게 하거나 밑줄을 긋는 방법으로 간단하게 강조를 합니다. 물론 큰 제목 같은 경우에는 멋지게 따로 꾸미지만 글 내용 중간중간에 강조하고 싶은 내용은 특별히 신경을 쓰지 않는 분들이 대부분이죠. 이제 블로그 글 내용 중간에 강조 효과를 주고 싶다면 형광펜 HTML과 CSS 사용 방법을 활용해 보세요. 형광펜을 영어로 하이라이터(Highlighter)라고 하는데 형광펜 코드, 혹은 하이라이터 코드라고 합니다.
1. 텍스트에 형광펜 효과 주기
텍스트에 형광펜 효과를 주는 방법은 간단합니다. 글 내용 중간에 배경색을 집어 넣어주기만 하면 되는데 여기서 중요한 것은 형광펜 색상 코드입니다. 블로그 글 작성모드 중 HTML모드에서 코드를 입력해야 적용이 됩니다.
▼ 형광펜 HTML 코드
이것은 <span style="background-color:#FF00DD; color:#fff;">텍스트 형광펜 밑줄 효과</span> 입니다.코드는 위와 같고 실제 적용해 보면 아래와 같습니다.
----------------------------------------------
▶ 이것은 텍스트 형광펜 밑줄 효과 입니다.
----------------------------------------------
보라색으로 된 형광펜 효과가 적용되었습니다. 글자 색까지 바꿔 주었는데 글자 색은 그대로 사용하셔도 됩니다.
- 배경 색은 background-color 코드만 바꿔주시면 됩니다.
- 글자 색은 color 코드를 바꿔 주시면 됩니다. (검은색으로 그냥 사용하실 경우 color 코드 자체를 지워주시면 됩니다.)
이것을 자주 사용하고 싶다면 CSS로 저장한 후 적용시키면 됩니다.
▼ 형광펜 CSS 코드
.HL {background-color:#FF00DD; color:#fff;}위 코드를 CSS에 삽입해 주세요. 그리고 글에 적용할 때마다 아래의 html 코드를 사용해서 글을 입력하시면 됩니다. (클래스 HL은 Highlighter의 약자입니다. 편하신대로 변경해서 사용시면 됩니다.)
▼ 형광펜 CSS 코드 삽입 후 HTML 코드
이것은 <span class="HL">텍스트 형광펜 밑줄 효과</span> 입니다.CSS로 만들어놓으면 class를 이용해 조금더 수월하게 형광펜을 적용시키실 수 있습니다.
2. 텍스트 절반만 형광펜 효과 주기
텍스트 글씨의 절반 높이만 형광펜 효과를 주는 방법입니다. 글씨 높이 전체를 덮는 형광펜 효과가 답답해 보일 때 절반만 주어서 색다른 느낌으로 강조하실 수 있습니다.
이것은 <span style=" background: linear-gradient(to top, #FFE400 50%, transparent 50%)">텍스트 형광펜 절반 밑줄 효과</span> 입니다.위 코드를 실제로 적용하면 아래와 같습니다.
----------------------------------------------
▶ 이것은 텍스트 형광펜 절반 밑줄 효과 입니다.
----------------------------------------------
위와 같이 절반만 형광펜 효과를 주실 수 있습니다.
코드 중 #FFE400 코드만 다른 색상코드로 바꾸시면 됩니다. 절반 코드이기 때문에 텍스트 색상은 그대로 검으색으로 가는 것이 좋습니다.
▼ 절반 형광펜 CSS 코드
.half_HL {background: linear-gradient(to top, #FFE400 50%, transparent 50%);}▼ 절반 형광펜 HTML 코드
이것은 <span class="half_HL">텍스트 형광펜 밑줄 효과</span> 입니다.일반 형광펜 코드와 CSS만 다르고 HTML 코드는 클래스 이름만 바꿔서 사용하시면 됩니다. 형광펜 CSS와 절반 형광펜 CSS를 모두 등록해 놓으신 후 HTML에서 선택해서 사용하시면 됩니다.
3. 형광펜 색상 코드
주로 사용되는 형광펜 색상 코드는 아래와 같습니다.
▼ 글씨가 검은색일 때 사용되는 형광펜 색상 코드
- 청록색: :#00FEFE
- 녹색 : #00FF00
- 노란색: #FFFF8F
- 분홍색: #FF00FF
▼ 글씨가 흰색일 때 사용되는 형광펜 색상 코드
댓글