[HTML&CSS] 3. CSS Display

편준민

Mar 07, 2025

❗

CSS에서 일반적인 값의 Display는 3가지가 있다

block : 넓이는 고정되어 있으며, 높이는 지정이 가능하다

inline : 넓이와 높이가 아이템의 의해서 정해진다. 직접 높이를 지정하여도 바뀌지 않는다.

inline-block : 원하는 높이와 넓이로 지정이 가능하다.


<!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>
        div {
            border: 1px solid black;
            padding: 10px;
        }


        .b1 {
            display: block;
            height: 200px;
        }

        .b2 {
            /* 아이템에 의해 높이, 넓이가 결정 / 임의의 높이, 넓이 설정 불가*/
            display: inline;
            height: 200px;
        }

        .b3 {
            /* 내가 원하는 높이, 넓이 지정 가능 */
            display: inline-block;
            height: 200px;
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="b1">1</div>
    <br>
    <div class="b2">2</div>
    <br>
    <br>
    <div class="b3">3</div>
</body>

</html>

See more posts

[HTML&CSS] 3. CSS Display

More articles

[코딩테스트] 4. 문자열 겹쳐쓰기

[코딩테스트] 3. 성분으로 구분한 아이스크림 총 주문량

[HTML&CSS] 2. CSS 선택자

[HTML&CSS] 1. HTML 태그들