<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;"><img title="화면 캡처 2021-11-08 194231.jpg" src="https://cdn.inflearn.com/public/files/posts/31e6e13a-8390-4d2b-a9b8-38bea1032d61/화면 캡처 2021-11-08 194231.jpg" alt="" width="1920" height="967" /><img title="화면 캡처 2021-11-08 194242.jpg" src="https://cdn.inflearn.com/public/files/posts/198c3cab-e326-437e-8622-a7a225c0efd8/화면 캡처 2021-11-08 194242.jpg" alt="" width="899" height="393" />는 1:1 문의하기를 이용해주세요.<img title="화면 캡처 2021-11-08 194313.jpg" src="https://cdn.inflearn.com/public/files/posts/38b569c9-a94c-491e-b300-4babc1bca47f/화면 캡처 2021-11-08 194313.jpg" alt="" width="667" height="98" /></div>

안녕하세요 !!&nbsp;
<table class="highlight tab-size js-file-line-container" style="border-spacing: 0px; border-collapse: collapse; tab-size: 8; color: #24292f; font-family: -apple-system, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; font-size: 14px; background-color: #ffffff;" data-tab-size="8" data-paste-markdown-skip="">
<tbody style="box-sizing: border-box;">
<tr style="box-sizing: border-box; background-color: transparent;">
<td id="LC4" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"></td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L5" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="5"></td>
<td id="LC5" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">&lt;div style={{</td>
</tr>
<tr style="box-sizing: border-box; background-color: transparent;">
<td id="L6" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="6"></td>
<td id="LC6" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">background: `linear-gradient(to bottom, rgba(0,0,0,0)</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L7" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="7"></td>
<td id="LC7" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"> 39%,rgba(0,0,0,0)</td>
</tr>
<tr style="box-sizing: border-box; background-color: transparent;">
<td id="L8" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="8"></td>
<td id="LC8" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"> 41%,rgba(0,0,0,0.65)</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L9" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="9"></td>
<td id="LC9" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"> 100%),</td>
</tr>
<tr style="box-sizing: border-box; background-color: transparent;">
<td id="L10" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="10"></td>
<td id="LC10" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"> url('${props.image}'), #1c1c1c`,</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L11" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="11"></td>
<td id="LC11" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">height: '500px',</td>
</tr>
<tr style="box-sizing: border-box; background-color: transparent;">
<td id="L12" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="12"></td>
<td id="LC12" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">backgroundSize: '100%, cover',</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L13" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="13"></td>
<td id="LC13" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">backgroundPosition: 'center, center',</td>
</tr>
<tr style="box-sizing: border-box; background-color: transparent;">
<td id="L14" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="14"></td>
<td id="LC14" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">width: '100%',</td>
</tr>
<tr style="box-sizing: border-box;">
<td id="L15" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="15"></td>
<td id="LC15" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">position: 'relative'</td>
</tr>
<tr style="box-sizing: border-box; background-color: transparent;">
<td id="L16" class="blob-num js-line-number" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;" data-line-number="16"></td>
<td id="LC16" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;">}}&gt;</td>
</tr>
</tbody>
</table>
이거 한번 해보시겠어요 ?

Inflearn Community Q&A

무비디테일 메인 이미지 css가 안됩니다.


	<div style={{
	background: `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}'), #1c1c1c`,
	height: '500px',
	backgroundSize: '100%, cover',
	backgroundPosition: 'center, center',
	width: '100%',
	position: 'relative'
	}}>