Daily Targets (260402)
코드
<p z><p c y><p s><p c s><p s><p c t><p t>
<style>
body {
display: grid;
place-items: center;
grid-template-columns: 1fr 1fr 1fr;
margin: 30px auto;
width: 240;
height: 240;
background:#F2EAA8
}
p {
/* 사각형 */
width: 80;
height: 80;
margin: 0;
background: #73AB7C
}
[c] {
/* 원 표현 */
width: 60;
height: 60;
border-radius: 50%;
background: #EE7667
}
[z] {
/* 그리드로 위치 지정 */
grid-area: 1 / 2;
}
[y] {
grid-area: 1 / 3;
}
[s] {
grid-area: 2;
}
[t] {
grid-area: 3;
}
</style>