배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양

Presentation on theme: "배경 그림 다루기 목록 꾸미기 하이퍼링크 꾸미기 마우스 커서 모양"— Presentation transcript:

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

2 배경 그림, 목록, 하이퍼링크 관련 스타일 – 배경 그림
속성 설명 값 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

3 배경 그림, 목록, 하이퍼링크 관련 스타일 – 목록 속성 설명 값 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

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

5 배경 그림, 목록, 하이퍼링크 관련 스타일 – 배경 그림
배경 이미지를 가로로만 반복한다. 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;}

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

7 배경 그림, 목록, 하이퍼링크 관련 스타일 – 하이퍼링크 속성 여러 개 설정하기
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>

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

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