Tag: display css

inline, block, inline-block, flex, inline-flex, grid, inline-grid, none

display는 요소를 보여주고 숨기거나 위치를 설정하기 위한 옵션으로, display만 잘 알아도 레이아웃의 많은 부분을 해결할 수 있습니다.

이번 포스팅에서 display의 속성인 inline, flex, inline-flex, block, inline-block, grid, inline-grid, none의 구현을 통해 각각의 표시 방식을 알아보도록 하겠습니다.

알아보기 편하도록 배경은 블랙, 요소는 각각 레드, 오렌지, 그린으로 표현하겠습니다.

inline : inline으로 표시(width는 요소 크기)
block : block으로 표시
inline-block : inline + block으로 표시
flex : 자식 요소를 모두 inline-block으로 설정
inline-flex : inline + flex(전체 width는 자식 width의 합)
grid : flex처럼 한 방향이 아닌 가로, 세로로 설정 가능한 레이아웃
inline-grid : inline + grid(전체 width는 자식 width의 합)
none : 표시하지 않음(공간을 차지하지 않음)

줄바꿈 없이 태그를 표시하는 요소를 inline 요소, 태그마다 줄바꿈이 되는 요소를 block 요소라고 합니다.

대표적인 inline 요소는 <span>, <a> 등이 있으며, block 요소는 <div>,<p>,<h1>,<h2> 등이 있습니다.

먼저 아무 속성도 설정하지 않은 div를 확인해 보겠습니다.

.setContainer{
  background-color:black;
}

.setOne{
  background-color: red;
}

.setTwo{
  background-color: orange;
  width:95%;
}

