반응형
link 속성
| :link | 방문하지 않은 링크 |
| :visited | 이미 방문한 링크 |
| :hover | 링크에 마우스 포인트럴 올려 놓았을때 (mouseover) |
| :active | 링크를 클릭하는 순간 보여지는 속성 |
코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link{
color:royalblue;
transition : 1s; /* 속성 변경할 때 효과의 속도 조절 */
}
a:visited {
color:teal;
}
a:hover {
color:white;
background-color: blue;
text-decoration: none;
}
a:active{
color:blue;
background-color: white;
text-decoration: none;
}
</style>
</head>
<body>
<!-- google은 JS 함수 / naver은 css -->
<a href ='https://github.com/ddongjunn/CSS'</a>
<a href='http://www.naver.com'>Naver Home page</a>
<a href='http://www.google.com' onmouseover="func()" onmouseout="out()" id='atag'>Google Home Page</a>
<br>
<script type="text/javascript">
function func() {
let obj = document.getElementById('atag');
obj.style.background = '#00ff00';
}
function out() {
let obj = document.getElementById('atag');
obj.style.background = '#ffffff';
}
</script>
</body>
</html>transition CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법
참고 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
결과
ddongjunn github(CSS)Naver Home page
Google Home Page
반응형
'프로그래밍 언어 > CSS' 카테고리의 다른 글
| [CSS] header 영역 / main 영역 / footer 영역 (div 태그를 이용해서 나눠보기) (0) | 2021.06.10 |
|---|---|
| [CSS] div 태그를 이용해서 프레임 나누기 (0) | 2021.06.10 |
| [CSS] CSS text 속성 (color, text-align, text-transform, direction...) (0) | 2021.06.09 |
| [CSS] CSS란? CCS기초, CSS적용하는 방법 (inline, internal, external) (0) | 2021.06.09 |