이미지 추가
•
PC 버젼 이미지는 708px (1x 추출) / 모바일 버젼 이미지는 478px(2x 추출) 입니다.
•
추출한 이미지 파일은 노트폴리오 관리자 계정에 가서 이미지 추가(이미지 당 10MB 이하) 후 비공개로 임시저장 합니다.
•
업로드할 이미지에 ‘우클릭-이미지 주소 복사하기’를 통해 링크를 복사합니다.
•
복사한 링크를 알맞은 위치에 붙여넣습니다. (위에 1개 PC, 아래 1개는 모바일)
•
추가로 이미지를 추가하고 싶다면 아래 코드를 복사하여 body에 추가한뒤 숫자를 수정합니다. 그리고 아래 style에도 마찬가지로 아래 코드를 복사하여 추가한 뒤 숫자를 수정합니다.
<div class="img_classinfo4"><img src="이미지1 링크(PC)" loading="lazy"
sizes="(max-width: 479px) 100vw, (max-width: 708px) 568px, 708px" alt="" class="img_classinfo4">
</div><img src="이미지1 링크(mobile)" loading="lazy" alt="" class="img_classinfo1_mobile">
</div>
HTML
.img_classinfo3 {width: 100%;}
.img_classinfo3_mobile {display: none;}
@media screen and (max-width: 479px) {
.img_classinfo3 {display: none;}
.img_classinfo3_mobile {width: 100%; display: inline-block;}
}
HTML
gif/영상 추가
•
삽입하길 원하는 gif/영상을 편집하여 mp4 파일로 추출합니다.
•
이때 708px 기준 gif나 영상이 포함된 전체 구간을 추출합니다.
•
추출한 영상을 비메오에 업로드합니다. (ID: notefolio@notefolio.net / PW: note5825)
•
비메오 영상 설정
◦
Privacy
▪
Allow downloads - off
▪
People can add to showcases - off
▪
Unlisted - check
▪
embed - Anywhere
◦
Player - 모든 요소 off
◦
설정 완료 후 우측 상단 Embed 버튼 - Copy embed code 클릭하여 코드 복사하여 원하는 위치에 삽입합니다. (이때 class 설정 필요, 아래 코드 참고)
◦
영상이 아닌 gif로 재생 필요 시 코드에 자동재생 코드를 입력해주어야 합니다. (아래 코드 참고)
/*복사한 코드*/
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="영상 주소?h=ad12b44747&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="영상 제목"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
/*클래스 삽입*/
<div style="padding:56.25% 0 0 0;position:relative;" class="videoplayer"><iframe src="영상 주소?h=ad12b44747&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="영상 제목"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
/*자동재생(gif) 코드 추가(app_id=00000 옆에 ?autoplay=1&loop=1&title=0&background=1 추가)*/
<div style="padding:56.25% 0 0 0;position:relative;" class="videoplayer"><iframe src="영상 주소?h=ad12b44747&badge=0&autopause=0&player_id=0&app_id=58479?autoplay=1&loop=1&title=0&background=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="영상 제목"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
HTML