[CSS] display

# display

 

 

none

안 보이게 하는 것.

 

 

 

block

<div class="div1">123</div>
<div class="div2">123</div>
<div class="div3">123</div>

 

div {
  display: block;
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: blue;
}

.div3 {
  background-color: green;
}

모든 div는 기본적으로 block요소임.

 

 

 

inline-block

<div class="div1">123</div>
<div class="div2">123</div>
<div class="div3">123</div>

 

div {
  display: inline-block;
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: blue;
}

.div3 {
  background-color: green;
}

내가 가진 영역만큼만 잡힘.

흰 공백은 enter를 쳤을 경우 생김.

<div class="div1">123</div><div class="div2">123</div>
<div class="div3">123</div>

 

개발 시 enter를 사용하지 않으면 가독성이 떨어지기 때문에, flex 사용.

 

가로로 영역이 있을 때는 inline 처럼 붙으나,

영역이 충분하지 않을 경우 block요소처럼 아래로 떨어짐.

 

 

 

 

inline

<div class="div1">123</div>
<div class="div2">123</div>
<div class="div3">123</div>

 

div {
  display: inline;
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: blue;
}

.div3 {
  background-color: green;
}

inline일 경우, 물 흐르듯이 영역이 이어지며 떨어짐.

 

 

 

flex

<div class="flex">
<div class="div1">123</div>
<div class="div2">123</div>
<div class="div3">123</div>
</div>

 

.flex {
  display: flex
}

.div1 {
  background-color: red;
}

.div2 {
  background-color: blue;
}

.div3 {
  background-color: green;
}

flex 선언한 내부의 요소들이 inline처럼 차지하는 정도만 영역으로 잡히게 됨. Enter 시 여백도 없음.