CSS display

display 속성은 요소가 block 형태로 표시될지, inline 형태로 표시될지를 결정하며 요소의 배치 방식인 레이아웃을 결정합니다.

 

1. block

block 속성을 가진 요소는 다음과 같은 특징을 가집니다.

 

- 화면을 수직 분할
- 내용이 없거나 한 행을 전부 채우지 않아도, 한 행을 전부 차지함
- width / height를 이용해 크기 조절 가능

 

block 속성을 가진 대표적인 태그에는 <div>, <p>, <pre>, <h1> ~ <h6>, <hr> 가 있습니다.

 

 

2. inline

inline 속성을 가진 요소는 다음과 같은 특징을 가집니다.

- 화면을 수평 분할
- 작성한 만큼만 영역을 차지
- width / height를 사용할 수 없음

inline 속성을 가진 대표적인 태그에는 태그에는 <span>, <b>, <l>, <strong>, <em>, <mark>가 있습니다.

 

 

3. inline-block

inline-block 속성은 inline과 block의 특징 일부를 합친 속성으로 다음과 같은 특징을 가집니다.

- 화면을 수평 분할

- width / height를 이용해 크기 조절 가능

 

아래는 block, inline, inline-block을 사용해본 예시입니다.

 

See the Pen display basic by cmp (@cmpset) on CodePen.

block 형식은 width, height를 이용해 사이즈 조절이 가능하며, 사이즈를 조절하더라도 한 줄을 전부 차지하고 있는 모습을 볼 수 있습니다.

 

inline 형식은 작성한 만큼만 영역을 차지합니다. 또한 span2를 통해 크기 조절이 불가능한 것도 확인할 수 있습니다.

 

한편 inline 형식은 작성한 만큼 영역을 차지하며, 크기 조절도 가능한 모습을 확인할 수 있습니다.

 

 

4. none

none 속성은 요소를 화면에 출력하지 않게 하는 속성입니다. 요소가 화면에 출력되지만 않을 뿐, 삭제되지는 않습니다.

none 속성과 유사해보이는 속성으로  visibility: hidden  이 있습니다. 그러나  visibility: hidden  은 요소를 투명한 형태로 출력하는 속성으로, 출력을 하지 않는 속성인 none과 다릅니다.

 

See the Pen Untitled by cmp (@cmpset) on CodePen.

앞서 보여드린 예시에서 inline-block1 요소에 display: none 속성을 추가했습니다.

 

그 결과 inline-block1요소가 더 이상 화면에 보이지 않게 되었습니다.

 

그러나 inline-block2 요소의 자리는 바뀌지 않았는데 이를 통해 none 속성은 출력만 하지 않는 속성임을 확인할 수 있습니다.

5. flex

flex 속성은 레이아웃과 관련된 속성입니다.

flex 레이아웃은 요소가 정렬되는 방향과 간격을 유연하게 처리해서 배치합니다.

 

6. grid
grid 속성도 마찬가지로 레이아웃과 관련된 속성입니다.

grid 레이아웃에서는 수평선, 수직선이 교차해서 만들어진 집합체, grid 위에 요소를 배치하게 됩니다.