배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양 12장. 배경 그림, 목록, 하이퍼링크 관련 스타일 배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양

배경 그림, 목록, 하이퍼링크 관련 스타일 – 배경 그림 속성 설명 값 background-color 배경색 yellow, transparent background-image 배경 이미지 지정 url(파일명) background-repeat 배경 이미지 정렬 repeat, repeat-x, repeat-y, no-repeat background-position 배경 이미지 위치 80%, 90px, left, center, right, top, center, bottom background-positionX 가로축 고정 위치 left, center, right background-positionY 세로축 고정 위치 top, center, bottom background-attachment 이미지 고정 fixed, scroll background 배경 이미지 한 번에 지정 url(파일명), repeat-x, repeat-y, no-repeat, left, center, right, top, center, bottom, fixed, scroll

배경 그림, 목록, 하이퍼링크 관련 스타일 – 목록 속성 설명 값 list-style-type 글머리표 종류 None, disc, circle, square, lower-roman, upper-roman, decimal, lower-alpha, upper-alpha 등.. list-style-image 글머리표 그림 url(파일명) list-style-position 글머리표의 위치 inside, outside

배경 그림, 목록, 하이퍼링크 관련 스타일 – 하이퍼링크 속성 구분 설명 a 태그명 하이퍼링크에 대한 모든 설정 a:link 가상클래스 한번도 방문하지 않은 하이퍼링크 속성 a:visited 방문한 적이 있는 하이퍼링크 속성 a:active 하이퍼링크를 클릭하는 순간의 속성 a:hover 마우스가 하이퍼링크 위로 올라왔을 때

배경 그림, 목록, 하이퍼링크 관련 스타일 – 배경 그림 배경 이미지를 가로로만 반복한다. body{background-image: url(bg.gif); background-repeat: repeat-x } 배경 이미지를 한 번만 표시한다. body{background-image: url(bg.gif); background-repeat: no-repeat } 배경 이미지 위치 설정하기 body{background-image:url(bg.gif); background-repeat:no-repeat; background-position:80% 90%} 배경 이미지 스크롤되지 않게하기 body{background-image:url(log.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:center center;}

하이퍼링크를 설정해도 밑줄이 표시되지 않고 마우스를 올릴 때만 밑줄이 표시되도록 한다. 배경 그림, 목록, 하이퍼링크 관련 스타일–하이퍼링크 설정 하이퍼링크를 설정해도 밑줄이 표시되지 않고 마우스를 올릴 때만 밑줄이 표시되도록 한다. <style type="text/css"> <!-- a{ color:red; text-decoration:none; } a:hover { text-decoration: underline;} --> </style>

배경 그림, 목록, 하이퍼링크 관련 스타일 – 하이퍼링크 속성 여러 개 설정하기 underline 클래스는 밑줄이 나타나게 하고 bgcolor 클래스는 배경색이 바뀌게 한다. <style type="text/css"> <!— a{ color:blue; text-decoration:none; } a.underline:hover{text-decoration:underline; } a.bgcolor:hover{background-color: skyblue; } --> </style> ~~ <a href="#" class=underline>네이버</a><br> <a href="#" class=bgcolor>엠파스</a><br>

<style type="text/css"> <!-- --> </style> 배경 그림, 목록, 하이퍼링크 관련 스타일 – 글머리표 대신 그림으로 대체하는 방법 <style type="text/css"> <!-- ul{list-style-image:url(bullet.gif)} --> </style>

배경 그림, 목록, 하이퍼링크 관련 스타일 – 마우스 커서 ‘가자’에 마우스를 올리면 마우스 포인터가 상하 양방향 화살표 모양이 되는 예 <a href=# style=”cursor: n-resize”>가자</a> cursor의 종류 속성 값 결과 crosshair   text wait help move e-resize n-resize