정보&강의 CSS hover 테크닉
- 인터미션
- 2504
- 0
첨부 1
링크된 곳에 마우스를 올리면 색깔 바뀌는 CSS 의 Hover 기능 응용해보기
텍스트 링크된 곳에 마우스를 올리면 색깔 바뀌는 현상이 CSS 의 Hover 현상입니다.
Hover 기능을 서로 다르게 주면 심플한 메뉴가 될것입니다. Hover 기능은 다음과 같이 작성을 합니다.
a:hover {} 로 작성을 하는데 이 결과물은 링크가 걸린 텍스트에 절대적으로 하나만 줄 수
가 있었습니다
이제부터는 a:앞에 아무 이름이나 넘버를 삽입하여 소스를 바꾸면 원하는 만큼 자유롭게
바꿀 수가 있습니다.
예: a.이름명:hover {}
위와 같이 hover에 이름을 정해주고 <Body> 내용안의 원하는 부분에 클래스를
선언하면 됩니다.{class=이름명}(class이름명은 hover이름명과 동일하게 정해
주어야됩니다.
다음 예제를 참고 하시기 바랍니다.
<html>
<head>
<title>내용이 다른 Hover 기능</title>
<style type=text/css>
<!--
a {font-family: 굴림; font-size:9pt; text-decoration: none}
a.no1:hover {font-size:9pt; color:#33CC00; text-decoration: none}
a.no2:hover {font-size:9pt; color:#CCCCCC; text-decoration: none}
a.no3:hover {font-size:9pt; color:#FF0000; text-decoration: none}
a.no4:hover {font-size:9pt; color:#336699; text-decoration: none}
a.no5:hover {font-size:9pt; color:#339966; text-decoration: none}
-->
</style>
</head>
<body bgcolor=#FFFFFF>
<a href=http://homejungbo.com target=_blank class=no1>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no2>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no3>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no4>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no5>홈정보컴</a>
</body>
</html>
자료제공 : 하이미디어디자인
텍스트 링크된 곳에 마우스를 올리면 색깔 바뀌는 현상이 CSS 의 Hover 현상입니다.
Hover 기능을 서로 다르게 주면 심플한 메뉴가 될것입니다. Hover 기능은 다음과 같이 작성을 합니다.
a:hover {} 로 작성을 하는데 이 결과물은 링크가 걸린 텍스트에 절대적으로 하나만 줄 수
가 있었습니다
이제부터는 a:앞에 아무 이름이나 넘버를 삽입하여 소스를 바꾸면 원하는 만큼 자유롭게
바꿀 수가 있습니다.
예: a.이름명:hover {}
위와 같이 hover에 이름을 정해주고 <Body> 내용안의 원하는 부분에 클래스를
선언하면 됩니다.{class=이름명}(class이름명은 hover이름명과 동일하게 정해
주어야됩니다.
다음 예제를 참고 하시기 바랍니다.
<html>
<head>
<title>내용이 다른 Hover 기능</title>
<style type=text/css>
<!--
a {font-family: 굴림; font-size:9pt; text-decoration: none}
a.no1:hover {font-size:9pt; color:#33CC00; text-decoration: none}
a.no2:hover {font-size:9pt; color:#CCCCCC; text-decoration: none}
a.no3:hover {font-size:9pt; color:#FF0000; text-decoration: none}
a.no4:hover {font-size:9pt; color:#336699; text-decoration: none}
a.no5:hover {font-size:9pt; color:#339966; text-decoration: none}
-->
</style>
</head>
<body bgcolor=#FFFFFF>
<a href=http://homejungbo.com target=_blank class=no1>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no2>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no3>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no4>홈정보컴</a>
<a href=http://homejungbo.com target=_blank class=no5>홈정보컴</a>
</body>
</html>
자료제공 : 하이미디어디자인
이런 글도 찾아보세요!
댓글 0
권한이 없습니다. 로그인