🌍 HTML\CSS
하이퍼 링크 클릭시 동적이미지 추가 - link, hover, visited, active등
Meteora_
2021. 2. 25. 13:17
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
color:green;
text-align:center;
}
h1{
color:#ff0000;
text-decoration:overline;
}
p{
color:rgb(0,0,255);
/*text-decoration:line-through;*/
}
p.upper{
text-transform:uppercase;
}
p.lower{
text-transform:lowercase;
}
p.cap{
text-transform:capitalize;
}
p.setif{
font-family:"Times New Roman";
font-style:italic;
font-size:1.5em;
color:green;
}
a{
text-decoration:none;
}
a:link{
color:#ff0000;
}
a:visited {
color:#000000;
}
a:hover {
color:rgb(0,0,255);
/*background-color:#0000ff;*/
text-decoration:underline;
}
a:active{
color:#ffffff;
background-color:black;
}
</style>
</head>
<body>
<h1>h1 tag</h1>
<p>여기는 p tag 입니다</p>
<p class="upper">Hello Css</p>
<p class="lower">Hello Css</p>
<p class="cap">hello css</p>
<p class="setif">Hello My World. welcome</p>
<a href="http://www.google.com">Google Home Page</a>
</body>
</html>
결과 ->
