반응형
HTML 링크는 방문했는지, 방문하지 않았는지, 활성 상태인지에 따라 다른 색상으로 표시된다.
HTML Link Colors
기본적으로 링크는 다음과 같이 나타난다(모든 브라우저):
- 방문하지 않은 링크는 밑줄이 그어져 있고 파란색이다.
- 방문한 링크는 밑줄이 그어져 있고 보라색이다
- 활성 링크는 밑줄이 그어져 있고 빨간색이다
CSS를 사용하여 링크 상태 색상을 변경할 수 있다:
여기서 방문하지 않은 링크는 밑줄이 없는 녹색으로 표시된다. 방문한 링크는 밑줄이 없는 분홍색이다. 활성 링크는 노란색이고 밑줄이 표시된다. 또한 링크(a:hover) 위에 마우스를 놓으면 빨간색이 되고 밑줄이 표시된다:
| <!DOCTYPE html> <html> <head> <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> </head> <body> <h2>Link Colors</h2> <p>기본 링크색상을 변경할 수 있다.</p> <a href="html_images.asp" target="_blank">HTML 이미지</a> </body> </html> |
링크 버튼
링크는 CSS를 사용하여 버튼으로 스타일을 지정할 수도 있다:
| <!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } </style> </head> <body> <h2>링크 버튼</h2> <p>버튼으로 링크 스타일:</p> <a href="default.asp" target="_blank">이것은 링크</a> </body> </html> |
HTML 링크 태그(HTML Link Tags)
| 태그 | 내용 |
| <a> | 하이퍼링크를 정의한다. |
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 이미지(Image) (0) | 2023.04.29 |
|---|---|
| HTML 링크-북마크 생성 (0) | 2023.04.28 |
| HTML 링크(Links-Hyperlinks) (0) | 2023.04.26 |
| HTML CSS (0) | 2023.04.25 |
| HTML 색조, 채도, 명도(HSL) 색상 (0) | 2023.04.24 |
댓글