- inline-block 속성을 가진 요소에게 height를 설정하는 것은 조금 까다로운 문제입니다.
- 일반적으로 height는 block 속성을 가진 요소에서만 지정할 수 있습니다. inline-block 속성을 가진 요소에서 height를 지정하면, 요소의 높이는 height 값으로 설정되지 않고, 내부 컨텐츠의 높이에 따라 동적으로 결정됩니다.
하지만, 만약 부모 요소의 높이가 명시되어 있거나, 부모 요소의 높이가 상속되어 자식 요소에게 전달되는 경우에는 다음과 같이 height: 100%를 적용하여 inline-block 요소의 높이를 부모 요소의 높이에 맞출 수 있습니다:
<div class="container">
<div class="child"></div>
</div>
.container {
height: 200px;
}
.child {
display: inline-block;
height: 100%;
width: 50%;
background-color: red;
}위의 코드에서는 부모 요소인 .container에게 높이를 명시하였으며, 자식 요소인 .child에게 높이를 100%로 설정하였습니다. 이 경우 .child 요소는 부모 요소의 높이를 100%로 상속받아 부모 요소의 높이에 맞게 높이가 조절됩니다.
그러나, 만약 부모 요소의 높이가 명시되어 있지 않고, 부모 요소의 높이가 상속되지 않은 경우에는 다른 방법을 사용해야 합니다. 예를 들어, 부모 요소에게 position: relative 속성을 적용하고, 자식 요소에게 position: absolute와 height: 100%를 적용하는 방법이 있습니다. 이 방법은 다소 복잡하지만, inline-block 요소에게도 높이를 적용할 수 있는 방법 중 하나입니다.
programmerD