Chapter 9
마우스 커서에 반응하는 보조 속성
훗.. 어떤님이.. 제게 물으시길..(패러디 입니다)
마우스 커서를 대면 색깔이 바뀌고, 밑줄이 그어지는등..
자바 스크립트도 아니고.. 이런 링크는 어떻게 써요?
...라구요..
하핫.. 물론.. 자바 스크립트로도 그렇게 할 수 있다고는 들었습니다만,
대부분의 사이트들은 아마도 스타일 시트를 사용할것 입니다.
엇?! 그건 어케해여? ...라고 물으신다면?
대답해 주는게 인지 상정~! (이 세계의 파괴를 막기위해.. 이 세계의 평화를 지키기 위해..ㆀ -포켓 몬스터 中-)
썰~렁~
험험.. ㅡ.ㅡa 패러디 입니다.. 패러디..
오해 마시길.. (앗.. 이번에도 돌 날아 온다...ㆀ)
이것은 지난 시간에 배웠던 보조 속성중의 일부로서...
문서 관련 2가지는 지난시간때 전부 마물(마무리) 했구요 ^.^
링크 관련 4가지가 바로 오늘, 이시간에 배워야할 중점 포인트인것 입니다.
각각, link, hover, active, visited 입니다.
link는...
마우스 커서가 하이퍼 링크를 건드리기 전의 상태를 나타낼때 쓰입니다.
hover는...
마우스 커서가 하이퍼 링크위에 위치했을때 상태를 나타낼때 쓰입니다.
active는...
마우스 커서가 하이퍼 링크를 눌렀을때 상태를 나타내려면 이것이 쓰입니다.
visited는...
하이퍼 링크에 연결된 문서나 객체를 보고나서의 상태를 나타낼때 쓰입니다.
그럼 아래의 예제를 통해서 학습 해 볼가요?
▶보조 속성-하이퍼 링크
▶보조 속성-하이퍼 링크
<html>
<head>
<title>Test hyper Text</title>
<style type="text/css">
a:link {color:#aaaaff}
a:hover {color:#0000ff}
a:active {color:#ff0000}
a:visited {color:#ff00ff}
</style>
</head>
<body>
<a href="https://web.archive.org" target="_top" class="haha">하핫.. 실험해 보세요. ^^a</a>
</body>
</html>예제보기 1st ← Click !
어때요?
잼있죠? 잼있죠? *^^*
(T.T(O==(-_-#) {퍽!)
...그럼 계속 하겠습니다. ㅡ.ㅡ# ←반창고
마우스 커서가 문자위에 올려지기 전, 올려진 후, 클릭 했을때, 방문 했을때 각각 색상이 다르죠?
그런데, 방문하고 난후의 색상인 자두색에서 다시 커서를 옮겨도, 변화가 없죠?
잘 모르시겠거든 다시한번 예제를 확인 해 보세요.
커서가 위로 올려질때, 색상이 파랑으로 표시되어야 합니다.
그러나 자두색에서 변화가 없습니다.
클릭 했을때도 사실상 빨강으로 변해야 정상인데..
클릭 했을때 조차도 우릴 무시 합니다.. ㅡ.ㅡa
짜증 나지 않습니까?
이런점 때문에 대체로 visited라는 보조 속성을 떼어버리고 쓰는 경우가 많은것 입니다.
제가 고의적으로 있지도 않은 사이트로(정말 있는지 없는지는 모르지만..) 지정한 이유가 거기에 있습니다.
그건 바로~~ 에제를 제대로 보기 위함이죠 *^^*
만약.. visited를 떼어버리고 하실 경우, 제가 만든 이 사이트의 왼쪽 메뉴처럼, 저렇게 되는것 입죠.
아래의 예제는 visited를 없애고 적용한 위의 예제 입니다.
맘에 드신다면 따라 해 보시길 ^^a
<html>
<head>
<title>Test hyper Text</title>
<style type="text/css">
a:link {color:#aaaaff}
a:hover {color:#0000ff}
a:active {color:#ff0000}
</style>
</head>
<body>
<a href="https://web.archive.org" target="_top" class="haha">하핫.. 실험해 보세요. ^^a</a>
</body>
</html>예제보기 2nd ← Click !
훗.. 이번엔.. 또 맘에 안드는 점이 있지 않습니까?
저두 별루 맘에 안들어요.. ㅡ.ㅡa
그 이유가.. 음.. 익스에선 visited의 기본값이 어두운 계열의 자주색이기 때문이죠.
그럼 이거 바꾸려면 어케해야 되냐구요? ^^
음.. 지난 기초강좌때 배우섰을 겁니다.
,(콤마)를 사용하여 쓰는 법..
잘 모르시겠다면 여기를 누르세요.
잘 아셨으면 계속 들어 주세요. ^^*
그러니까, 그 말썽쟁이 보조 속성인 visited를 link와 합쳐버린다.. 이말 입져.
무슨 소리냐구요?
아래의 에제를 보시면 아하~ 하구 이해가 가실겁니다.
▶보조 속성-하이퍼 링크: 최종 단계
▶보조 속성-하이퍼 링크: 최종 단계
<html>
<head>
<title>Test hyper Text</title>
<style type="text/css">
a:link, a:visited {color:#aaaaff}
a:hover {color:#0000ff}
a:active {color:#ff0000}
</style>
</head>
<body>
<a href="https://web.archive.org" target="_top" class="haha">하핫.. 실험해 보세요. ^^a</a>
</body>
</html>예제보기 3rd ← Click !
하핫~~!!!
이젠 정말 마지막 이군여 *^^*
이번 강좌 보시느라 수고 하셨습니다.
마지막으로 한마디 하고 싶은데여..
꼭~! 실습하셔야 합니다.. ㅡ.ㅡㆀ
(복사-붙여넣기 같은 속임수는 안통합니다.. ㅡㅡ^)
아시져? 실습안하면 님들 손해란거.. ^^a
그럼.. 다음 강좌에서 뵙겠습니다.
이만..
- End -