CSSBattle

Daily Targets (260327)

코드
<!-- 두 개의 p 요소로 사각형 도형 2개 생성 -->
<p><p>
<style>
  /* body 대체 선택자: flex로 중앙 정렬 레이아웃 구성 */
  &>* {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    background: #3F4869
  }
  
  p {
    width: 60;
    height: 60;
    background: #fff;
    /* 좌하단으로 100px 이동, spread 100px로 큰 연두색 배경 영역 생성 */
    box-shadow: -100px 100px 0 100px #B5BD49;

    /* 인접 형제 선택자: 두 번째 p를 180도 회전하여 대칭 배치 */
    &+& {
      transform: rotate(180deg)
    }
  }
</style>