인프런 커뮤니티 질문&답변

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

MainImage 내의 스타일링 사라지는 문제

작성

·

259

0

(이미지 올리려고 5번 새로 썼는데 안되서 글로만 남깁니다)

안녕하세요 선생님! 강의 정말 잘 듣고 있습니다.

LandingPage에서 MainImage로 볼 수 있는 영화 포스터 이미지는 처음 로딩됐을 때 창을 줄이면 같이 줄어들고,

width 안에 꽉 차 있습니다

더 보기 버튼을 눌러 새로운 영화 목록을 받아오거나, Detail 페이지로 넘어가면

이미지가 창을 줄여도 너비가 고정되고, 바둑판식으로 반복됩니다

확인해보니 CSS의 스타일링이 사라지는 문제인데,

원인이 무엇인지, 어떻게 해결할 수 있는지 궁금합니다!

<처음 MainImage의 스타일링>

<div style="background: linear-gradient(rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.65) 100%) center center / 100% no-repeat, url("https://image.tmdb.org/t/p/w1280/8s4h9friP6Ci3adRGahHARVd76E.jpg") center center / cover, rgb(28, 28, 28); width: 100%; height: 500px; position: relative;">

<더 보기 버튼을 누르거나 Detail 페이지로 이동했을 때 MainImage의 스타일링>

<div style="background: linear-gradient(rgba(0, 0, 0, 0) 39%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.65) 100%), url("https://image.tmdb.org/t/p/w1280/3OwaKVZf3A2NdnarqKbwzFEhKir.jpg"), rgb(28, 28, 28); width: 100%; height: 500px; position: relative;>

감사합니다.

css javascript mongodb 웹앱 express react nodejs

답변 1

0

질문자

해결했습니다.

<div style={{
            backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0)
                            39%, rgba(0,0,0,0)
                            41%, rgba(0,0,0,0.65)
                            100%),
                            url(${props.image})`,
            backgroundPosition: 'center center',
            backgroundSize: '100%, cover',
            backgroundRepeat: 'no-repeat',
            width: '100%',
            height: '500px',
            position: 'relative'
        }}>

이렇게 변경하면 스타일이 사라지지 않네요

작성한 질문수