[CSS] CSS Display 속성 (block, inline, inline-block)

오늘은 CSS의 Display 속성에 대해서 알아볼 것이다.

 

Display 속성은 정말 간단하니 쉽고 빠르게 알아보자.

Display

display 속성은 HTML 요소를 어떻게 보여줄 것인지를 결정한다.

 

주로 4가지 속성이 쓰이는데, 각각의 태그마다(div, p, a, span) 기본 값이 다르다.

• none : 보이지 않음
• block : 블록 박스
• inline : 인라인 박스
• inline-block : block과 inline의 중간 형태

none

요소를 렌더링하지 않도록 설정한다.

 

이게 조금 재밌는게, display를 none으로 설정하면 화면을 아예 차지하지도 않는다.

block

block은 width 영역을 모두 100%로 채우며 block 다음에 등장하는 태그는 줄바꿈이 된 것 처럼 보인다.

block은 width, height 속성을 지정할 수 있고, block 요소 뒤에 등장하는 태그가 그 이전의 block 요소에 오른쪽에 배치될 수 있어서 항상 다음 줄에도 렌더링 된다.

 

대표족으로는 div, p, h, li태그가 해당된다.

inline

block과 달리 줄바꿈이 허용되지 않아서 width와 height를 지정할 수 없다.

inline 요소 뒤에 나오는 태그는 줄바꿈이 되지 않고 바로 오른쪽에 표시된다.

span, b, i, a 태그등이 해당된다.

inline-block

block과 inline의 중간 형태로 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있다.

즉 inline에 width와 heigth를 추가할 수 있게 하는 역할이라고 생각하면 편하다.

block vs inline vs inline-block

See the Pen JjXgvzo by onigiri (@dhslrl321) on CodePen.

---

이렇게 오늘은 block과 inline 그리고 inline-block에 대해서 알아보았다.

• block는 width와 heigth를 지정할 수 있다
• inline은 width와 heigth를 지정할 수 없다.
• inline-block은 inline에 width와 height를 지정할 수 있다.

그럼 inline-block이 매우 cool할 것 같지만 실상은 아니다.

그 이유는 다음 flex 시간에서 이야기 해 볼 것이다.

그런 이유로 flex라는 것이 각광받고 있고 다음을 기약하며 오늘은 여기서 마치도록 하겠다.