Share
Sign In
1-7. 동영상 안에 글씨&CTA 넣는 방법
👉🏻 동영상 태그 위치
아래 사진처럼 </> 아래 태그에요
👉🏻 동영상,글씨, CTA 수정방법
동영상은 업로드했다는 가정하에 작성할게요
1은 마진에 -(minus)를 주어서 여백을 줄였어요 (배경색이 회색이라 줄이 보이는걸 없애는 코드입니다)
2,3 라인은 동영상 관련내용이에요
4,5,6은 이미지 관련된 코드에요
7은 링크 관련된 코드에요
8,9는 CTA을 사용할 사각박스와 박스안에 들어갈 텍스트에요
1은 마진에 -(minus)를 주어서 여백을 줄였어요 (배경색이 회색이라 줄이 보이는걸 없애는 코드입니다)
2,3 라인은 동영상 관련내용이에요
4,5,6은 이미지 관련된 코드에요
7은 링크 관련된 코드에요
8,9는 CTA을 사용할 사각박스와 박스안에 들어갈 텍스트에요
<div style="margin-bottom: -10px">
<video src="https://sbbb.me/design/lion_mo.mp4" class="media media-video" playsinline="" autoplay="autoplay" muted="muted"
loop="true" style="width: 100%; height: 100%; object-fit: cover; position: relative"></video>
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<div style="display: flex; flex-direction: column; align-items: center;">
<img src="https://cdn.imweb.me/upload/S202310191624e42e884b9/c9612b403e85e.png" alt="이미지 설명" style="width: 80%;">
<a href="/shop">
<div style="background-color: red; width: 130px; height: 30px; display: flex; justify-content: center; align-items: center; margin-top: 10px;">
<p style="text-align: center; color: white; padding-top: 10px; font-size: 11px;">SHOP NOW</p>
</div>
</a>
</div>
</div>
</div>코드설명
line 2) 동영상 수정은 video src=""부분만 수정해주시면 됩니다
line 6) 이미지(로고) 수정은 img src="" 부분만 수정해주시면 됩니다
line 7) 링크 수정은 a herf="" 부부만 수정해주시면 됩니다
line 8) 네모박스색을 바꾸고 싶으면 red; 부분을 #으로 시작되는 RGB코드나, whith, blue 등으로 바꾸셔도 됩니다
line 8) 네모박스크기를 키우고 싶으면 height: 30px 를 30~50px로 수정하면 적당합니다!
line 9) 빨간 네모박스에 글자수정은 SHOP NOW 부분만 수정해주시면 됩니다
line 2) 동영상 수정은 video src=""부분만 수정해주시면 됩니다
line 6) 이미지(로고) 수정은 img src="" 부분만 수정해주시면 됩니다
line 7) 링크 수정은 a herf="" 부부만 수정해주시면 됩니다
line 8) 네모박스색을 바꾸고 싶으면 red; 부분을 #으로 시작되는 RGB코드나, whith, blue 등으로 바꾸셔도 됩니다
line 8) 네모박스크기를 키우고 싶으면 height: 30px 를 30~50px로 수정하면 적당합니다!
line 9) 빨간 네모박스에 글자수정은 SHOP NOW 부분만 수정해주시면 됩니다