본문 바로가기

Python_WEB/HTML

HTML5 - 190609 Basic Study 28(positon과 float를 이용한 레이아웃 설계)

반응형

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 2일차 positon과 float를 이용한 레이아웃 설계</title>
<link href="css/ex06.css" rel="stylesheet">
</head>

<body>
<h2>위치 속성2</h2>
<ul>
	<li><a href="#">버튼1</a></li>
	<li><a href="#">버튼1</a></li>
	<li><a href="#">버튼1</a></li>
	<li><a href="#">버튼1</a></li>
    <li><a href="#">버튼1</a></li>
</ul>
</body>
</html>

 

2. CSS Code

@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}
/* 목록 기호 없애기 */
ul, li{
	list-style:none;
}
ul{
	overflow:hidden;
	position:relative;
	left:200px;
	top:100px;
}
ul li{
	float:left;
	padding:10px;
}
ul li:hover{
	background:pink;
}

 

3. HTML / CSS 파일

ex06.html
0.00MB
ex06.css
0.00MB

 

4. HTML 미리보기

반응형

태그