<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">div</span>&nbsp;<span style="color: #9cdcfe;">style</span>=<span style="color: #569cd6;">{</span>{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">background</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #ce9178;">`linear-gradient(to&nbsp;bottom,&nbsp;rgba(0,0,0,0)</span></div>
<div><span style="color: #ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;39%,&nbsp;rgba(0,0,0,0)</span></div>
<div><span style="color: #ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;41%,&nbsp;rgba(0,0,0,0.65)</span></div>
<div><span style="color: #ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%),</span></div>
<div><span style="color: #ce9178;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url('</span><span style="color: #569cd6;">${</span><span style="color: #9cdcfe;">props</span>.<span style="color: #9cdcfe;">image</span><span style="color: #569cd6;">}</span><span style="color: #ce9178;">'),&nbsp;#1c1c1c`</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">height</span><span style="color: #9cdcfe;">&nbsp;:</span>&nbsp;<span style="color: #ce9178;">'500px'</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">backgroundSize</span><span style="color: #9cdcfe;">&nbsp;:</span>&nbsp;<span style="color: #ce9178;">'100%,&nbsp;cover'</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">backgroundPosition</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">'center,&nbsp;center'</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">width</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">'100%'</span>,</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">position</span><span style="color: #9cdcfe;">:</span><span style="color: #ce9178;">'relative'</span></div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<span style="color: #569cd6;">}</span><span style="color: #808080;">&gt;</span></div>
</div>
<p>이 부분은 직접 만드신건가요? 아니면 Document 를 참고하신건가요?</p>
<p></p>

<p>안녕하세요 Zero 님&nbsp;&nbsp;<br />CSS 부분은 제가 잘 못해서 Codepen 이나 블로그나&nbsp; 다른 사이트가서 Css를 참조합니다 ~ !&nbsp;</p>

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

MainImage.js의 background 설정은 직접 만드신건가요?