display 속성

display: block : 이 값은 요소를 블록 레벨 요소로 만든다.

즉, 블록 컨트롤은 상위 컨테이너의 전체 너비를 차지하고 해당 요소 뒤에 새 줄을 작성하여 줄바뀜이 일어난다.

일반적인 블록 레벨 요소에는 <div>, <h1>, <p> 및 <form>이 있다.

<div class="block-element">This is a block-level element</div>

.block-element{
  display: block;
  width: 50%; /* takes up 50% of the parent container width */
  background-color: #ccc; /* adds a background color */
}

display: inline :필요한 만큼의 너비만 차지하고  줄바뀜이 일어나지 않는다. 

일반적인 인라인 요소로는 <span>, <a> 및 <img>가 있다.

<p>This is a <span class="inline-element">inline element</span> inside a paragraph.</p>

.inline-element{
  display: inline;
  color: blue; /* changes text color to blue */
}

display: none; : 이 값을 사용하면 요소가 보이지 않는다. 자바스크립트에서 보이고 안보이고를 제어할 때 주로 사용된다.

<div class="hide-element">This element will not be visible</div>

.hide-element{
  display: none;
}

 

display: inline-block ; : 인라인 블록 요소는 필요한 만큼의 너비만 차지하고 새 줄을 만들지 않는다는 점에서 인라인 요소와 유사하다. 그러나 인라인 요소와 달리 인라인 블록 요소는 지정된 너비와 높이를 가질 수 있으며 패딩과 여백을 적용할 수 있다. 컨트롤이 한줄로 나열되다가 상위 컨테이너의 폭을 넘어가게 되면 줄바뀜이 일어난다.

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.item {
  display: inline-block; /* makes the items inline-block elements */
  width: 200px; /* specifies a width for the items */
  height: 100px; /* specifies a height for the items */
  padding: 10px; /* adds padding to the items */
  margin: 10px; /* adds margin to the items */
  background-color: #ccc; /* adds a background color to the items */
}

이 예에서 "항목" 클래스가 있는 div 요소는 인라인 블록 요소로 설정되어 있으므로 동일한 선에 표시되지만 특정 너비와 높이뿐만 아니라 패딩과 여백도 있다. 이렇게 하면 내용 크기에 맞게 조정할 수 있는 유연한 레이아웃을 만들 수 있다.

또한 인라인 블록 요소는 박스모델 계산을 위한 인라인 요소로 간주되므로 너비 및 높이 특성에는 패딩과 테두리가 포함되지만 여백은 포함되지 않는다.

인라인 블록 값은 요소를 수평으로 나란히 배치할 때 유용하지만, 컨트롤의 치수와 간격을 제어할 수 있는 기능이 있을 때 유용하다.

table 또는 display의 flex속성을 사용하지 않고 그리드와 같은 레이아웃을 만들 수 있는 좋은 방법이다.