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

 
Previous Post VMware 핫키(Hotkey) : 키보드 초점 밖으로 이동 / 전체 화면 모드 전환 / ...[폰트] 원화(Won;₩) 대신 백슬래시(\;Backslash; 백슬래쉬)로 나타내기국어] 반대말 사전/비슷한말 사전, 반의어/유의어/동의어 오프라인 사전 - Korean T...펄/Perl] print 함수, printf 함수의 차이점펄/Perl] 10진수를 16진수(헥사;Hex)로 출력/변환 함수와 방법C언어] 십진수 정수, 16진수 헥사(Hex)로 변환/출력 함수? 방법은?[자바] 자바가상머신/자바컴파일러 버전 도움말 옵션 보기 - java.exe javac.e...C언어] 정수 실수 종류(자료형;데이터형), 최소값 최대값; char int float, ...웹스터 영영 사전] 오프라인 영어 사전 스냅샷 - Merriam-Webster's Coll...맥밀란 영영 사전] 오프라인 영어 사전 스냅샷 Macmillan Dictionary

HTML-CSS] 형광펜 효과, 글자 배경색을 초록색/노란색/분홍색 형광펜처럼 - Highlighters

Monday, September 18, 2006

형광펜을 영어로 하일라이터(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

☞ HTML/CSS/자바스크립트(JavaScript)

☞ 포토샵 (Adobe Photoshop)

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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