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