어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 스타일시트(CSS)

본문 영역

하이라이트 상세보기

작성자: 관리자 추천: 0  조회: 4928

하이라이트


/* 하이라이트 */ .highlight{border:none;padding:4px} .underlined[class*=highlight]{padding:2px;border-bottom-width:1px;border-bottom-style:dashed;background:transparent} .italic[class*=highlight]{padding:2px;font-style:italic;background:transparent}
밑줄 친 하이라이트, 밑줄 친 이탤릭 하이라이트, 이탤릭 하이라이트의 기준은 글자이고, 배경 하이라이트의 기준은 배경입니다.
그리하여 배경 하이라이트는 버튼, 리스트 타이틀, 탭박스 등과 같이 색상으로 사용하고, 밑줄 친 하이라이트, 밑줄 친 이탤릭 하이라이트, 이탤릭 하이라이트f-색상(font 약자)으로 사용함을 유의하자!

밑줄 친 하이라이트


<span class="highlight underlined f-black">검은색 밑줄 친 하이라이트</span>

이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-black로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-light-grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-light-blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-yellow로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-gold로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-olive-green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-orange로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-purple로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-red로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-turquoiseblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-violet로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-deepblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-teal로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-mauve로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-pearl로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-steelblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-coffee로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-coral로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-crimson로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-hotpink로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-indianred로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined f-aqua로 하이라이트를 주었습니다.

[밑줄 친 하이라이트] 예제소스보기


밑줄 친 이탤릭 하이라이트


<span class="highlight underlined italic f-black">검은색 밑줄 친 이탤릭 하이라이트</span>

이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-black로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-light-grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-light-blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-yellow로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-gold로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-olive-green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-orange로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-purple로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-red로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-turquoiseblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-violet로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-deepblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-teal로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-mauve로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-pearl로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-steelblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-coffee로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-coral로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-crimson로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-hotpink로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-indianred로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight underlined italic f-aqua로 하이라이트를 주었습니다.

[밑줄 친 이탤릭 하이라이트] 예제소스보기


이탤릭 하이라이트


<span class="highlight italic f-black">검은색 이탤릭 하이라이트</span>

이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-black로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-light-grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-light-blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-yellow로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-gold로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-olive-green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-orange로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-purple로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-red로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-turquoiseblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-violet로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-deepblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-teal로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-mauve로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-pearl로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-steelblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-coffee로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-coral로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-crimson로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-hotpink로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-indianred로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight italic f-aqua로 하이라이트를 주었습니다.

[이탤릭 하이라이트] 예제소스보기


배경 하이라이트


<span class="highlight black">검은색 배경 하이라이트</span>

이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight black로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight light-grey로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight light-blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight yellow로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight blue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight gold로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight olive-green로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight orange로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight purple로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight red로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight turquoiseblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight violet로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight deepblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight teal로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight mauve로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight pearl로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight steelblue로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight coffee로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight coral로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight crimson로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight hotpink로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight indianred로 하이라이트를 주었습니다.
이 글은 하이라이트를 주기 위한 예제입니다. 현재 highlight aqua로 하이라이트를 주었습니다.

[배경 하이라이트] 예제소스보기


하이라이트 + 색상전환(ani_type="color") 응용


색상전환(ani_type="color")을 사용해 마우스에 반응하는 효과를 주실 수 있습니다.

아래 글들에 마우스를 올려보세요

<span class="highlight underlined f-black" ani_type="color(class:f-pearl)">black ↔ pearl</span>

black ↔ pearl grey ↔ steelblue light-grey ↔ coffee light-blue ↔ coral yellow ↔ crimson blue ↔ hotpink gold ↔ indianred green ↔ aqua olive-green ↔ black orange ↔ grey purple ↔ light-grey red ↔ light-blue turquoiseblue ↔ yellow violet ↔ blue deepblue ↔ gold teal ↔ green mauve ↔ olive-green pearl ↔ orange steelblue ↔ purple coffee ↔ red coral ↔ turquoiseblue crimson ↔ violet hotpink ↔ deepblue indianred ↔ teal aqua ↔ mauve

[밑줄 하이라이트 + 색상전환 응용] 예제소스보기


<span class="highlight underlined italic f-black" ani_type="color(class:f-pearl)">black ↔ pearl</span>

black ↔ pearl grey ↔ steelblue light-grey ↔ coffee light-blue ↔ coral yellow ↔ crimson blue ↔ hotpink gold ↔ indianred green ↔ aqua olive-green ↔ black orange ↔ grey purple ↔ light-grey red ↔ light-blue turquoiseblue ↔ yellow violet ↔ blue deepblue ↔ gold teal ↔ green mauve ↔ olive-green pearl ↔ orange steelblue ↔ purple coffee ↔ red coral ↔ turquoiseblue crimson ↔ violet hotpink ↔ deepblue indianred ↔ teal aqua ↔ mauve

[밑줄 이태릭 하이라이트 + 색상전환 응용] 예제소스보기


<span class="highlight italic f-black" ani_type="color(class:f-pearl)">black ↔ pearl</span>

black ↔ pearl grey ↔ steelblue light-grey ↔ coffee light-blue ↔ coral yellow ↔ crimson blue ↔ hotpink gold ↔ indianred green ↔ aqua olive-green ↔ black orange ↔ grey purple ↔ light-grey red ↔ light-blue turquoiseblue ↔ yellow violet ↔ blue deepblue ↔ gold teal ↔ green mauve ↔ olive-green pearl ↔ orange steelblue ↔ purple coffee ↔ red coral ↔ turquoiseblue crimson ↔ violet hotpink ↔ deepblue indianred ↔ teal aqua ↔ mauve

[이태릭 + 색상전환 응용] 예제소스보기


<span class="highlight black" ani_type="color(class:pearl)">black ↔ pearl</span>

black ↔ pearl grey ↔ steelblue light-grey ↔ coffee light-blue ↔ coral yellow ↔ crimson blue ↔ hotpink gold ↔ indianred green ↔ aqua olive-green ↔ black orange ↔ grey purple ↔ light-grey red ↔ light-blue turquoiseblue ↔ yellow violet ↔ blue deepblue ↔ gold teal ↔ green mauve ↔ olive-green pearl ↔ orange steelblue ↔ purple coffee ↔ red coral ↔ turquoiseblue crimson ↔ violet hotpink ↔ deepblue indianred ↔ teal aqua ↔ mauve

[배경 하이라이트 + 색상전환 응용] 예제소스보기

TOP

등록일:
마지막 수정일:
답변
목록

스타일시트(CSS)

총글수: 12
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
12 없음 레이아웃 구조 추천:0 조회:5863
11 없음 색상표 추천:0 조회:5628
10 없음 버튼 추천:0 조회:9165
9 없음 현재글:하이라이트 추천:0 조회:4928
8 없음 인용구 추천:0 조회:3635
7 없음 테이블(표) 추천:0 조회:3795
6 없음 박스 리스트 추천:0 조회:4210
5 없음 텝박스 추천:0 조회:4432
4 없음 아이콘 추천:0 조회:6792
3 없음 반응형 기타 추천:0 조회:3653
초기화 
스타일시트(CSS) 검색