js_이미지 위에 컴포넌트를 올릴때

난 지금까지 도른 방법으로 컴포넌트를 구성하고 있었다
이미지 위에 뭘 올리려면 (flutter의 stack방식 생각하면 좋을거같다)
그냥 냅다 absolute top-~ 박아버리고 시작했었는데,

이거 진~짜 진~짜 안좋은 방법이다;; 이렇게 짜면 반응형이 아예 불가능함

예를 들어서 밑의 코드를 보자

return (
    <div className="w-full flex flex-col items-center justify-center overflow-hidden">
      <Image
        src={bgImg}
        width={500}
        height={undefined}
        className="absolute h-[100vh] top-0"
        alt="bgColor"
      />
      <Image
        src={oneului}
        width={500}
        height={undefined}
        className="absolute top-52 w-[240px] h-[170px] "
        alt="bgColor"
      />
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
        <span className="text-white text-[20px] font-thin">
          오늘 날씨에 맞는 옷차림을 보고 싶은
        </span>
        <br />
        <span className="text-white text-[20px] font-thin">
          사람들을 위한 서비스, 오늘의
        </span>
      </div>

      <div className="flex-col absolute inset-x-0 bottom-20 flex  items-center space-y-4">
        <button
          onClick={handleMain}
          className=" text-[17px] font-middle bottom-40 bg-[#6595FF] text-white w-[45vh] h-[7vh] flex items-center justify-center rounded-[50px] transition-transform hover:scale-95"
        >
          바로 시작하기
        </button>
        <button
          onClick={handleButtonClick}
          className=" text-[17px] font-middle bottom-40 bg-[#ccc] text-black w-[45vh] h-[7vh] flex items-center justify-center rounded-[50px] transition-transform hover:scale-95"
        >
          구글 로그인
        </button>
      </div>
    </div>
  );

여기서 내가 한 방식 : img 두 개 모두 absol 넣어버리고 나머지 컴포넌트들도 모두 absolute 적용,,,, 이러면 뭐...반응형 생각하면 말도 안되는 일이다..

위의 코드는 아래와같이 바꿀수있다. 반응형은 grid로 만들어야 하는거 잊지말자

return (
    <div className="relative w-full h-screen flex flex-col items-center justify-center overflow-hidden">
      <div className="relative w-full h-full">
        <Image
          src={bgImg}
          layout="fill"
          objectFit="cover"
          className="z-0"
          alt="Background Image"
        />
        <div className="absolute inset-0 flex flex-col items-center justify-center z-10">
          <Image
            src={oneului}
            width={240}
            height={170}
            alt="Logo"
            className="mb-8"
          />
          <div className="text-center mb-16">
            <span className="text-white text-[20px] font-thin block">
              오늘 날씨에 맞는 옷차림을 보고 싶은
            </span>
            <span className="text-white text-[20px] font-thin block">
              사람들을 위한 서비스, 오늘의
            </span>
          </div>
        </div>
      </div>

      <div className="flex flex-col items-center space-y-4 z-20">
        <button
          onClick={handleMain}
          className="text-[17px] font-medium bg-[#6595FF] text-white w-[45vh] h-[7vh] flex items-center justify-center rounded-[50px] transition-transform hover:scale-95"
        >
          바로 시작하기
        </button>
        <button
          onClick={handleButtonClick}
          className="text-[17px] font-medium bg-[#ccc] text-black w-[45vh] h-[7vh] flex items-center justify-center rounded-[50px] transition-transform hover:scale-95"
        >
          구글 로그인
        </button>
      </div>
    </div>
  );