형광펜 효과, 글자 배경색을 초록색/노란색/분홍색 형광펜처럼 - Highlighters > 기술자료

• 목록

형광펜을 영어로 하일라이터(Highlighter) 라고 하는데요, 웹페이지에 형광펜 효과를 내는 CSS입니다.


형광펜 예제 코드

아파트에는 <span style="background-color:#00FEFE">인적이 없었지만</span> 어떤 아파트의 입구 앞에서 대여섯 명의 주부들이 모여 한 곳을 <span style="background-color:#00FF00">바라보고</span> 있었다. 나도 고개를 들어 보니, 아파트 바로 맞은편의 언덕에서 불이 나고 있었다. 70도에 가까운 가파른 경사면의 높은 곳에서 <span style="background-color:yellow">연기가 피어오르고 있었다.</span> 사람이 가까스로 올라갈 수 있을까 말까 한, 경사의 언덕에서 <span style="background-color:#FF00FF">모닥불 크기의 불이 나고</span> 있었다. 그것을 보는 주부들은 발을 동동 구르고 있었다.


브라우저 출력 결과

아파트에는 인적이 없었지만 어떤 아파트의 입구 앞에서 대여섯 명의 주부들이 모여 한 곳을 바라보고 있었다. 나도 고개를 들어 보니, 아파트 바로 맞은편의 언덕에서 불이 나고 있었다. 70도에 가까운 가파른 경사면의 높은 곳에서 연기가 피어오르고 있었다. 사람이 가까스로 올라갈 수 있을까 말까 한, 경사의 언덕에서 모닥불 크기의 불이 나고 있었다. 그것을 보는 주부들은 발을 동동 구르고 있었다.


형광펜 코드

청록색: <span style="background-color:#00FEFE">글자...</span>
녹색  : <span style="background-color:#00FF00">글자...</span>
노란색: <span style="background-color:yellow">글자...</span>
분홍색: <span style="background-color:#FF00FF">글자...</span>
span 태그뿐 아니라 div 등의 다른 태그에서도 작동합니다.


background-color:#00FEFE
이 바탕색 코드가 핵심입니다.


관련자료
http://mwultong.blogspot.com/2006/09/html-css-highlighters.html