<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/public.css">
<style>
body {
margin-top : 50px;
}
pre{
width : 40%;
float :left;
margin : 3px
}
a{
// border : 1px solid blue;
margin : 10px;
margin-pop : 20px;
padding : 10px;
letter-spacing: 20px;
}
div{
clear : both;
border : 1px solid gray;
margin : 10px;
}
a:link{
color : red;
text-decoration: line-through;
}
a:visited{
color : green;
text-decoration: none;
}
a:hover{
color : gray;
font-size : 1.5em;
text-decoration : underline;
}
a:active{
color : blue;
background : pink;
text-decoration : overline;
}
</style>
</head>
<body>
<pre>
a : 하이퍼링크
새로운 페이지로 이동
속성 : target -_blank, _selt(default)
글자간격 : letter-spacing: 20px;
상태를 나타내는 코드 : 스타일에서 지정
:link, :visited , :hover (마우스 올려놀때) , :active (누르는 순간)
pre{
width : 40%;
float :left;
margin : 3px
}
float : left 속성을 취소하기 위해서 clear: both 를 설정
clear : both 는 블럭요소에서만 가능하다.
div{
border : 1px solid gray;
clear : both;
}
</pre>
<pre>
a:link{
color : red;
text-decoration: line-through;
}
a:visited{
color : green;
text-decoration: none;
}
a:hover{
color : gray;
font-size : 1.5em;
text-decoration : underline;
}
a:active{
color : blue;
background : pink;
text-decoration : overline;
}
</pre>
<div></div>
<a href="http://www.naver.com">네이버</a>
<a href="http://www.daum.net">다음</a>
<a href="http://www.w3schools.com">W3schools</a>
<a href="http://www.w3c.org">w3c</a>
</body>
</html>
댓글
댓글 쓰기