| site_link1 | |
|---|---|
| site_link2 | |
| site_link3 |
[javascript 샘플]
1. simple
<div class="card" style="background-image: url(https://placehold.it/300x200);">
...
</div>
위 코드에서 style="background-image: url(https://placehold.it/300x200);" 속성을 사용하여 card 컴포넌트의 background image를 설정합니다.
url() 함수를 사용하여 이미지의 URL을 지정합니다.
2. size 추가
<div class="card" style="background-image: url(https://placehold.it/300x200); background-size: cover;">
...
</div>
background image의 크기를 조정하려면 background-size 속성을 사용할 수 있습니다.
위 코드는 background image를 card 컴포넌트의 크기에 맞게 조정합니다.
3. position 조정
<div class="card" style="background-image: url(https://placehold.it/300x200); background-position: center center;">
...
</div>
background image의 위치를 조정하려면 background-position 속성을 사용할 수 있습니다.
위 코드는 background image를 card 컴포넌트의 중앙에 배치합니다.
4. repeat 사용
<div class="card" style="background-image: url(https://placehold.it/300x200); background-repeat: repeat;">
...
</div>
background image의 반복을 조정하려면 background-repeat 속성을 사용할 수 있습니다.
위 코드는 background image를 card 컴포넌트 내에서 반복합니다.
