CSSBattle

Daily Targets (260315)

코드
<p t><p u><p t><p m l><p c><p m r><p t><p d><p t>
<style>
  &>* {
    /* grid를 통해 3x3 배치 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0;
    background: #0B2429
  }

  p {
    width: 80;
    height: 80;
    background: #998235;
    margin: 0 auto
  }

  [t] {
    background: 0
  }

  [u] {
    height: 60
  }

  [m] {
    margin-top: 20
  }

  [l] {
    transform: translateX(3.4px)
  }

  [r] {
    transform: translateX(-3.4px)
  }

  [c] {
    /* 중앙 사각형 크기, 위치, 배경 조절 */
    width: 110;
    height: 110;
    background: #F3AC3C;
    transform: translateY(5px)
  }

  [d] {
    transform: translateY(30px)
  }
</style>