CSS Display

CSS Display 속성값들의 특징

1. display: inline;

- line break가 일어나지 않습니다.
- full width를 차지하지 않습니다.
- width, height 속성을 적용할 수 없습니다.

 

2. display: block;

- new line에서 시작합니다. 즉, line break가 일어납니다.
- full width를 차지합니다.
- width, height 속성이 적용 가능합니다.

 

3. display: inline-block;

- inline과 비슷한 특성이지만 width, height 적용이 가능합니다.

- 위와 같은 이유로 line break 시키고 싶진 않으나 width나 height등의 속성의 성격은 box를 따라가고 싶을 때 사용합니다.

- 주로 inline 요소에 padding 속성과 함께 이용해서 터치나 클릭 등의 hit 영역을 넓히고 싶을 때 사용되기도 합니다.

 

4. display: none;

- 레이아웃 자체에서 빠지며 페이지에서 제외됩니다.
- 그렇기에 단순히 사용자 눈에 안보일 뿐만 아니라 스크린리더에서도 해당 요소에 접근할 수 없습니다.
- visibility: hidden 과 헷갈리면 안됩니다. visibility: hidden은 말 그대로 눈에서 안보이게 하는 것일 뿐 영역은 빈공간으로라도 남아있게 됩니다.

 

5. display: table;

- flex, grid를 통한 레이아웃의 등장 이전에 잘 쓰이던 속성 값입니다.
- 요소들을 테이블처럼 배치되게 합니다.
- tr, td 등의 태그 없이도 웹 테이블이 형성 가능합니다.

 

6. display: flex;

- flex 레이아웃 시스템을 사용할 수 있습니다.

 

7. display: grid;

- grid 레이아웃 시스템을 사용할 수 있습니다.

 

8. display: inherit;

- 부모의 속성값을 상속합니다.

 

9. display: initial;

- 요소가 가지고 있는 원래의 값으로 세팅됩니다. 즉, 요소가 본래 inline 요소면 inline이 되는 식입니다.