MLP) [CSS] display 속성 - block, inline, inline-block

display란?

CSS의 display 속성은 요소들이 화면에 어떻게 보이게 할지를 결정한다.

 

display의 속성값 4가지

1. none
2. block
3. inline
4. 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 값을 주었더니 크기가 변하는 모습을 확인할 수 있다.

 

See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.