본문 바로가기

Python_WEB/HTML

HTML5 - 190609 Basic Study 27(위치 속성)

반응형

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 2일차</title>
<link href="css/ex05.css" rel="stylesheet">
</head>

<body>
<h1>위치 속성</h1>
<div id="mama">
    <div id="box1">박스1</div>
    <div id="box2">박스2</div>
    <div id="box3">박스3</div>
</div>

</body>
</html>

 

2. CSS Code

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

*{
	margin:0;
	padding:0;
}
ul, li{
	list-style:none;
}
h1{
	width:100%;
	background:pink;
	width:70%;
	margin:auto;
	text-align:center;
	height:80px;
	line-height:80px;
	/* line-height:calc(80px); */
}
div{
	width:150px;
	height:150px;
	border:3px solid black;
}
#box1{
	background:red;
	position:absolute;
	left:50px;
	top:50px;
	z-index:2;
}
#box2{
	background:blue;
	position:absolute;
	left:150px;
	top:150px;
	z-index:1;
}
#box3{
	background:pink;
	position:absolute;
	right:10px;
	bottom:150px;
}
div#mama{
	width:500px;
	height:250px;
	border:3px soild red;
	position:relative;
	overflow:hidden;
}
h2{
	position:fixed;
	background:black;
	color:white;
	width:100%;
	top:0;
	left:0;
}
div#mama:hover{
	overflow:scroll;
}
ul{
	overflow:hidden;
	position:relative;
	left:200px;
	top:100px;
}
ul li{
	float:left;
}

 

3. HTML / CSS 파일

ex05.html
0.00MB
ex05.css
0.00MB

 

4. HTML 미리보기

< css 2일차 >

반응형

태그