mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Monday, September 18, 2006

HTML-CSS] 형광펜 효과, 글자 배경색을 초록색/노란색/분홍색 형광펜처럼 - 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
이 바탕색 코드가 핵심입니다.



다른 색깔 고르기


#00FEFE 이런 것은 16진수로 표현된 RGB색상입니다.

▶▶ [HTML/CSS] 스크롤바(Scrollbar) 색상 변경하기 (IE 전용) <- 이 게시물의 아래쪽에, 포토샵으로 CSS용 색깔 코드 선택 이라는 곳이 있습니다. 그곳에 "포토샵 컬러 픽커"로 색을 선택하는 방법이 있습니다. 포토샵에서 #00FEFE 이렇게 16진수로 표현된 색을 카피해서 사용하시면 됩니다.




▶▶ HTML-CSS] 글자 테두리, 점선/색깔 테두리 태그와 스타일 속성; Word Border




tag: html
HTML | CSS | 자바스크립트 JavaScript
tag: photoshop
포토샵 | Adobe Photoshop

0 Comments:

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top