Position

yuzu sim

Jan 16, 2024

<배치의 기본>

부모가 자식의 위치를 결정함

부모가 없으면 바디를 기준으로 결정함

배치되는 애가 다 일라인 속성이여야 함

자식이 여러 명인경우 한꺼번에 배치됨

각각 적용하려면 부모도 다 달라야 함

플로우(Flow) : 구조를 형성하고 텍스트와 다른 요소들을 배치하는 방식


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: yellow;
            display: inline-block;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: red;
            display: inline-block;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: green;
            display: inline-block;
        }

        .box4 {
            width: 300px;
            height: 300px;
            background-color: blue;
            display: inline-block;
        }

        .box5 {
            width: 300px;
            height: 300px;
            background-color: bisque;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>

</html>