Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요, seonjukim님. 백그라운드 이미지 설정에 문제가 있으시군요.

<Frame> 에서는 이미지를 로드할 경우, 텍스트를 덮는 형태로 구현됩니다. 따라서 아래와 같이 2개의 <Frame>을 구현하게 되면 이미지 위로 텍스트가 로드됩니다.

import { Frame } from "framer"

export default function MyComponent(props) {
    return (
        <>
            <Frame
                position="absolute"
                width={"100%"}
                height={100}
                style={{ fontSize: 16, fontWeight: 800, color: "black" }}
                background={{
                    src: props.image,
                }}
            ></Frame>
            <Frame width={"100%"} height={100} background={"none"}>
                {props.text}
            </Frame>
        </>
    )
}

다만, 위와 같은 형태로 마크업을 하게되면 디자인이 복잡해질수록 코드가 배로 복잡해집니다. 프레이머의 최신 라이브러리인 <motion.div>를 사용하면 아래와 같은 문법으로 작성이 가능해요.

import { motion } from "framer-motion"

export default function MyComponent(props) {
    return (
        <motion.div
            style={{
                width: "100%",
                height: 100,
                fontSize: 16,
                fontWeight: 800,
                color: "black",
                position: "relative",
                backgroundImage: "url(" + props.image + ")"
            }}
        >
            {props.text}
        </motion.div>
    )
}

강의를 촬영한 것도 1년 이상 지나 그동안 프레이머가 많이 업데이트가 되었는데요. 빠른 시일 내에 새로운 버전의 프레이머 강의를 공유드리도록 할게요.

강의 봐주셔서 감사합니다. :)