재미 없게도 아직 HTML4다.. 오래된..
<head> 와 </head> 사이에 넣어준다. <title> ~ </title> 위든 아래든 상관 없다. head 안이면 된다.
<style type="text/css">
a:link {font-size:3; text-decoration:none; color:#000000}
a:visited {font-size:3; text-decoration:none; color:#000000}
a:hover {font-size:3; text-decoration:none; color:#000000}
a:active {font-size:3; text-decoration:none; color:#000000}
</style>
...
<a href="http://www.google.com" target="_blank">조냉 구글!</a>
head 내에 선언하면 그 페이지는 자동으로 우리가 선언한 text/css를 따르게 된다.
link는 첫 로드 시 모양
visited는 방문 한 후의 모양
hover는 마우스를 갖다 댔을 때의 모양
active는 선택된 상태(tab 등으로)의 모양
간단한 스크립트를 이용한 배경색 바꾸기도 가능하다.
<a href="http://www.google.com" target="_blank" onmouseover="this.style.backgroundColor='#ececec'" onmouseout="this.style.backgroundColor='#ffffff'">조냉 구글!</a>
마우스 올리면 #ececec (옅은 회색)으로, 마우스가 벗어나면 원래 배경색(흰색)으로 바뀐다.
이거 말고도 또 한가지 스킬도 추가..
자바스크립트를 이요해서 즐겨찾기를 추가하는 링크를 만들기다.
<script language="javascript">
var favoriteURL="http://www.google.com";
var favoriteTitle="Google";
function addMySiteToFavorite() {
if (document.all) {
window.external.AddFavorite(favoriteURL, favoriteTitle);
}
}
</script>
이제 위 스크립트에서 생성한 함수를 사용할 수 있다.(addMySiteToFavorite())
<a href="javascript:addMySiteToFavorite()">즐겨찾기!</a>
뭐 요기까지..
'Programming Languages > HTML5' 카테고리의 다른 글
| 유투브 영상을 바로 나오게 태그하기 (0) | 2015.01.30 |
|---|---|
| 드디어 HTML5.. (0) | 2010.11.08 |
| html로 포토샵 효과 주기 (0) | 2010.10.04 |
| 신기술.. HTML5 (0) | 2010.09.06 |
