<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.divall {
width: 100%;
height: 768px;
}
.div1 {
width: 100%;
height: 20%;
border: 1px solid red;
box-sizing: border-box;
}
.div2 {
width: 20%;
height: 60%;
border: 1px solid green;
float: left;
box-sizing: border-box;
}
.div3 {
width: 60%;
height: 60%;
border: 1px solid blue;
float: left;
box-sizing: border-box;
}
.div4 {
width: 20%;
height: 60%;
border: 1px solid gray;
float: left;
box-sizing: border-box;
}
.div5 {
width: 50%;
height: 20%;
border: 1px solid orange;
clear: both;
float: right;
box-sizing: border-box;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div class="divall">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</div>
</body>
</html>
==================================================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div1 {
width: 500px;
height: 500px;
border: 1px solid red;
background-image: url('gimo.png');
background-repeat: repeat-x;
background-repeat: repeat-y;
}
.div2 {
width: 26px;
height: 26px;
background-image: url('tti.png');
}
.div2:ACTIVE {
background-position: 26px 0px;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
=============================================
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body:ACTIVE{
background: black;
}
#wrapper {
width: 100%;
height: 800px;
box-sizing: border-box;
}
#header {
width: 100%;
height: 8%;
box-sizing: border-box;
}
#content {
width: 100%;
height: 92%;
box-sizing: border-box;
text-align: center;
}
#header>img {
float: right;
}
#content>a>img {
width: 15%;
height: 13%;
margin-top: 150px;
clear: both;
}
#content>.text {
height: 4%;
width: 25%;
margin-top: 30px;
border: 1px solid lightgray;
background-image: url('input.png');
background-position: 99% 0%;
background-repeat: no-repeat;
}
#content>.text ~ input {
width: 5%;
height: 3%;
border: 0px;
background: #eeeeee;
font-size: 10px;
color: #757575;
font-weight: bold;
margin-top: 15px;
}
</style>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="googletop.jpg">
</div>
<div id="content">
<a href="http://www.google.com"><img src="googleLogo.png"></a>
<br>
<input class="text" type="text">
<br>
<input
type="button" value="Google 검색"> <input type="button"
value="I'm gubonny">
</div>
</div>
</body>
</html>
'노트필기' 카테고리의 다른 글
| [Web] class0717-1 (0) | 2017.07.17 |
|---|---|
| [Web] class 0714-1 (0) | 2017.07.14 |
| [Web] class 0713-1 (0) | 2017.07.13 |
| [Web] class 0712-2 (0) | 2017.07.12 |
| [Web] class 0712-1 (0) | 2017.07.12 |
