[CSS] inline표시, block특성 {inline-block: }

'inline-block'은 요소에 적용할 수 있는 표시 속성 값으로, 일부 블록 수준 속성을 사용하여 인라인 요소처럼 동작하도록 합니다. 요소를 'inline-block'으로 설정하면 너비, 높이, 여백 및 패딩과 같은 특정 블록 수준 속성을 준수하면서 주변 텍스트 콘텐츠 내에서 인라인 수준 요소로 흐릅니다.

'inline-block' 속성은 인라인 요소와 유사하게 요소를 가로로 서로 옆에 배치하고 싶지만 여전히 블록 수준 요소와 마찬가지로 크기와 간격을 제어하려는 경우에 유용합니다.

CSS에서 inline-block을 사용하는 방법은 다음과 같습니다.

.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  border: 1px solid black;
}

위의 예에서는 CSS 클래스 .inline-block-element를 만들고 여기에 display: inline-block을 적용했습니다. 이 클래스는 인라인 블록으로 표시하려는 요소의 스타일을 지정하는 데 사용됩니다.

width, height, margin, padding 및 border 속성은 블록 수준 요소와 마찬가지로 작동합니다. 요소는 100픽셀의 고정 너비, 50픽셀의 고정 높이, 모든 면에 10픽셀의 여백, 모든 면에 5픽셀의 패딩, 너비 1픽셀의 검은색 테두리를 갖습니다.

이제 HTML에서 .inline-block-element 클래스를 사용하는 방법을 살펴보겠습니다.

<div class="inline-block-element">Element 1</div>
<div class="inline-block-element">Element 2</div>
<div class="inline-block-element">Element 3</div>

이 예에서는 display: inline-block 속성이 적용된 3개의 div 요소가 가로로 표시됩니다. 이들은 인라인 수준 요소로 취급되며 상위 컨테이너 내에서 서로 옆에 배치됩니다. 또한 요소는 지정된 너비, 높이, 여백, 패딩 및 테두리 속성을 준수하므로 인라인으로 흐르는 사용자 정의 크기 및 간격 요소를 만들 수 있습니다.

'inline-block' 요소에는 HTML 마크업의 인라인 요소 사이에 내재된 공백으로 인해 일부 간격 문제가 있을 수 있다는 점을 인식하는 것이 중요합니다. 이를 극복하기 위해 부모 컨테이너에 글꼴 크기: 0을 설정하거나 HTML 코드에서 수동으로 공백을 제거할 수 있습니다. 또는 float 또는 flexbox를 사용하여 공백 문제 없이 유사한 레이아웃 동작을 얻을 수 있습니다.