🎨
CSS 챌린지
CSS를 작성하여 목표 디자인을 구현하는 연습 문제
챌린지 1 / 30
카드 컴포넌트
그림자와 둥근 모서리가 있는 카드를 만드세요. 호버 시 약간 위로 올라오는 효과도 추가하세요.
카드 컴포넌트
그림자와 둥근 모서리가 있는 카드를 만드세요. 호버 시 약간 위로 올라오는 효과도 추가하세요.
HTML 구조
<div class="card">
<h3>카드 제목</h3>
<p>카드 내용입니다.</p>
</div>CSS 작성
🎯 목표 결과
이렇게 만들어야 합니다✨ 내 결과
실시간 미리보기📖 참고: 목표 CSS 코드(클릭하여 펼치기)
.card {
width: 300px;
padding: 24px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.card h3 {
margin: 0 0 12px 0;
font-size: 20px;
color: #1a1a1a;
}
.card p {
margin: 0;
color: #666;
line-height: 1.6;
}📌 안내사항
- • CSS를 작성하면 오른쪽 '내 결과' 영역에서 실시간으로 미리보기를 확인할 수 있습니다.
- • 왼쪽 '목표 결과'와 오른쪽 '내 결과'를 비교하여 목표와 똑같이 만들어보세요.
- • 힌트 버튼을 클릭하면 도움이 되는 힌트를 볼 수 있습니다.
- • 아래 '참고: 목표 CSS 코드'를 펼쳐서 정답 CSS를 확인할 수 있습니다.
🎯 사용 방법
1상단에서 원하는 챌린지를 선택하세요.
2왼쪽 CSS 작성 영역에 CSS 코드를 작성하세요.
3오른쪽에서 실시간으로 결과를 미리볼 수 있습니다.
4확인 버튼을 클릭하여 정답 여부를 확인하세요.