CSSBattle

Daily Targets (260505)

코드
<p><i></i></p>
<p r><i></i></p>
<p r><i></i></p>
<p><i></i></p>
<style>
  body {
    display: flex;
    flex-wrap: wrap;
    width: 200;
    height: 200;
    margin: 50 100;
    background: #C0D6E7
  }

  p {
    /* 정사각형 */
    display: flex;
    width: 100;
    height: 100;
    margin: 0;
    background: #3F4869
  }

  i {
    /* 사각형 내 원 */
    width: 70;
    height: 70;
    border-radius: 50%;
    margin: 15;
    background: #E25C57
  }

  [r] {
    background: #E25C57;

    i {
      background: #3F4869
    }
  }
</style>