💡 display 속성에 대해 알아보자!!
1. block
block속성은 기본적으로 한칸을 혼자 차지한다.
다른 요소를 추가했을때는 새로운 줄에 위치하게 된다.
block 대표적인 요소는 div,h1,p,ul,li 등...
2. inline
inline속성은 한칸이 아닌 다른 요소와 같은 라인에 표시 된다.
width, height를 지정할 수 없는 것이 특징이다.
inline 대표적인 요소는 span,a,img 등...
3. inline-block
inline-block속성은inline의 특징도 가지고 있고 block 속성의 특징도 가지고 있다.
한 줄에 표현도 가능하며 width, height 값 지정이 가능하다. 또한 새로운 줄에 표시되지않고 inline처럼 다른 요소와 같은 라인에 표시된다.
inline-block 대표적인 요소는 button, select 등...
inline과 inline-block의 차이점
- inline은
width와height를 가질 수 없고
inline-block은width와height를 가질 수 있다.
4. none
none속성은 요소를 화면에서 사라지게 할 수 있다.
overflow:hidden이랑은 다르다.
hidden속성은 사라지는것이 아니라 보이지 않을 뿐 실제 공간을 차지하고 있다.
