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>