CSS 표시 속성은 무엇이며 몇 가지 사용 예를 들어줄 수 있습니까?

CSS에서 display 속성은 요소의 외부 및 내부 표시 유형을 정의합니다. Critical Rendering Path의 레이아웃 생성 단계에서 박스 생성에 중요한 역할을 합니다.

display 속성은 outer 디스플레이와 inner 디스플레이의 두 값을 설정합니다.
outer 표시 값은 요소가 이웃과 관련하여 일반 흐름에서 상호 작용하는 방식을 정의합니다. 반대로 inner 디스플레이는 자식의 서식 컨텍스트 및 흐름 레이아웃, 즉 자식이 배치되고 서로 상호 작용하는 방법을 설정합니다.

요소와 해당 자식을 배치할 수 있는 방법에는 여러 가지가 있습니다. 가장 주목할만한 것은 inline , block , inline-block , table , flex , inline-flex 및 grid 입니다. 여기서는 inline 및 block 디스플레이 유형을 고려합니다.

인라인 요소<img> 또는 <span>와 같은 인라인 요소의 디스플레이는 기본적으로 inline로 설정됩니다. 인라인 요소의 outer 및 inner 표시 유형은 모두 inline 입니다. 이것은 그것들을 문서의 정상적인 흐름의 일부로 만들고 IFC(Inline Formatting Context)를 생성합니다. 즉, 자식이 IFC의 레이아웃 규칙을 따릅니다.
<span> 예를 들어 노드는 인라인 서식 컨텍스트의 규칙을 따릅니다. IFC에서 요소는 충분한 공간이 생길 때까지 같은 줄에 배열됩니다. 노드의 결합width이 컨테이너의width를 초과하면 새 줄이 추가됩니다. IFC에서 매우 중요한 차이점은 수직 마진과 패딩이 적용되지 않는다는 것입니다. 다음 코드에서

span {
  margin: 20px 10px;
  padding: 20px 10px;
}

세로 여백과 패딩이 인라인 요소의 줄 간격을 방해하기 때문에 20px의 세로 여백과 패딩은 완전히 무시됩니다.

명시적으로 display 를 block 로 설정하여 인라인 요소를 블록 요소로 전환할 수 있습니다. 이는 이미지를 자체 블록으로 이동하려는 경우에 유용합니다.

img {
  display: block;
}

블록 요소
블록 요소에는 display 유형 값이 모두 block 로 설정되어 있습니다. 인라인 요소와 마찬가지로 일반 흐름의 일부이기도 하지만 해당 자식은 BFC(Block Formatting Context) 규칙을 따릅니다.

블록 요소는 기본적으로 앞뒤에 한 줄 바꿈이 있으며 높이는 auto 값으로 자식 높이로 설정되고 컨테이너의 전체 너비를 차지합니다. 패딩, 테두리 및 여백은 네 면 모두에 적용됩니다. 자식에게도 동일한 동작이 적용됩니다.

일반적으로 블록 요소는 다른 블록 요소와 인라인 요소의 컨테이너로 사용됩니다. 예를 들어, <p> 요소는 블록 요소이며 <span> 태그, <quote> 태그, 텍스트 노드 등과 같은 인라인 요소를 포함하기 위한 것입니다.

블록 요소 내부의 인라인 요소는 블록 서식 컨텍스트에 따라 정상적인 흐름을 따릅니다. 정상적인 흐름에서 인라인 요소는 인라인 서식 컨텍스트를 형성합니다. 따라서 다음 단락:

<p>
  This is a paragraph with
  <span>some dummy content inside a span</span>
  . And another
  <span>span to just to make a point</span>.
</p>

스타일:

p {
  padding: 20px;
  margin: 10px;
  border: 1px solid gray;
}

span {
  padding: 20px;
  margin: 10px;
  border: 1px solid gray;
}

BFC에 따르면 단락 영역의 네 면 모두에 패딩, 테두리 및 여백이 적용됩니다. 그러나 범위 태그의 세로 패딩 및 여백(각각 위쪽 및 아래쪽 가장자리에 대해 20px 및 10px)은 인라인 서식 컨텍스트에 의해 적용되는 대로 무시됩니다.


참조

Display

Inline formatting contexts

Box generation