display속성은 레이아웃을 제어하는 가장 중요한 CSS속성입니다.

display속성

display속성은 요소가 표시되는 여부를 지정합니다.

모든 HTML요소는 요소 유형에 따라 기본 표시 값을 갖고 있습니다. 대부분의 요소에 대한 기본 표시 값은 block또는 inline입니다.

블록 레벨 요소

블록 수준 요소는 항상 새 줄에서 시작하여 사용할 수 있는 전체(100%) 너비를 사용합니다.

블록 수준 요소의 예:

• <div>
  
• <h1> - <h6>
  
• <p>
  
• <form>
  
• <header>
  
• <footer>
  
• <section>
  

인라인 요소

인라인 요소는 새 줄에서 시작하지 않고 필요한 만큼만 너비를 차지합니다.

인라인 요소의 예:

<span>

<a>
<img>

display : none;

display:none;은 보통 자바스크립트를 이용하여 요소를 삭제하거나 다시 만들지 않고 그 요소를 숨길 때 사용합니다. 

기본 표시값 무효화하기

미리 언급한 대로 모든 요소에는 기본 표시값이 있습니다. 그러나 이것을 무효화할 수 있습니다.

인라인 요소를 블록요소로 변경하거나 그 반대로 변경하면 페이지를 특정 방식으로 보이게 하면서도 웹표준을 계속 따르게 할 수 있습니다.

일반적인 예는 <li>요소를 사용하여 인라인요소를 만들어 수평 메뉴를 만드는 것입니다.

li {
    display: inline;
}

** 요소의 표시속성을 설정하면 요소의 유형만 변경되고 요소의 종류는 변경되지 않습니다. 따라서 display:block;을 사용한 인라인요소안에 다른 블록 요소를 포함할 수 없습니다.

다음 예는 <span>요소를 블록요소로 표시합니다.

span {
    display: block;
}

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

display속성에 none을 설정하면 요소를 숨길 수 있습니다. 요소가 숨겨지고 요소가 없는 것처럼 페이지가 표시됩니다.

h1.hidden {
    display: none;
}

visibility:hidden; 이 또한 요소를 숨깁니다. 

그러나 요소는 이전과 동일한 공간을 차지합니다. 요소는 숨겨지지만 여전히 레이아웃에 영향을 줍니다.

h1.hidden {
    visibility: hidden;
}