스크롤바 및 기타 속성 [scrollbar, 기타 ] 적용 style 태그

작성자 정보

  • 작성자 관리자
  • 작성일

컨텐츠 정보

본문


▷ style [모양, 형태] 태그

⊙ 태그요소

① <style> ... </style>

style : html에 사용되는 태그들은 다양한 속성을 가지고 있다. 하지만 그 속성만으로 동적인 화면을 구성하기에는 부족한 면이 있다.
기본적인 속성에 부가적으로 style을 설정하여 다양한 부가 속성을 주어 장식하게 하는 태그이다.

⊙ 스크롤바 속성을 적용한 style

⊙ 스크롤바 속성 Control

⊙ 기타 속성을 적용한 style

속성

용도
사용법

사용예

float left
right

<img src="c.gif" style="float: left">콩나물대제국

c.jpg콩나물대제국

<img src="c.gif" style="float: right">콩나물대제국

c.jpg콩나물대제국
zoom number
퍼센트(%)

<div style="zoom:50%"><img src="http://duduji.iptime.org/duduji/html_tag/c.jpg"></div>
<div style="zoom:100%"><img src="http://duduji.iptime.org/duduji/html_tag/c.jpg"></div>
<div style="zoom:150%"><img src="http://duduji.iptime.org/duduji/html_tag/c.jpg"></div>

c.jpg
c.jpg
c.jpg
cursor

help
hand
crosshair
default
move
wait
e-resize
w-resize
s-resize
n-resize
se-resize
sw-resize
ne-resize
nw-resize
progress
row-resize
col-resize
all-scroll
pointer
cursor: no-drop


<a href="#" style="cursor: help">cursor: help</a>
<a href="#" style="cursor: hand">cursor: hand</a>
<a href="#" style="cursor: crosshair">cursor: crosshair</a>
<a href="#" style="cursor: default">cursor: default</a>
<a href="#" style="cursor: move">cursor: move</a>
<a href="#" style="cursor: wait">cursor: wait</a>
<a href="#" style="cursor: e-resize">cursor: e-resize</a>
<a href="#" style="cursor: w-resize">cursor: w-resize</a>
<a href="#" style="cursor: s-resize">cursor: s-resize</a>
<a href="#" style="cursor: n-resize">cursor: n-resize</a>
<a href="#" style="cursor: se-resize">cursor: se-resize</a>
<a href="#" style="cursor: sw-resize">cursor: sw-resize</a>
<a href="#" style="cursor: ne-resize">cursor: ne-resize</a>
<a href="#" style="cursor: nw-resize">cursor: nw-resize</a>
<a href="#" style="cursor: progress">cursor: progress</a>
<a href="#" style="cursor: row-resize">cursor: row-resize</a>
<a href="#" style="cursor: col-resize">cursor: col-resize</a>
<a href="#" style="cursor: all-scroll">cursor: all-scroll</a>
<a href="#" style="cursor: pointer">cursor: pointer</a>
<a href="#" style="cursor: no-drop">cursor: no-drop</a>
cursor: help
cursor: hand
cursor: crosshair
cursor: default
cursor: move
cursor: wait
cursor: e-resize
cursor: w-resize
cursor: s-resize
cursor: n-resize
cursor: se-resize
cursor: sw-resize
cursor: ne-resize
cursor: nw-resize
cursor: progress
cursor: row-resize
cursor: col-resize
cursor: all-scroll
cursor: pointer
cursor: no-drop
first-letter

first-letter


콩나물대제국
콩나물대제국
first-line

first-line

<style type="text/css">
div.f_line:first-line {color: blue; font-size: 16}
</style>
<div class=f_line>콩나물대제국

다음줄이죠?</div>

콩나물대제국
다음줄이죠?
link link(링크 있음)

<style type="text/css">
A.lvah:link {color: blue}
A.lvah:visited {color: red;}
A.lvah:active {color: green;}
A.lvah:hover {font: italic}
</style>
<a class=lvah href="#">링크된 곳의 상태</a>

링크된 곳의 상태
visited visited(방문했었음)
active active(마우스 클릭)
hover hover(마우스 오버)

관련자료

댓글 0
등록된 댓글이 없습니다.
알림 0