[CSS] display 속성 - block, inline, inline-block, none

display 속성: block, inline, inline-block, none

• CSS로 각 요소의 속성도 변경이 가능함에 따라 interactive한 웹 구현을 위해 각 요소에 클래스를 부여하여 각 요소들의 display 속성을 바꿀 수 있다.

1) block 요소:

ex) header, footer, p, li, table, div, h1

• block 요소 바로 옆의 같은 줄에는 다른 요소를 배치할 수 없다. 옆에 공간이 남아도 다음 block 요소는 다음 줄로 넘어가게 된다.
• block 요소의 width는 부모 태그의 가로 전체 너비와 같고, 세로 크기는 해당 태그 내부에 있는 내용이나 요소의 크기에 의해 결정되나, 별도로 width나 height를 설정할 수 있다.

2) inline 요소:

ex) span, a, img, strong 태그

• inline 요소들은 줄 바꿈 없이 바로 옆에 다른 요소를 위치시킬 수 있다.
• 각 요소의 width, height 크기 설정이 불가능하다.
  (img태그만 예외)
• CSS property: display, float를 이용하여 inline 속성을 부여할 수 있다.

.inlineP {
display: inline-block;
}

.floatLeft {
float: left;
}

3) inline-block 요소:

• inline 요소와 같이 줄 바꿈 없이 옆에 다른 요소를 가질 수 있고, block 요소의 특징과 같이 width, height 크기 설정이 가능하다.

4) none:

• 화면에서 해당 요소가 보이지 않게 하는 것으로, script 태그와 같이 일부 요소들은 none을 기본값으로 갖는다.
• JavaScript와 사용하여 특정 요소를 숨기거나 다시 보여지게 할 때 이용된다.

[참고] 'visibility: hidden'; vs 'display: none';

• display 속성을 사용할 경우 아예 페이지에 해당 요소가 존재하지 않는 것처럼 보이게 하는 반면, visibility 속성을 사용할 경우에는 요소의 내용은 보이지 않으나 여전히 해당 요소 크기만큼의 공간은 남아있다는 차이점이 있다.