[CSS] display 속성 총정리! (block, inline, inline-block, flex 등)

이런 저런 코드를 참고하다 보면 다양한 display 속성을 자주 만날 수 있다.

이 속성은 말 그대로 요소를 어떻게 보여줄지 결정하는 속성이다.

대체 이 display 속성이 요소를 어떤 식으로 보여주는지 확실하게 알아보도록 하자.

 

 

none

요소를 랜더링하지 않도록 설정한다. 자리 차지도 하지 않고 완전히 사라진다.

 

예시

<style>
.display-none{ display: none }
</style>

<div class="display-none">display none 설정</div>
<div>none 설정 안 됨</div>

결과

none 설정 안 됨

block

기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다.

width, height 속성을 지정할 수 있으며 block 요소 바로 오른쪽에 배치될 수 있는 태그도 줄바꿈이 되어 표시된다.

 

div, p, h, li 태그 등이 이에 해당한다.

 

예시

<style>
    .block1{ width: 300px; border: 3px solid #333 }
    .block2{ width: 200px; border: 3px solid #999 }
</style>
    
<div class="block1">block1</div>
<div class="block2">block2</div>
hello

결과

inline

block과 달리 줄바꿈이 되지 않고, width와 height를 지정할 수 없다.

글자나 문장에 효과를 주기 위해 존재하는 속성이라고 할 수 있다. 

inline 요소 뒤에 나오는 태그는 줄바꿈되지 않고 바로 오른쪽에 배치된다.

 

span, b, i, a 태그 등이 이에 해당한다.

 

예시

<style>
    .inline1{
        background: rgb(165, 115, 175);
    }
    .inline2{
        width: 200px; /* 이 값은 무시 */
        border: 3px solid #999;
    }
</style>
    
<p>
    Lorem ipsum dolor sit amet, <span class="inline1">consectetur adipiscing elit</span>,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in <span class="inline2">reprehenderit</span>
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

결과

inline-block

block과 inline의 중간 형태로 볼 수 있다. 줄바꿈은 안 되지만 크기를 지정할 수 있다!

 

예시

<style>
    .inline-block1{
        display: inline-block;
        background: rgb(165, 115, 175);
        height: 45px;
        /* 원래 inline 요소의 높이는 글자(폰트)의 높이를 바탕으로 설정되지만,
        inline-block을 이용하면 임의로 높이 또한 설정을 할 수 있습니다. */
    }
    .inline-block2{
        display: inline-block;
        width: 200px; /* 이 값은 이제 정상 작동합니다 */
        border: 3px solid #999;
    }
</style>

<p>
    Lorem ipsum dolor sit amet, <span class="inline-block1">consectetur adipiscing elit</span>,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in <span class="inline-block2">reprehenderit</span>
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

결과

flex

(사실 이 녀석 쓰려고 포스팅 시작했다... )

이 요소는 자신이 가진 내용의 width만큼만 가로 길이를 차지하고, 가로 방향으로 배치된다.

height는 컨테이너 높이만큼 늘어난다.

 

예시

<style>
    .container {
        display: flex;
        background-color: burlywood;
    }
</style>

<div class="container">
	<div class="item" style="background-color: aqua;">helloflex</div>
	<div class="item" style="background-color: red;">abc</div>
	<div class="item" style="background-color: blueviolet;">helloflex</div>
</div>

결과

꼭 inline을 썼을 때와 비슷한 결과가 나온다! 그러나 배경은 block을 썼을 때처럼 꽉 찬 형태가 된다.

inline-flex

inline-block처럼 동작하는 요소이다. 이를 사용할 경우, 배경 크기가 한 줄을 모두 차지하지 않고 크기게 맞춰 줄어든다.

 

결과

flex 요소는 이름 그대로 유동적이기 때문에, 다루는 방법은 아주 복잡하지만 알아두면 유용하게 쓰일 수 있다.

이 요소를 이용해 아이템을 정렬할 수 있는 방법들을 소개하는 사이트를 참고해, 프로젝트에 적용시켜보도록 하자.

 

참고 사이트

https://studiomeal.com/archives/197