[CSS] display 속성 정리(block, inline, inline-block 등)

반응형

display

웹사이트를 만들 때 중요한 것 중 하나가

박스 또는 콘텐츠를 원하는 사이즈로, 원하는 자리에 잘 배치하는 것이다.

그러기 위해서는 display, position에 대해 정확히 이해하고 있어야 한다.

우선 display 속성에 대해 알아보자.

 

display는

요소를 block level 과 inline level 중 어떤 성격으로 배치할지를 설정하는 속성이다.

 

display: none | inline | block | inline-block;

 

1. display: inline;

content 만큼의 크기를 갖는다.

요소가 줄 바꿈 없이 다른 요소와 같은 줄에 배치된다.

width 와 hekght, margin-top, margin-bottom, float 설정을 할 수 없다.

 

2. display: block;

height 는 content 만큼의 크기를 갖지만, width 는 부모 요소 width 의 100%를 기본으로 갖는다.

요소가 줄 바꿈 되어 다른 요소가 있는 다음 줄에 배치된다.

width 와 hekght, margin-top, margin-bottom, float 설정을 할 수 있다.

 

3. display: inline-block;

inline 과 block 의 특성을 동시에 갖는다.

inline 요소처럼 요소가 줄 바꿈 없이 다른 요소와 같은 줄에 배치되지만

block 요소처럼 크기나 여백을 자유롭게 설정할 수 있다.

 

4. display: none;

요소를 렌더링 하지 않게 하여 아예 보이지 않도록 설정한다.

화면에서 요소를 숨기고, 공간을 차지하지 않게 한다.

이건과 비교하여 화면에서 화면에서 요소를 숨기지만 공간을 남기는 속성이 visiblity: hidden; 이다.