display란?
CSS의 display 속성은 요소들이 화면에 어떻게 보이게 할지를 결정한다.
display의 속성값 4가지
- none
- block
- inline
- inline-block
1. display: none;
화면에서 사라지며 크기를 차지하지 않는다.
2. display: block;
div가 갖는 기본값(default)
가로 한 줄을 다 차지하게 된다. 기본적으로 width=100%
3. display: inline;
컨텐츠를 감쌀 정도의 크기만 가진다. block과는 다르게 줄바꿈이 되지 않고, 크기를 변경할 수 없다.
예시를 보면 width=500px 값을 주어도 크기는 여전히 글씨를 감쌀 정도의 만큼만으로 고정되어 있다.
4. display: inline-block;
block과 inline의 기능을 합쳐놓은 속성이다. 기본적으로는 inline의 특징을 가지고 있지만, 임의로 크기를 변경할 수 있다.
예시를 보면 width=500px 값을 주었더니 크기가 변하는 모습을 확인할 수 있다.