.setThree{
  background-color: green;
  width:90%;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

div의 default 설정은 width 100%입니다.

기본 설정을 확인하기 위해 setTwo와 setThree에 width를 설정한 결과입니다.

먼저 display의 inline 속성을 확인해보죠.

1. inline

위 속성은 말 그대로 요소를 일렬로 늘어선 방식으로 표시하며 줄바꿈을 하지 않습니다.

각 요소마다 설정하며 width는 자동으로 크기에 맞게 변형됩니다.

.setContainer{
  background-color:black;
  display:inline;
}
.setOne{
  background-color: red;
  display:inline;
}
.setTwo{
  background-color: orange;
  display:inline;
}
.setThree{
  background-color: green;
  display:inline;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

inline은 위와 같이 문자열처럼 일렬로 늘어선 상태로 표시됩니다.

2. block

block은 inline 요소를 block으로 표시합니다.

block 요소 div 대신 inline 요소 span을 사용하면 다음과 같은데요.

위에서 div에 display:inline을 설정한 것과 같은 모양입니다.

그러므로 span에 display:block을 설정하면 반대로 div를 사용한 것과 같은 결과가 나오는 것을 알 수 있습니다.

.setContainer{
  background-color:black;
}
.setOne{
  background-color: red;
  display:block;
}
.setTwo{
  background-color: orange;
  display:block;
}
.setThree{
  background-color: green;
  display:block;
}

<div class='setContainer'>
  <span class='setOne'>red</span>
  <span class='setTwo'>org</span>
  <span class='setThree'>grn</span>
</div>

block 속성은 inline 요소를 block 요소처럼 표현하는 것을 알 수 있습니다.

3. inline-block

그렇다면 inline-block은 언제 사용할까요?

display:block이 필요하지만 표시는 inline으로 표시를 하고 싶은 상황입니다.

그러면 그게 그냥 span의 default 아닌가라고 생각할 수도 있지만 span에는 width, height 등 속성이 적용되지 않기 때문에 block으로 설정을 해야 합니다.

위의 코드에서 첫 번째 요소에 width:300px, height:200px를 설정하면 다음 그림과 같은 모습이 됩니다.

위 요소를 inline으로 설정하기 위해 inline-block를 사용할 수 있습니다.

.setContainer{
  background-color:black;
}
.setOne{
  background-color: red;
  display:inline-block;
  width:300px;
  height:200px;
}
.setTwo{
  background-color: orange;
  display:inline-block;
}
.setThree{
  background-color: green;
  display:inline-block;
}

<div class='setContainer'>
  <span class='setOne'>red</span>
  <span class='setTwo'>org</span>
  <span class='setThree'>grn</span>
</div>

div를 사용해 위와 같이 나타내려면 어떻게 해야 할까요?

.setContainer{
  background-color:black;
}
.setOne{
  background-color: red;
  display:inline-block;
  width:300px;
  height:200px;
}
.setTwo{
  background-color: orange;
  display:inline;
}
.setThree{
  background-color: green;
display:inline;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

위와 같이 사용하면 됩니다.

만약 위와 같이 사각형 사이 사이에 빈공간이 들어가는 경우가 있다면 <div> 태그 사이의 띄워쓰기나 줄바꿈을 확인해봐야 합니다.

보기에는 안좋지만 다음과 같이 태그 사이를 모두 붙여쓰면 공백이 발생하는 것을 제거할 수 있습니다.

<div class='setContainer'><div class='setOne'>red</div><div class='setTwo'>org</div><div class='setThree'>grn</div></div>

4. flex

flex는 새로운 속성 중 하나로 부모 요소에서만 설정을 합니다.

display:flex를 설정하면 모든 자식 요소에 display:inline-block을 설정한 것과 같은 효과를 줍니다.

따라서 모든 자식 요소는 display를 설정할 필요 없이 width, height 등의 속성이 사용 가능합니다.

.setContainer{
  background-color:black;
  display:flex;  
}
.setOne{
  background-color: red;
}
.setTwo{
  background-color: orange;
  width:200px;
}
.setThree{
  background-color: green;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

개별 요소에 모두 display를 설정할 필요 없이 부모 요소에서만 편하게 설정이 가능합니다.

만약 자식 요소를 가운데 정렬하고 싶으면 부모 요소에서 justify-content:center;를 사용하면 됩니다.

5. inline-flex

flex는 이미 inline-block의 기능을 갖고 있는데 그럼 inline-flex의 기능 무엇일까요?

바로 inline 특징 중 하나인 자동 크기 조절입니다.

inline-flex는 자식 요소를 합친 크기 만큼만 크기를 설정하므로 width는 100%가 아닌 자식 크기의 합입니다.

flex의 결과와 비교해보면 알 수 있듯이 부모 요소를 의미하는 블랙이 공간을 차지하고 있지 않습니다.

6. grid, inline-grid

이 grid는 무엇일까요?

그리드는 flex처럼 가로나 세로 한 방향으로만 레이아웃을 설정하는 것이 아니라 가로, 세로 두 방향 모두 설정할 수 있는 속성입니다.

grid 역시 부모 요소에서 설정을 하며 자식 요소를 block으로 표현합니다.

다양한 속성을 통해 레이아웃을 구성하는데 효과적이지만 내용이 많아 다른 포스팅을 통해 좀 더 알아봐야 할 필요성이 있을 것 같습니다.

.setContainer{
  background-color:black;
  display:grid;  
  grid-template-columns: 100px 100px 100px;
}
.setOne{
  background-color: red;
}
.setTwo{
  background-color: orange;
}
.setThree{
  background-color: green;
}

<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

inline-grid 역시 inline-flex 속성과 마찬가지로 width를 자식 요소에 맞게 조절하는 기능을 합니다.

7. none

none은 해당 요소를 표시하지 않으며 공간도 차지하지 않는 방식입니다.

.setContainer{
  background-color:black;
}

.setOne{
  background-color: red;
  display:none;
}

.setTwo{
  background-color: orange;
}

.setThree{
  background-color: green;
}


<div class='setContainer'>
  <div class='setOne'>
    red
  </div>
  <div class='setTwo'>
    org
  </div>
  <div class='setThree'>
    grn
  </div>
</div>

이렇게 없는 놈 취급을 합니다.

이와 반대되는 속성이 visibility로 이는 공간은 차지하되 표시만 하지 않는 속성입니다.

visibility, display 사용 관련 포스트

display:none을 visibility:hidden으로 변경한 결과입니다.

있는데 없는 척을 합니다.

물론 visibility도 공간만 차지할 뿐 할 수 있는 일은 없습니다.

---

CSS의 기본이지만 모든 기능을 다 이해하고 사용하기까지는 어느 정도의 시간과 경험이 필요한 것 같습니다. 무작정 외우기보다는 사용하면서 답답함이 쌓였을 떄 한번씩 소화제 느낌으로 설명을 삼켜주면 조금 더 와닿는 설명이 되지 않나 싶습니다..🧔