relative - govl2233/project_studyej GitHub Wiki

1.๋ถ€๋ชจ์š”์†Œ๊ฐ€๋˜๋Š”๊ฑด์•„๋‹ˆ๋‹ˆ๊น ์ฐฉ๊ฐํ•˜์ง€๋ง๊ธฐ.

2.๊ฒน์ณ๋„ ์ƒ๊ด€์—†์Œ. ์‹ค์ œ์œ„์น˜๋Š” ์ฒ˜์Œ์— ์ž์‹ ์ด์žˆ๋˜ ์œ„์น˜์ด์ง€๋งŒ ์ƒ๋Œ€์น˜๋ฅผ ์ฃผ๋ฉด์„œ ์œ ์ฒด์ดํƒˆ์„ ํ• ์ˆ˜ ์žˆ์œผ๋ฉฐ ๋‹ค๋ฅธ ์ƒ์ž์™€ ๊ฒน์น ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

3.๋ถ€๋ชจ์š”์†Œ์— absolute๋กœ marin 0 ์„ ์ฃผ๋ฉด ์•ˆ๋จนํ˜€์„œ relative๋กœ ์ค˜์•ผํ•จ.

ex)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>relative</title>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        
        .box1{border:1px #f00 solid;
            width:200px;
            height:200px;
            position:relative;
            left:100px;
            top:10px;
        }
        .box2{border:1px #f0f solid;
            width: 200px;
            height: 200px;
            position: relative;
            left:310px;
            bottom:190px;
        }

     
    
          
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>

</body>
</html>
โš ๏ธ **GitHub.com Fallback** โš ๏ธ