<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
a{
border : 1px solid orange;
margin : 10px;
padding : 20px;
letter-spacing : 20px;
}
a:link{ /* 기본 설정*/
color : red;
text-decoration : none;
}
a:visited{ /* red로 돌리려면 방문기록 삭제 */
color : blue;
}
a:hover{ /* 커서를 올렸을때*/
background-color : yellow;
text-decoration : line-through;
}
a:active{ /* 클릭했을때 글자크기 1.5배 */
font-size : 1.5em;
}
hr{
position : relative;
top : 50px;
}
p:hover{
background-color : lime;
}
p:active{
background-color : red;
}
</style>
</head>
<body>
<br><br><br>
<a href="http://www.naver.com" target="_blank">네이버</a>
<a href="http://www.daum.net" target="_blank">다음</a>
<a href="http://www.w3schools.com" target="_blank">w3schools</a>
<br>
<hr>
<br><br>
<p>무궁화 꽃이 피었습니다.</p>
<p>능소화 꽃이 피었습니다.</p>
<p> 진달래 꽃이 피었습니다.</p>
</body>
</html>😀 참고자료
😀 실행
'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글
| [html/jsp] font패밀리 (0) | 2022.12.27 |
|---|---|
| [html/jsp] 의사클래스 구조 (0) | 2022.12.27 |
| [HTML/jsp] placeholder, 전화번호 (0) | 2022.12.25 |
| [HTML/jsp] file, select, button, multiple (0) | 2022.12.25 |
| [HTML&Script] formtest2 (0) | 2022.12.23 |