요소를 수평으로 정렬하기

imjingu·2023년 7월 12일

개발공부

목록 보기

89/481

<!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>
        body > div {
            border: 2px solid red; margin-bottom: 20px;
        }

        body > div > div {
            width: 100px; height: 100px; border: 2px solid; border-radius: 10px;
        }
    </style>
</head>
<body>
    <h2>요소를 수평으로 정렬하기</h2>
    <style>
        /* 자식요소를 float으로 하고 부모요소에서 가상요소 선택자로 clear 해줌 */
        body > div:nth-of-type(2)::after { /*  */
            content: "";
            display: block;
            clear: both;           
        }
        body > div:nth-of-type(2) div {
            float: left;
        }
    </style>
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

    <style>
        /* 자식요소를 inline-block으로 하고 부모요소에서 font-size: 0으로 띄어쓰기와 줄 간격을 없앰*/
        body > div:nth-of-type(1) {
            font-size: 0; /* 띄어쓰기를 없애기 위해 사용 */
        }
        body > div:nth-of-type(1) div {
            display: inline-block;
            font-size: 16px;
        }
    </style>
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

    <style>
        /* 부모요소의 display를 flex로 정의 */
        body > div:nth-of-type(3) {
            display: flex;
        }
    </style>
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

imjingu

이전 포스트

반응형- 요소의 안쪽 여백 축소

다음 포스트

요소를 수평으로 정렬하기

개발공부

반응형- 요소의 안쪽 여백 축소

javascript

0개의 댓글