햄찌개

CSS - a테그 속성 연습 본문

UI설계 및 구현 -웹프로그래밍

CSS - a테그 속성 연습

햄찌개 2020. 9. 17. 10:12 
<!DOCTYPE html>
<html>
<head>
	<style>
		a:link{
			color:black;
			font-size: 100px;
		}
		a:visited{
			color:yellow;
		}
		a:hover{
			color:red;
			font-size: 10px;
		}	
		a:actived{
			color:blue;
		}
	</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a  href = "http://www.google.com">구그그그그그그그글</a>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<style>
		#menu01 {
			height: 500px;
			background-color: #9BCDC4;
			margin-left: 20px;
			margin-top:50px;
			padding: 20px;
			text-decoration: none;
		}
		#menu01:hover {
			text-decoration:underline;
			font-size: 100px;
		
		}
		
		#menu02 {
			height: 500px;
			background-color: #FFF111;
			margin-left: 20px;
			margin-top:50px;
			padding: 20px;
			text-decoration: none;
		}
		#menu02:hover {
			text-decoration:underline;
			font-size: 100px;
		
		}
		#menu03 {
			height: 500px;
			background-color: #33864C;
			margin-left: 20px;
			margin-top:50px;
			padding: 20px;
			text-decoration: none;
		}
		#menu03:hover {
			text-decoration:underline;
			font-size: 100px;
		
		}
		#menu04 {
			height: 500px;
			background-color: #FF4821;
			margin-left: 20px;
			padding: 20px;
			margin-top:50px;
			text-decoration: none;
		}
		#menu04:hover {
			text-decoration:underline;
			font-size: 100px;
		}
		ul li{
			list-style: none;
			float: left;
		}
	
	</style>

<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<br>
<br>
	<ul>
		<li><a id="menu01" href="">홍길동</a></li>
		<li><a id="menu02" href="">김두한</a></li>
		<li><a id="menu03" href="">강감찬</a></li>
		<li><a id="menu04" href="">세종대왕</a></li>
	</ul>
</body>
</html>
저작자표시

'UI설계 및 구현 -웹프로그래밍' 카테고리의 다른 글

JAVASCRIPT - 연습  (0) 2020.09.21
CSS- 색션 연습  (0) 2020.09.18
CSS - margin, padding 연습  (0) 2020.09.17
CSS연습 - 속성들  (0) 2020.09.16
CSS 연습 - 외부, 내부  (0) 2020.09.16
'UI설계 및 구현 -웹프로그래밍' Related Articles more