display inline-block

CSS에서 표시 속성은 element의 레이아웃과 웹 페이지에 표시되는 방법을 제어하는 데 사용된다. 디스플레이 속성에는 여러 값이 있을 수 있으며, 그 중 하나는 inline-block이다.

표시 속성이 inline-block으로 설정되면 element는 인라인 element처럼 동작하지만(즉, 필요한 만큼의 너비만 차지하고 이후에는 새 줄을 만들지 않음) 너비와 높이가 설정될 수 있다.

예를 들어 클래스 "컨테이너"를 가진 <div> element가 있고 이를 인라인 블록 element로 표시하려고 한다고 가정하면 다음 CSS를 사용할 수 있다.

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

 

.container {
    display: inline-block;
}
.box {
    width: 30px;
    height: 30px;
    background-color: blue;
    margin: 10px;
    display: inline-block;
}

이렇게 하면 display inline-block이 있는 컨테이너 div가 생성되고 파란색 배경색, 너비와 높이가 30px, 여백이 10px인 박스 3개가 포함되며, 박스는 display inline-block이 있어 박스 폭이 컨테이너 폭보다 작기 때문에 줄바꿈없이 동일한 라인으로 표시된다.

인라인 블록을 사용할 때 element 사이의 공백에 몇 가지 문제가 발생할 수 있다. HTML 코드의 공백이나 줄 바꿈으로 인해 발생할 수 있다. 이 문제를 해결하려면 element 사이의 공백을 제거하거나 상위 element에서 0으로 설정된 글꼴 크기 속성을 사용할 수 있다.

.container {
    font-size: 0;
    display: inline-block;
}

이렇게 하면 상위 element에서 글꼴 크기를 0으로 설정하여 element 사이의 공백이 제거된다.

인라인 블록 element는 상위 element의 텍스트 정렬 속성을 사용하여 수평으로 정렬할 수 있다.

.container {
    display: inline-block;
    text-align: center;
}

이렇게 하면 용기 div 내부의 상자가 중앙에 정렬된다.

표시 속성은 웹 페이지의 element 레이아웃 및 동작에 큰 영향을 미칠 수 있으므로 주의하여 사용하는 것이 중요하다.