-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
border-radius에 관해 질문드립니다.
20.09.25 12:46 작성 조회수 258
0
강의중에서 말씀하신대로 padding을 0 1rem을 주면 각 card-item이 떨어져서 한줄에 3개씩보여질때 효과적이지만,
강의에서 나온 card는 사각형이라 상관없지만, 만약 card에 radius를 주고싶다면 li에 padding을 주었기때문에 작동하지않습니다.
card가 사각형이 아니라 원형을 주고싶을땐 어떻게 설정해야할까요?
desc / img 에 각각 radius를 주면 이상하게 나오고.. li자체는 50%라 li에 주게되면 간격이 꽉차는 현상이 나옵니다.
답변을 작성해보세요.
1
1분코딩
지식공유자2020.09.25
간단하게 할 수 있는건 두 가지 방법이 있습니다.
(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
답변 2