반응형
안녕하세요 코딩초밥입니다 ㅇㅅㅇ
혹시 www.naver.com <-이런 링크를위한 글씨에도 효과를 줄수있는거아시나요?
오늘은 그 기능을 만들어보겠습니다
※간단 예제
·a:link - 방문되지 않은 링크의 스타일
·a:visited - 방문된 링크의 스타일
·a:hover - 마우스가 위에 있을 때의 스타일
·a:active - 마우스로 클릭되는 때의 스타일
간단하게 만들어보았습니다.코드 엔조이
<!DOCTYPE html>
<html>
<head>
<title>
의사선택자의 연습
</title>
<meta charset="utf-8">
<style>
a#anchor:link{color: red;}
a#anchor:visited{color: blue;}
a#anchor:hover{color: greenyellow; font-size: 2em;}
a#anchor:active{color: yellow;}
/* 모든요소에 hover가능하다 */
p:hover{background-color: teal;}
img{background-color: yellow;}
img:hover{background-color: greenyellow; width: 100%;}
</style>
</head>
<body>
<a id="anchor" href="https://www.naver.com">aaaa</a>
<p>hello world</p>
<img src="./image.png" alt="없음">
</body>
</html>반응형
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| data-id 활용법 (1) | 2022.09.30 |
|---|---|
| CSS_박스 (1) | 2021.05.30 |
| HTML_링크,이미지,표만들기 (4) | 2021.05.13 |
| HTML_IFRAME (13) | 2021.05.11 |
| HTML_서버와 통신 GET,POST (1) | 2021.05.11 |
댓글