CSS Display 와 Visibility

display 속성은 요소가 표시되는 경우 어떻게 표시할 지를 지정하고, visibility 속성은 요소를 표시할 지 또는 숨길 지를 지정합니다.

display:none

visibility:hidden

Reset

요소를 숨기기 - display:none 또는 visibility:hidden

요소를 숨기기는 display 속성을 “none” 또는 visibility 속성을 "hidden"으로 설정하여 수행 할 수 있습니다. 그러나, 이러한 두 가지 방법은 다른 결과를 준다 :

display:none 요소를 숨깁니다. 그리고 어떤 공간도 차지하지 않습니다. 요소는 숨겨지게 되고, 요소가 없었던 것처럼 페이지가 표시 될 것입니다 :

h1.hidden {
display: none;
}

visibility:hidden 는 요소를 숨깁니다, 하지만 여전히 이전과 동일한 공간을 차지합니다. 요소는 숨겨져 있지만, 여전히 레이아웃에 영향을 미칠 것입니다.

h1.hidden {
visibility: hidden;
}

block 요소는 사용 가능한 전체 폭을 차지, 이전과 그 다음에 줄 바꿈이 있는 요소입니다.

Examples of block elements:

inline 요소는 필요한 만큼의 폭 만을 차지, 줄 바꿈을 강제로 하지 않습니다..

Examples of inline elements:

인라인 요소를 블록 요소로 변경, 또는 그 반대로 하는 것은 페이지가 특정 방법으로 보이게 하면서도 여전히 웹 표준을 준수 하도록 하게 하는데 유용하다..

다음은 인라인 요소로 목록 항목을 표시합니다 :

li {
display: inline;
}

Try it yourself »

다음 예제는 span 요소를 block 요소로 디스플레이 한다:

span {
display: block;
}

Try it yourself »

	Note: 요소의 display 속성을 설정하는 것은 요소가 표시되는 방법 만을 변경하는 것이지, 요소의 종류를 바꾸는 것은 아니다. 그래서, display:block 인 inline 요소는 그 안에 다른 블록 요소를 가질 수 없습니다.

Differences between display: none; and visibility: hidden;
This example demonstrates display: none; versus visibility: hidden;

Using CSS together with JavaScript to show content
This example demonstrates how to use CSS and JavaScript to show an element on click.