소스
* 마우스를 올리고 있는 동안 : hover
* 마우스를 클릭하고 있는 동안 : active
* 마우스를 한번 클릭 한 이후 : visited
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> li{ display: inline-block; background-color: cornflowerblue; color: white; } a{ color: aliceblue; } /* 마우스 오버(마우스 올렸을때) */ a:hover{ background-color: chocolate; } /* 마우스 클릭하고있을때 */ a:active{ background-color: aqua; } /* 마우스 한번클릭후 */ a:visited{ color: white; } </style> </head> <body> <header> head </header> <nav> <ul> <li><a href="#1">menu1</a></li> <li><a href="#2">menu2</a></li> <li><a href="#3">menu3</a></li> <li><a href="#foot4">foot으로 이동</a></li> </ul> </nav> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <footer id="foot4"> foot </footer> </body> </html> | cs |
* display: inline-block / block 의 차이 알기(다음포스팅에 다시 언급)
결과
1. 첫화면
2. 마우스를 menu1에 올렸을 경우이다.
3. 클릭을 하고있는 중 이다.
4. menu1을 클릭 후 에도 color 이 하얀색으로 유지 된다. (주소란에 페이지가 넘어간 것을 확인 할 수 있다)
5. foot으로 넘어가는 버튼 클릭했을 경우 페이지가 아래로 넘어간다.
'* Programming > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 마진과 패딩,border(color,style,width) (0) | 2016.09.22 |
|---|---|
| [HTML/CSS] 블럭/인라인 블럭의 차이와 설정 오버라이드 (0) | 2016.09.22 |
| [HTML/CSS] HTML에 CSS를 적용하는 방법 3가지 (0) | 2016.09.20 |
| [HTML]Form(input, select, checkbox, radio) (0) | 2016.09.06 |
| [HTML]table만들기 (0) | 2016.09.06 |