CSSBattle

Daily Targets (260514)

코드
<p>
  <i></i>
  <i s></i>
  <i t>
    <b></b>
  </i>
</p>
<p r>
  <i></i>
  <i s></i>
  <i t>
    <b b></b>
  </i>
</p>
<style>
  &>* {
    display: flex;
    justify-content: space-between;
    margin: 25 20;
    background: #6592CF
  }

  p {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 200;
    margin: 0
  }

  [r] {
    scale: -1 1
  }

  i {
    /* 직사각형 */
    width: 30;
    height: 200;
    background: #eee
  }

  [s] {
    /* 직사각형 높이, 색상 조절 */
    height: 170;
    background: #173889
  }

  [t] {
    height: 140
  }

  b {
    /* 직사각형에 붙어있는 정사각형 */
    display: block;
    position: relative;
    top: 50;
    left: 30;
    width: 40;
    height: 40;
    background: inherit
  }

  [b] {
    background: #173889
  }
</style>