이번 글에서는 a링크에 스타일을 적용하는 방법을 알아보도록하겠습니다.
1. link
a:link{}로 사용되며 링크를 누르기 전 스타일을 적용합니다.
헤더 영역에서 스타일을 지정을 해줍니다.
<style>
a:link{
color:green;
background-color:transparent;
text-decoration:none;
}
</style>그리고 아래에 a링크를 만들어 줍니다.
<h3>a링크 태그에 스타일 적용해보기</h3>
<a href ="http://www.daum.net">Daum</a> |
<a href ="http://www.naver.com">Naver</a> |
<a href ="./01_html_소개.html">HTML 소개</a>a링크들이 초록색으로 변한걸 확인할수 있습니다.
a링크 태그에 스타일 적용해보기
Daum | Naver | HTML 소개
2. visited
link와 마찬가지로 a:visited{}로 사용됩니다. a링크를 클릭했다면 방문하고 난 뒤의 스타일을 적용합니다.
아까의 예제에 그대로 적용해 봅시다.
<style>
a:visited{
color:pink;
background-color:transparent;
text-decoration:none;
}
</style>a링크 태그에 스타일 적용해보기
Daum | Naver | HTML 소개눌러보았던 a링크들이 분홍색으로 변한걸 확인할 수 있습니다.
3. hover
a:hover{}로 사용되며 마우스를 가져다 댔을때의 스타일을 적용합니다.
<style>
a:hover
{
color:red;
background-color:transparent;
text-decoration:underline;
}
</style>a링크 태그에 스타일 적용해보기
Daum | Naver | HTML 소개마우스를 a링크 위로 올리면 빨간색으로 변하는걸 볼 수 있습니다.
4. active
a:active{}로 사용되며 클릭시의 스타일을 설정할 수 있습니다.
<style>
a:active
{
color:yellow;
background-color:transparent;
text-decoration:underline;
}
</style>a링크 태그에 스타일 적용해보기
Daum | Naver | HTML 소개링크를 눌렀을때 링크가 노란색으로 변하는걸 볼 수 있습니다.
5.target 지정하기
5-1. target = "blank" : 새로운 탭에서 링크 열기.
5-2. target = "_top" : 현재창에서 링크 열기
5-3. target = "_self" : 동일한 프레임에서 링크 열기 , _top과 비슷하다고 생각하면 됩니다.
<h3>링크 페이지를 열기 위한 target 지정하기</h3>
<a href ="http://www.daum.net" target="_blank">Daum</a> | <!-- blank 새로운탭에서 링크열기 -->
<a href ="http://www.naver.com" target="_top">Naver</a> | <!-- top 현재창에서 링크열기 -->
<a href ="./01_html_소개.html" target="_self">HTML 소개</a> <!-- self 동일한 프레임에서 링크열기(현재창과 유사) -->링크 페이지를 열기 위한 target 지정하기
Daum | Naver | HTML 소개
6. tip
a링크를 클릭하면 특정위치로 이동합니다. 책갈피라고도 불립니다.
이동하고자 하는 위치에 a링크를 만든 뒤에 id를 tip으로 설정해 줍니다.
그리고 tip을 만들고자 하는 위치에 <a href="#tip">(하고싶은 이름)</a> a태그를 만들어 줍니다.
<!DOCTYPE html>
<html>
<head>
<title>::: 10_HTML_태그소개_a링크스타일적용 :::</title>
<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>
<!-- link : text-decoration:none 이러면 링크 아래에 언더라인이 안들어감 -->
</head>
<body>
<a href="#tip">tip 찾아가기</a>
<hr/>
<h3>a링크 태그에 스타일 적용해보기</h3>
<a href ="http://www.daum.net">Daum</a> |
<a href ="http://www.naver.com">Naver</a> |
<a href ="./01_html_소개.html">HTML 소개</a>
<hr/>
<h3>링크 페이지를 열기 위한 target 지정하기</h3>
<a href ="http://www.daum.net" target="_blank">Daum</a> | <!-- blank 새로운탭에서 링크열기 -->
<a href ="http://www.naver.com" target="_top">Naver</a> | <!-- top 현재창에서 링크열기 -->
<a href ="./01_html_소개.html" target="_self">HTML 소개</a> <!-- self 동일한 프레임에서 링크열기(현재창과 유사) -->
<hr/>
<h3 id="tip">a 링크를 클릭하면 특정 위치로 이동하기(책갈피라고도 함)</h3>
</body>
</html>a링크 태그에 스타일 적용해보기
Daum | Naver | HTML 소개링크 페이지를 열기 위한 target 지정하기
Daum | Naver | HTML 소개a 링크를 클릭하면 특정 위치로 이동하기(책갈피라고도 함)
실행시킨뒤에 눌러보면 아래쪽으로 이동하는걸 확인할 수 있습니다.
'wab' 카테고리의 다른 글
| 12_HTML_태그소개_목록생성하기 (0) | 2023.03.13 |
|---|---|
| 11_HTML_태그소개_Table정의하기 (0) | 2023.03.13 |
| 09_HTML_태그소개_스타일 적용 id-class (0) | 2023.03.13 |
| 08_HTML_태그소개_스타일 적용 예시 (0) | 2023.03.13 |
| 07_HTML_태그소개_스타일 지정 방식 (0) | 2023.03.11 |
