CSSBattle

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>