1. 스타일 링크
HTML 링크에는 다양한 CSS 속성을 적용시킬 수 있고 또한 상태마다 다른 스타일을 지정해 주는 게 가능하다.
아무 스타일도 지정해 주지 않았을 때의 기본 링크 스타일
2. 네 가지 링크 상태
1) a:link : 아직 방문하지 않은 링크
2) a:visited : 방문한 링크
3) a:hover : 마우스를 올려놓을 때의 링크
4) a:active : 클릭하는 순간의 링크
순서의 규칙
- a:hover는 a:link와 a:visited 뒤에 와야 함
- a:active는 반드시 a:hover 뒤에 와아 함
- 순서를 지키지 않고 작성하면 스타일이 적용되지 않을 수 있음
3. text-decoration 적용
주로 링크의 밑줄을 제거할 때 사용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } </style> </head> <body> <a href="http://www.daum.net">http://www.daum.net</a> </body> </html> | cs |
결과
4. background-color 적용
링크의 배경색을 지정한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> a { color: black; } a:link { background-color: darkgray; } a:visited { background-color: blueviolet; } a:hover { background-color: firebrick; } a:active { background-color: aqua; } </style> </head> <body> <a href="http://www.daum.net">http://www.daum.net</a> </body> </html> | cs |
결과
'프로그래밍 > 웹표준' 카테고리의 다른 글
| [CSS] 8. 테이블 스타일 (0) | 2017.12.22 |
|---|---|
| [CSS] 7. 박스 모델(Box Model) (0) | 2017.12.22 |
| [CSS] 5. 폰트 설정하기 (0) | 2017.09.18 |
| [CSS] 4. 텍스트 서식 지정 (1) | 2017.06.30 |
| [CSS] 3. 배경 설정하기 (0) | 2017.06.27 |
댓글,
