5. (CSS) justify-content

hyeonn

Jan 16, 2024

Contents

1. 수평 정렬 (수평 이동) : justify-content 2. 수직 정렬 (수직 이동) : align-items 3. nth-child();

1. 수평 정렬 (수평 이동) : justify-content

2. 수직 정렬 (수직 이동) : align-items


align-items: end;

<따로 정렬 시, 부모가 2명>

3. nth-child();


last-child = 마지막 div를 지정해서 적용

.outer-box div 하면 outer-box에 있는 모든 div에 속성을 적용 (.outer-box의 모든 div들에게 color white 속성을 모두 적용)

' > ' 를 이용해서 몇번째 자식에게 속성을 적용할지 지정
첫번째 자식인 "inner-box1"만 적용 — ' > ' 를 이용해서 몇번째 자식에게 속성을 적용할지 지정 첫번째 자식인 "inner-box1"만 적용

그 외 정렬 속성

코드


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .outer-box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .inner-box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .inner-box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .b2 {
            display: grid;
            justify-content: end;
        }
    </style>
</head>

<body>
    <div class="outer-box">
        <div class="b1">
            <div class="inner-box1">1</div>
        </div>
        <div class="b2">
            <div class="inner-box2">2</div>
        </div>


    </div>
</body>

</html>

[ space-between; ]

[ list-style-type: none ]

Contents

1. 수평 정렬 (수평 이동) : justify-content 2. 수직 정렬 (수직 이동) : align-items 3. nth-child();

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer-box { width: 500px; height: 500px; background-color: skyblue; display: grid; grid-template-columns: 1fr 1fr; } .inner-box1 { width: 100px; height: 100px; background-color: red; } .inner-box2 { width: 100px; height: 100px; background-color: blue; } .b2 { display: grid; justify-content: end; } </style> </head> <body> <div class="outer-box"> <div class="b1"> <div class="inner-box1">1</div> </div> <div class="b2"> <div class="inner-box2">2</div> </div> </div> </body> </html>