Daily Targets (260324)
코드
<!-- p: 노란 사각형, c 속성: 어두운 타원, l 속성: 맨 아래 요소 간격 조정 -->
<!-- column-reverse로 아래→위 순서 배치 -->
<p><p c><p><p c><p><p c><p l>
<style>
/* body 직계 자식: 역순 세로 배치, 하늘색 배경 */
&>* {
display: flex;
flex-direction: column-reverse;
background: #4FA9C0
}
/* 노란 사각형, 음수 margin으로 겹침 */
p {
position: relative;
width: 50;
height: 50;
margin: -10 auto 0;
background: #F4DA64
}
/* 어두운 타원형 블록, 노란 블록 위로 겹침 */
[c] {
width: 220;
height: 60;
margin: -30 auto 0;
border-radius: 50%;
background: #2B2A4A
}
/* 맨 아래(첫 번째) 요소의 상단 여백 조정 */
[l] {
margin-top: 12
}
</style>