Float Example - logaegae/project_study GitHub Wiki

Float Example 1

<!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>

Float Example 2

<!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>

Float Example 3

<!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>

Layout Example 1

<!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>

Layout Example 2

<!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>
Add a custom footer
โš ๏ธ **GitHub.com Fallback** โš ๏ธ