1. 기본 UI 만들기(1) - 이미지를 클릭하면, 글이 나오는 카드 만들기

프로세스

1. 블록 안에, 글들을 전부 적는다.
2. 블록에 백그라운드 이미지를 넣는다.
3. 버튼을 누르면 클래스 이름이 변경되고, 백그라운드 이미지를 없앤다.

 

 

코드

    < 컴포넌트 >
        const [imgOn, setImgOn] = useState<boolean>(true);

        const Component = ()=> {
                ...
            const changeStyle = () => {
                setImgOn((prev) => !prev);
            };
                let msStyle;
            
            if (imgOn) {
                msStyle = styles.imgOn;
            } else {
                msStyle = styles.imgOff;
            }

            return (
                ...
                <div className={msStyle} onClick={changeStyle}>
                	<p> 안에 담길 글들 ... </p>
                </div>

    < CSS >
        .imgOn {
            width: 10rem;
            height: 10rem;
            background-color: antiquewhite;
            color: black;
-           background-image: url("/public/images/introduce/icons8-user-100.png");	// 백그라운드
        }
        .imgOff {
            width: 10rem;
            height: 10rem;
            background-color: antiquewhite;
            color: black;
-           background-image: none;	// 제거
        }