20.09.25 12:46 작성
·
346
답변 2
1
2020. 09. 25. 13:36
간단하게 할 수 있는건 두 가지 방법이 있습니다.
(1) .card-image의 위쪽 .card-desc의 아래쪽에 border-radius를 넣어주는 방법
.card-image { border-radius: 10px 10px 0 0; }
.card-desc { border-radius: 0 0 10px 10px; }
(2) 컨테이너 역할을 할 엘리먼트를 추가하는 방법
이 경우는 .card-item에는 flex를 적용하실 필요가 없습니다.
.card-content {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
border-radius: 10px;
}
<li class="card-item">
<div class="card-content">
<figure class="card-image" style="background-image: url(images/ilbuni.png)">
<img src="images/ilbuni.png" alt="일분이">
</figure>
<div class="card-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic, perferendis? dolor sit, amet consectetur adipisicing elit. Hic, perferendis?
</div>
</div>
</li>
0