LEE.SOL > CSSBattle > Daily Targets (260321)

Daily Targets (260321)

코드

<p><p r><p s>
<style>
  &>* {
    display: grid;
    place-items: center;
    background: #983C50
  }
  
  p {
    grid-area: 1 / 1;
    width: 280;
    height: 30;
    /* 원형 그라디언트로 원 표현. 이미지 크기를 설정해 반복적으로 원이 나타나게 함 */
    background: radial-gradient(#fff 15px, #983C50 0) 0 / 40px 40px
  }
  
  [r] {
    /* 수직 방향으로 회전 */
    transform: rotate(90deg)
  }

  [s] {
    z-index: 1;
    /* 사각형 표현 */
    width: 110;
    background: #3D101A
  }
</style>