CSS 레이아웃 display 속성

display 속성

display 속성은 요소의 표시 여부/방법을 지정합니다.

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

block 레벨 요소

블록 레벨 요소는 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 확장).

블록 레벨 요소의 예:

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

인라인 요소

인라인 요소는 새 줄에서 시작되지 않으며 필요한 만큼의 너비만 사용합니다.

인라인 요소의 예:

• <span>
• <a>
• <img>

Display: none;

display: none;는 자바스크립트에서 요소를 삭제하고 다시 생성하지 않고 요소를 숨기고 표시하기 위해 일반적으로 사용된다. 이 작업을 수행할 수 있는 방법을 알고 싶다면 이 페이지의 마지막 예를 참조하십시오.

<script> 요소는 display: none;를 기본값으로 사용합니다.

기본 표시 값 재정의

앞서 언급한 바와 같이 모든 요소에는 기본 표시 값이 있습니다. 그러나 이를 재정의할 수 있습니다.

인라인 요소를 블록 요소로 변경하거나 그 반대로 변경하면 페이지를 특정 방식으로 보이게 하는 데 유용할 수 있으며 웹 표준을 따릅니다.

일반적인 예는 수평 메뉴를 위한 인라인 <li> 요소를 만드는 것입니다.

예제 1

li {
  display: inline;
}

Note: 요소의 표시 속성을 설정하면 요소의 종류가 아니라 요소가 표시되는 방법만 변경됩니다. 따라서 display: block;이 있는 인라인 요소는 다른 블록 요소를 내부에 포함할 수 없습니다.

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

예제 2

span {
  display: block;
}

다음 예제에서는 <a> 요소를 블록 요소로 표시합니다.

예제 3

a {
  display: block;
}

요소 숨기기 - display: none;? visibility: hidden;?

요소를 숨기려면 display 속성을 none으로 설정하십시오. 요소가 숨겨지고 요소가 없는 것처럼 페이지가 표시됩니다.

예제 4

h1.hidden {
  display: none;
}

visibility:hidden; 요소도 숨깁니다.

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

예제 5

h1.hidden {
  visibility: hidden;
}