CSS 레이아웃 - display 속성

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

display 속성

display 속성은 요소를 어떻게/어떻게 표시할지 정의합니다.

모든 HTML 요소는 기본적으로 display 값을 가지고 있으며, 요소 타입에 따라 다릅니다. 대부분의 요소의 기본 display 값은 block 또는 inline。

面板을 표시하려면 클릭하세요

이 패널은 숨겨져 있는 <div> 요소를 포함하고 있습니다.（display: none)

그것은 CSS에서 스타일을 설정하며, 우리는 JavaScript를 사용하여 그것을 표시합니다。（변경하여 display: block)

블록 요소(block element)

블록 요소는 항상 새 줄을 시작하며 가능한 한 왼쪽과 오른쪽으로 확장하여 모든 너비를 차지합니다。

이 <div> 요소는 블록 요소입니다。

블록 요소의 몇 가지 예제：

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

행 내 요소(inline element)

인라인 요소는 새 줄을 시작하지 않으며 필요한 너비만 차지합니다。

이는 문단 내의행 내 <span> 요소。

행 내 요소의 몇 가지 예제：

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

Display: none;

display: none; JavaScript와 함께 사용되어 요소를 숨기고 표시할 수 있으며, 요소를 삭제하고 다시 생성하지 않아도 됩니다. 이 목표를 달성하는 방법에 대해 알고 싶다면, 이 페이지의 마지막 예제를 확인하세요。

기본적으로<script> 요소는 display: none;。

기본 Display 값 대체

그리고 이전에 설명한 것처럼, 각 요소는 기본 display 값이 있습니다. 그러나 그 값을 대체할 수 있습니다.

행 내 요소를 블록 요소로 변경하거나 반대로 변경하면, 페이지가 특정 방식으로 표시되면서 여전히 웹 표준을 준수하는 데 매우 유용합니다。

일반적인 예제로는 수평 메뉴를 구현하기 위해 행 내 요소를 생성하는 것입니다： <li> 요소：

예제

li {
  display: inline;
}

직접 시도해보세요

주의하세요：요소의 display 속성을 설정하면요소의 표시 방식그리고 요소의 종류는 변경되지 않습니다. 따라서 display: block; 행 내 요소는 다른 블록 요소를 포함할 수 없습니다。

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

예제

span {
  display: block;
}

직접 시도해보세요

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

예제

a {
  display: block;
}

직접 시도해보세요

숨기기 요소 - display:none 还是 visibility:hidden？

display:none

visibility: hidden

리셋

다음과 같이 display 속성을 설정합니다 none 요소를 숨길 수 있습니다. 이 요소는 숨겨지게 되며 페이지는 그 요소가 없는 것처럼 보일 것입니다：

예제

h1.hidden {
  display: none;
}

직접 시도해보세요

visibility: hidden; 요소를 숨길 수도 있습니다。

그러나 이 요소는 여전히 이전과 같은 공간을 차지할 것입니다. 요소는 숨겨지지만 레이아웃에 영향을 미칠 것입니다：

예제

h1.hidden {
  visibility: hidden;
}

직접 시도해보세요

더 많은 예제

display: none;와 visibility: hidden; 간의 차이점
display: none;와 visibility: hidden; 간의 차이
CSS와 JavaScript를 결합하여 내용을 표시
이 예제에서는 CSS와 JavaScript를 사용하여 클릭 시 요소를 표시하는 방법을 보여줍니다.

CSS Display/Visibility 속성

속성 설명
display 요소가 어떻게 표시되어야 하는지 지정합니다.
visibility 지정된 요소가 보이여야 하는지 지정합니다.