[HTML/CSS]position, inline, block

Jimin_Noteยท2022๋…„ 5์›” 24์ผ
0

[HTML,CSS,JS]

๋ชฉ๋ก ๋ณด๊ธฐ
4/6

๐Ÿ“Position ์†์„ฑ

์›น ๋ฌธ์„œ ์•ˆ ์š”์†Œ๋“ค์„ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ•  ์ง€๋ฅผ ์ •ํ•จ
position ์†์„ฑ์„ ์ด์šฉํ•˜๋ฉด ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€๋ฅผ ์›ํ•˜๋Š” ์œ„์น˜๋กœ ๋ฐฐ์น˜๊ฐ€๋Šฅ

์†์„ฑ๋‚ด์šฉ
relative๋ถ€๋ชจ ์š”์†Œ์— ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์—ฐ๊ฒฐํ•˜์—ฌ ์œ„์น˜๋ฅผ ์ง€์ •
absolute์›ํ•˜๋Š” ์œ„์น˜ ์ง€์ •
fixed์ง€์ •ํ•œ ์œ„์น˜ ๊ณ ์ •

๐Ÿ’โ€โ™‚๏ธ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

<๊ธฐ๋ณธ๊ฐ’>

relative

๐Ÿ’พ์˜ˆ์‹œ

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            margin : 10px;
            display: inline-block;
            width: 300px;
            height: 100px;
        }
        .red {
            background: red;
            position:relative;
            top:50px;
            left:30px;
        }
        .blue {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

๐Ÿ’พ๊ฒฐ๊ณผ

absolute

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            margin : 10px;
            display: inline-block;
            width: 300px;
            height: 100px;
        }
        .red {
            background: red;
             position: absolute;
              width: 50px;
            height: 50px;

        }
        .blue {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

๐Ÿ’พ๊ฒฐ๊ณผ

์œ„ ์ฝ”๋“œ์—์„œ position ๋งŒ relative ๋กœ ๋ฐ”๊พธ๋ฉด

fixed

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            margin : 10px;
            display: inline-block;
            width: 300px;
            height: 100px;
        }
        .red {
            background: red;
            position: fixed;
            width: 50px;
            height: 50px;
            bottom: 100px

        }
        .blue {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>
</html>

๐Ÿ’พ๊ฒฐ๊ณผ

๐Ÿ“display ์†์„ฑ

์›น ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์„ ๊ฒฐ์ •ํ•˜๋Š” CSS์˜ ์ค‘์š”์†์„ฑ
ํ•ด๋‹น HTML ์š”์†Œ๊ฐ€ ์›น ๋ธŒ๋ผ์šฐ์ €์— ์–ธ์ œ ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”๊ฐ€๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค

inline

div {
           margin : 10px;
           display: inline;
           width: 50px;
           height: 50px;
       }
       .red {
           background: red;
           

       }
       .blue {
           background: blue;
       }
       .green{
          background: green;
       }

๐Ÿ’พ๊ฒฐ๊ณผ

inline-block

div {
           margin : 10px;
           display: inline-block;
           width: 50px;
           height: 50px;
       }
       .red {
           background: red;
           

       }
       .blue {
           background: blue;
       }
       .green{
          background: green;
       }

๐Ÿ’พ๊ฒฐ๊ณผ

block

div {
           margin : 10px;
           display: block;
           width: 50px;
           height: 50px;
       }
       .red {
           background: red;
           

       }
       .blue {
           background: blue;
       }
       .green{
          background: green;
       }

๐Ÿ’พ๊ฒฐ๊ณผ

profile
Hello. I'm jimin:)

0๊ฐœ์˜ ๋Œ“๊ธ€