border-radius에 관해 질문드립니다.

CSS Flex와 Grid 제대로 익히기

Flex UI #7 - 카드 리스트

20.09.25 12:46 작성

346

강의중에서 말씀하신대로 padding을 0 1rem을 주면 각 card-item이 떨어져서 한줄에 3개씩보여질때 효과적이지만,

강의에서 나온 card는 사각형이라 상관없지만, 만약 card에 radius를 주고싶다면 li에 padding을 주었기때문에 작동하지않습니다.

card가 사각형이 아니라 원형을 주고싶을땐 어떻게 설정해야할까요?

desc / img 에 각각 radius를 주면 이상하게 나오고.. li자체는 50%라 li에 주게되면 간격이 꽉차는 현상이 나옵니다.

HTML/CSS flex

답변 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>

rhdlwmal1234

질문자

2020. 09. 28. 16:03

두가지 방법 모두 조금만 더 생각해보면 됐을텐데.. 정말 친절한 답변 감사드립니다!!^^

인프런 커뮤니티 질문&답변

border-radius에 관해 질문드립니다.