<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.a{float:left; background-color: #00F;}
.box{
width: 200px;
height: 200px;
border: 1px #F00 solid;
}
.b{
background-color: #CCC; margin-left: 210px; width : 200px; height: 200px;
overflow: hidden; argin-left:0px;}
.wrap{max-width :921px}
</style>
</head>
<body>
<!-- float ๊ณต์ค์ ๋ธ. ์ ์์์๋ ์ํฅ์ ๋ชป์ฃผ๊ณ ๋ฐ ์์๋ float๋ ์๋ฆฌ๋ก ๋ค์ด๊ฐ๋ค.
๋ท ์์์ ์ปจํ
์ธ ๋ float๊ฐ ์ ์ธ๋ ์๋ฆฌ๋จผํธ๋ฅผ ํผํด๊ฐ๋ค-->
<div class="wrap">
<div class="box a"><!--ํด๋์ค๋ฅผ 2๊ฐ ์ค๋๋ ๋์ด์ฐ๊ธฐํ๋ค -->
</div>
<div class="box b">
(์์ธ=์ฐํฉ๋ด์ค) ๊น์ฐ์ ๊ธฐ์ = ์ค๊ตญ ํต์ ์ฅ๋น ํ์ฌ์ธ ํ์จ์ด๊ฐ ์ผ์ฑ์ ์๋ฅผ ์๋๋ก
ํนํ๊ถ ์นจํด ์์ก์ ์ ๊ธฐํ ๊ฐ์ด๋ฐ ์ผ์ฑ์ ์๊ฐ ๋ง์์ก ๋ฑ ์ ๊ทน์ ์ธ ๋์์ ์์ฌํ๋ค.
์์นํธ ์ผ์ฑ์ ์ ์ง์์ฌ์ฐ๊ถ(IP)์ผํฐ์ฅ(๋ถ์ฌ์ฅ)์ 25์ผ ์ผ์ฑ ์์ด์ฌ์ฅ์์ ๊ธฐ์๋ค๊ณผ
๋ง๋ ํ์จ์ด์ ๋ํ ๋์๋ฐฉ์๊ณผ ๊ด๋ จํ ์ง๋ฌธ์ "๋ง์์ก์ด๋ ํด์ผ๊ฒ ์ฃ . ๊ทธ์ชฝ(ํ์จ์ด)
์์ ๊ทธ๋ ๊ฒ ๋์ค๋ฉด ๊ฐ๋งํ ์์ ์๋ ์๊ฒ ๊ณ โฆ"๋ผ๊ณ ๋งํ๋ค.
์ ๋ถ์ฌ์ฅ์ด ์ด๋๋ IP์ผํฐ๋ ์ผ์ฑ์ ์์ ์ ์ฌ์ ์ธ ํนํ๊ด๋ฆฌ๋ฅผ ๋ด๋นํ๋ค.
๊ทธ๋ ๊ตญ๊ฐ์ง์์ฌ์ฐ์์ํ ๋ฏผ๊ฐ์์, ํ๊ตญ์ง์์ฌ์ฐํํ(KINPA), ํ๊ตญํนํ์ ๋ณด์
๋น์์์ด์ฌ ๋ฑ๋ ๋งก๊ณ ์๋ค.
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float2</title>
<style media="screen">
*{margin :0; padding:0;float:left;}
/*๋ค ๊ฐ์ด ๋จ๋ฉด ๋ถ๋ชจ์ ์์ญ์ ์ฝํ
์ธ ๊ฐ float๋๋ ์ ์ง๋๋ค*/
ul{list-style: none;}
/*ul์ ๋ง๋จธ๋ฆฌ ์ญ์ */
.menu{border:1px #00F solid; height : auto;}
.menu li{border:1px #0F0 solid;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.section1{border : 1px #00F solid; overflow: hidden;}
/*overflow:hidden์ด๋ auto๋ก ํฌ๊ธฐ๋ฅผ ์ก๊ธฐ๋ณด๋ค height๊ฐ์ ๊ณ์ฐํด ๋ฃ๋ ๊ฒ์ด ์์ */
.section2{border : 4px #F00 solid;margin-top: 320px;}
/*marigin์ผ๋ก ๋ ์ด์์์ ์ ๋ฆฌํ๋ค๋ณด๋ฉด ์๋๋ก๋ฉ๋คํ*/
.box1{width:49%; height: 300px; border : 1px #0F0 solid; float: left;}
.box2{width:49%; height: 300px; border : 1px #0F0 solid; float: right;}
</style>
</head>
<body>
<div class="section1">
<div class="box1">
box1
</div>
<div class="box2">
box2
</div>
</div>
<div class="section2">
์๋ฌด๊ฑฐ๋ํ
์คํธ๋ฅผ ์ง์ด๋ฃ์ด๋ด
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{border: 1px #F00 solid; height: 80px;}
.left{width:100px; float:left;}
.right{width:100px;float:right;}
.center{margin:0 110px;}
</style>
</head>
<body>
<div class="left">
L
</div>
<div class="right">
R
</div>
<div class="center">
C
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{border: 1px #F00 solid;}
.top{height:80px; margin-bottom:10px;}
.left{width:200px; height:400px; float:left;}
.right{width:200px; height:400px;float:right;}
.contents{height:400px; margin-left:210px; margin-right:210px;}
.footer{height:80px; margin-top:10px;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="contents">contents</div>
<div class="footer">footer</div>
</body>
</html>