๐จ
CSS Challenge
Practice problems to implement target designs by writing CSS
Challenge 1 / 30
์นด๋ ์ปดํฌ๋ํธ
๊ทธ๋ฆผ์์ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ๊ฐ ์๋ ์นด๋๋ฅผ ๋ง๋์ธ์. ํธ๋ฒ ์ ์ฝ๊ฐ ์๋ก ์ฌ๋ผ์ค๋ ํจ๊ณผ๋ ์ถ๊ฐํ์ธ์.
์นด๋ ์ปดํฌ๋ํธ
๊ทธ๋ฆผ์์ ๋ฅ๊ทผ ๋ชจ์๋ฆฌ๊ฐ ์๋ ์นด๋๋ฅผ ๋ง๋์ธ์. ํธ๋ฒ ์ ์ฝ๊ฐ ์๋ก ์ฌ๋ผ์ค๋ ํจ๊ณผ๋ ์ถ๊ฐํ์ธ์.
HTML Structure
<div class="card">
<h3>์นด๋ ์ ๋ชฉ</h3>
<p>์นด๋ ๋ด์ฉ์
๋๋ค.</p>
</div>Write CSS
๐ฏ Target Result
This is the targetโจ My Result
Live preview๐ Reference: Target CSS Code(Click to expand)
.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;
}๐ Tips
- โข Write CSS to see real-time preview in the 'My Result' area on the right.
- โข Compare 'Target Result' on the left with 'My Result' on the right to match the target.
- โข Click hint button to see helpful hints.
- โข Expand 'Reference: Target CSS Code' below to see the answer CSS.
๐ฏ How to Use
1Select a challenge from the top.
2Write CSS code in the left CSS writing area.
3See real-time preview on the right.
4Click check button to verify your answer.