html에서 링크 태그는 상태에 따라 표현하는 방법이 다르다. 사용자의 입장에서 신경을 잘 쓰지 않는 부분이기도 하기 떄문에 다른 컨텐츠가 메뉴 등의 이동이 필요한 경우 사용자에 강조할 필요가 있다. 그렇기에 링크 태그에는 별도의 스타일을 적용하기도 한다. 링크 태그는 기본적으로 밑줄이 있고 파란색의 글자를 표시한다.
html 링크태그 색깔 종류 using html hyper link tag colors
html에서 링크태그는 다른 웹사이트나 웹페이지로 이동하는데 사용된다. 그렇기에 과거부터 지금까지 링크태그는 기본적으로 3가지 색상으로 상태를 표시하고 있다.
링크태그에는 기본적으로 밑줄과 파란색으로 표시된다.
링크 태그를 이용해 다른 웹페이지나 웹사이트에 방문을 한 경우 등도 색상이 달리 표현이 되는데, 우리가 보통 자주 보는 것이 밑줄이 있는 파란색과 밑줄이 있는 보라색이다.
상태에 따른 색상 표현
일반적인 링크태그의 색상과 상태는 3가지이다.
우리가 보통 자주보는 경우는 밑줄이 있는 파란색과 밑줄이 있는 보라색의 경우이다.
첫번째는 링크 태그를 이용하여 다른 웹페이지에 방문하지 않은 상태이며, 두번째는 링크 태그를 이용해 한번이상 방문한 상태를 말한다.
아래는 링크 태그에 대한 상태를 의미한다.
- 밑줄 & 파란색
- 링크 태그를 이용해 다른 웹사이트에 방문한 적이 없는 경우 - 밑줄 & 보라색
- 링크 태그를 이용해 다른 웹사이트에 한번이상 방문한 경우 - 밑줄 & 빨간색
- 링크 태그가 활성화된 경우
링크 색상 바꾸기
이제 링크 태그의 상태와 형태를 적용해 보도록 한다.
링크 태그에 대해 이런 상태 표시는 거의 신경쓰지 않는다.
다만 링크 태그를 사용자에게 잘 보이도록 표시하는 역할이나 도움을 주는 웹페이지 등으로 이동하도록 유도하는 역할을 한다.
아래의 경우 링크 태그에 대해 스타일을 적용한 경우이다.
- a:link
- 링크 태그의 기본 표시 상태 - a:visited
- 링크 태그를 이용해 다른 웹사이트에 이동한 경우 - a:active
- 링크 태그를 마우스로 클릭한 경우 - a:hover
- 링크 태그에 마우스를 올려 놓은 경우
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
a:active {
color: blue;
background-color: transparent;
text-decoration: underline;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
</style>샘플코드
링크 태그에 대한 내용으로 html 예제를 만들어 본다.
링크 태그를 어떻게 표시하고 사용할지는 사용자나 개발자의 몫이겠지만, 웹페이지나 웹사이트를 방문하는 사람이라면 해당 링크가 메뉴를 위한 이동인지, 컨텐츠에 대한 이동인지를 명확히 표시해 둘 필요는 있다.
아래는 위의 css를 이용해 링크태그에 스타일을 적용한 코드이다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
}
a:active {
color: blue;
background-color: transparent;
text-decoration: underline;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<p>
<a href="https://www.google.com" target="_blank">구글 바로가기</a>
</p>
<p>
<a href="https://www.naver.com" target="_blank">네이버 바로가기</a>
</p>
<p>
<a href="https://www.daum.com" target="_blank">다음 바로가기</a>
</p>
</div>
</body>
<!-- // -->
</html>
<!-- // -->결과 화면을 보자.
스타일에 따라 링크 태그의 색상과 밑줄의 상태가 변한 것을 볼 수 있다.
마우스를 올리면 빨간색으로 표시되어 사용자에 관련 정보가 있음을 강조하고 있다.
한번 이상 방문한 링크에 대해서는 검은색으로 표시하고, 한번도 방문하지 않은 링크 태그의 경우 녹색으로 표시되는 것을 볼 수 있다.
'programming > web' 카테고리의 다른 글
| html 링크 태그 북마크 처럼 사용하기 using a link tag bookmark (0) | 2022.05.19 |
|---|---|
| html 링크 태그 버튼 모양 스타일 적용하기 using html link tag button style (0) | 2022.05.14 |
| html 하이퍼링크 a tag 4가지 속성 특징 using html hyperlink a tag arrtibutes (0) | 2022.05.02 |
| html css 테두리 선과 마진 패딩 차이 html border margin padding (0) | 2022.04.25 |
| html css 글자 폰트 스타일 지정 방법 using html font style (0) | 2022.04.23 |
댓글