반응형
<body className={`${inter.className} bg-gray-50 text-gray-950 relative`}>
<div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem]"></div>
<div className="bg-[#dbd7fb] absolute top-[-1rem] left-[-35rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem]"></div>
{children}
</body>
오른쪽 붉은 배경
<div className="bg-[#fbe2e3] absolute top-[-6rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem]"></div>
bg-[#fbe2e3]
bg- 는 배경 색상을 설정하는 클래스. #fbe2e3는 배경 색상.
absolute
위치를 absolute로 설정.
top-[-6rem]
위로 -6rem 이동.
-z-10
z-index 값을 -10으로 설정. 요소의 쌓임 순서를 정의.
right-[11rem]
오른쪽으로 11rem 이동.
h-[31.25rem]
높이를 31.25rem으로 설정.
w-[31.25rem]
너비를 31.25rem으로 설정.
rounded-full
완전히 둥글게 만든다. 원 모양을 만드는 데 사용.
blur-[10rem]
10rem의 블러 효과를 적용.
sm:w-[68.75rem]
스몰 스크린 크기에서 너비를 68.75rem으로 변경.
반응형
왼쪽 보라 배경
<div className="bg-[#dbd7fb] absolute top-[-1rem] left-[-35rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem]"></div>
bg-[#dbd7fb]
다른 배경 색상을 사용.
left-[-35rem]
왼쪽으로 -35rem 이동.
md:left-[-33rem]
lg:left-[-28rem]
xl:left-[-15rem]
2xl:left-[-5rem]
미디엄, 라지, 엑스트라 라지, 더블 엑스트라 라지 화면 크기에서 왼쪽 위치가 다르게 설정.
반응형
