[CSS] 디스플레이 속성 (inline, block, inline-block)

 

박스가 화면의 표시되는 방식을 바꾸어준다.

inline속성의 박스를 block처럼 출력되게 할 수 있거나 그 반대로도 가능하다.

 

하지만 span태그를 block요소로 출력 방식을 바꿔주어도 inline요소인 span안에 block요소가 삽입될 수 있지는 않다.

(출력형식을 바꾸는거지 성질을 바꾸는것은 아님)

 

 

div{
  display:block;
  width:100px;
  height:100px;
  border:1px solid red;
  
}

block요소의 박스들은 서로 한줄씩을 차지하여 쌓이게 된다.

 

---

 

inline으로 출력한 박스들은 서로 내용물까지의 크기만 차지하게 된다.

 

 

---

inline-block으로 출력한 박스들은 block의 출력성질을 가지지만 줄을 차지하지 않아서 옆으로 쌓이게 된다.

 

 

 

 

.test{
  display:none;
  width:100px;
  height:100px;
  border:1px solid red;
}

.test4 {
  height:100px;
  width:100px;
  border:1px solid red;
}

test4번 상자만 출력하고 나머지는 none으로 출력

 

기존에 있던 상자 자리를 채우게 된다.

 

---

 

만약 또다른 출력속성인 visibility: hidden;을 사용하면 본래 자리는 차지하면서 출력만 보이지 않게된다.