미누에요

[HTML/CSS] display : inline | inline-block | block | flex 본문

Web

[HTML/CSS] display : inline | inline-block | block | flex

미누라니까요 2023. 12. 3. 15:01
728x90
반응형
SMALL

display는 요소를 표현하는 방식에 대한 속성이다.

 

block

기본적으로 가로 영역을 모두 채운다.

width, height 속성을 지정하여 영역 크기를 조절할 수 있다.

기본적으로 display 속성값이 block에 해당되는 태그에는 <div>, <p>, <h#>, <li> 태그가 있다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        div{
            background-color: none;
        }
        span{
            display: block;
            border: solid 1px black;
        }
    </style>
</head>

<body>
    <div>
        Hi<span>안녕!</span>Bye
    </div>
</body>

 

블록 방식에서는 가로 영역을 모두 채우기 때문에 아래와 같은 형식으로 나타난다.

 

결과

 

 

inline

가로 영역을 가득 채우지 않기 때문에 줄바꿈이 되지 않는다.

width와 height를 지정할 수 없다.

inline 요소를 두 개 사용하면 줄바꿈되지 않고 바로 오른쪽에 표시된다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        div{
            background-color: none;
        }
        span{
            display: inline;
            border: solid 1px black;
        }
    </style>
</head>

<body>
    <div>
        Hi<span>안녕!</span>Bye
    </div>
</body>


결과를 보면 줄바꿈이 일어나지 않고 수평 방향으로 쭉 이어진 것을 확인할 수 있다.

 

결과

 

 

 

inline-block

inline 방식이 width와 height를 조절할 수 없다는 것을 위에서 확인했다.

block 방식은 줄바꿈이 기본적으로 진행된다.

이 두 가지 방식을 합친 것이 inline-block이다.

줄바꿈이 불가능하지만 width, height를 통해 크기를 지정할 수 있다.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        div{
            background-color: none;
        }
        span{
            display: inline-block;
            border: solid 1px black;
            width: 70px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        Hi<span>안녕!</span>Bye
    </div>
</body>

 

결과

 

결과를 보면 "안녕!"의 네모 크기를 width, height로 조정했고, 줄바꿈이 되지 않은 모습을 확인할 수 있다.

 

 

 

flex

요소들을 가로로 배치할 때 주로 사용한다.

각 요소들이 가진 내용의 너비만큼 width를 차지한다.

height는 상위 div의 높이만큼 늘어난다.

 

block 사용
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            height: auto;
            background-color: orange;
            border: solid 2px black;
            display: block;
        }
        .item{
            background-color: blanchedalmond;
            border: solid 2px red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Jay</div>
        <div class="item">Smith</div>
        <div class="item">Alexandro King Oliver James</div>
    </div>
</body>

 

 

위 코드는 container라는 상위 div에 Jay, Smith, Alexandero King Oliver James라는 세 item들이 들어가 있는 모습이다.

만약 위 코드처럼 block으로 작성한다면 아래와 같이 나타날 것이다.

 

 

하지만, flex를 사용하면 가로로 나타나는 것을 알 수 있다.

 

flex 사용 
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        .container{
            height: auto;
            background-color: orange;
            border: solid 2px black;
            display: flex;
        }
        .item{
            background-color: blanchedalmond;
            border: solid 2px red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">Jay</div>
        <div class="item">Smith</div>
        <div class="item">Alexandro King Oliver James</div>
    </div>
</body>

 

 

가로로 정렬된 것을 확인할 수 있다.

 

 

728x90
반응형
LIST
저작자표시

'Web' 카테고리의 다른 글

[HTML/CSS] CSS 선택자 (CSS Selector)  (0) 2023.12.13
[HTML/CSS] text-overflow : clip | ellipsis , 말 줄이기, 생략 처리하기  (0) 2023.12.09
[HTML/CSS] 가상 요소(Pseudo-Element), ::before, ::after  (2) 2023.12.02
CSS 기본 속성  (2) 2023.12.02
[HTML/CSS] 이미지 사이즈 조정, 이미지 크기 설정, object-fit  (2) 2023.11.29
'Web' Related Articles more