vivoldi.com
Open in
urlscan Pro
115.68.66.71
Public Scan
URL:
https://vivoldi.com/tools/website-screen-capturer/
Submission: On March 26 via manual from US — Scanned from SG
Submission: On March 26 via manual from US — Scanned from SG
Form analysis 1 forms found in the DOM
<form id="editorForm">
<div class="d-flex justify-content-center mt-4">
<div id="image-load-url-area" class="w-100 w-md-80">
<div class="d-flex justify-content-center row">
<div class="col-md-8">
<div class="form-outline">
<input type="text" id="url" name="url" class="form-control form-control-lg" aria-describedby="imageUrlText" placeholder="https://" required="">
<label class="form-label" for="url" style="margin-left: 0px;">웹사이트 URL</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 85.6px;"></div>
<div class="form-notch-trailing"></div>
</div>
</div>
<div id="imageUrlText" class="form-text"> 'https://'를 포함하여 URL을 입력하세요. </div>
</div>
<div class="col-auto mt-3 mt-md-0">
<button type="submit" class="btn btn-secondary btn-lg">
<span class="spinner-border spinner-border-sm visually-hidden" role="status" aria-hidden="true"></span>
<span><svg class="svg-inline--fa fa-play" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
<path fill="currentColor" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path>
</svg><!-- <i class="fa-solid fa-play"></i> --> 확인</span>
</button>
</div>
</div>
<div class="d-flex justify-content-center mt-3">
<div class="w-100 w-md-80">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-mdb-toggle="collapse" data-mdb-target="#flush-collapseOne" aria-expanded="true" aria-controls="flush-collapseOne"> 고급 설정 </button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-mdb-parent="#accordionFlushExample">
<div class="accordion-body px-0 px-md-4">
<div class="row gx-1 gx-md-3">
<div class="col-6">
<div id="select-wrapper-515373" class="select-wrapper">
<div class="form-outline"><input class="form-control select-input active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true"><label
class="form-label select-label active" style="margin-left: 0px;">이미지 변환 화질</label><span class="select-arrow"></span>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 104px;"></div>
<div class="form-notch-trailing"></div>
</div>
<div class="form-label select-fake-value">자동</div>
</div><select class="select select-initialized" id="quality" name="quality" required="">
<option value="auto" selected="">자동</option>
<option value="0">원본 (화질 변환 안함)</option>
<option value="1">고화질</option>
<option value="2">중간화질</option>
<option value="3">저화질</option>
</select>
</div>
</div>
<div class="col-6">
<div id="select-wrapper-715703" class="select-wrapper">
<div class="form-outline"><input class="form-control select-input active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true"><label
class="form-label select-label active" style="margin-left: 0px;">웹사이트 접속 모드</label><span class="select-arrow"></span>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 116.8px;"></div>
<div class="form-notch-trailing"></div>
</div>
<div class="form-label select-fake-value">데스크톱 PC (FHD)</div>
</div><select class="select select-initialized" id="agent" name="agent" data-mdb-visible-options="10">
<option value="1" selected="">데스크톱 PC (FHD)</option>
<option value="2">데스크톱 PC (QHD)</option>
<option value="4">휴대폰</option>
<option value="5">태블릿 (세로)</option>
<option value="6">태블릿 (가로)</option>
</select>
</div>
</div>
</div>
<div id="resizeArea" class="alert my-3 pt-3 px-2 d-none alert-primary" role="alert" data-mdb-color="primary" style="border:1px solid #ccc;background-color:#fff;">
<div class="row d-flex justify-content-center mt-4">
<div id="resizeWidthArea" class="col-auto mt-2 mt-md-0 d-none">
<div class="d-flex justify-content-start">
<div class="form-outline" style="max-width:7rem;">
<input type="number" id="resizeWidth" name="resizeWidth" class="form-control form-control-lg active" maxlength="4" oninput="common.checkNumber(this)" value="800">
<label class="form-label" for="resizeWidth" style="margin-left: 0px;">가로 크기</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 8px;"></div>
<div class="form-notch-trailing"></div>
</div>
</div><span class="d-block pt-2 ps-1 f14">px</span>
</div>
</div>
<div id="resizeXArea" class="col-auto pt-2 d-none d-md-block">x</div>
<div id="resizeHeightArea" class="col-auto mt-4 mt-md-0 d-none">
<div class="d-flex justify-content-start">
<div class="form-outline" style="max-width:7rem;">
<input type="number" id="resizeHeight" name="resizeHeight" class="form-control form-control-lg active" maxlength="4" oninput="common.checkNumber(this)" value="600">
<label class="form-label" for="resizeHeight" style="margin-left: 0px;">세로 크기</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 8px;"></div>
<div class="form-notch-trailing"></div>
</div>
</div><span class="d-block pt-2 ps-1 f14">px</span>
</div>
</div>
</div>
<div id="resizeHint" class="mt-3 text-start text-md-center f11 f-md-12"></div>
</div>
<div class="row gx-1 gx-md-3 mt-4">
<div class="col-6">
<div id="select-wrapper-583344" class="select-wrapper">
<div class="form-outline"><input class="form-control select-input active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true"><label
class="form-label select-label active" style="margin-left: 0px;">이미지 저장 포맷</label><span class="select-arrow"></span>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 104px;"></div>
<div class="form-notch-trailing"></div>
</div>
<div class="form-label select-fake-value">JPG</div>
</div><select class="select select-initialized" id="export" name="export">
<option value="jpg" selected="">JPG</option>
<option value="png">PNG</option>
</select>
</div>
</div>
<div class="col-6">
<div id="select-wrapper-16058" class="select-wrapper">
<div class="form-outline"><input class="form-control select-input active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly="true"><label
class="form-label select-label active" style="margin-left: 0px;">페이지 로딩 지연 (정상적으로 캡쳐되지 않을 때 사용)</label><span class="select-arrow"></span>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 308px;"></div>
<div class="form-notch-trailing"></div>
</div>
<div class="form-label select-fake-value">페이지 로드 후 1초 지연 캡쳐</div>
</div><select class="select select-initialized" id="delay" name="delay" data-mdb-visible-options="10">
<option value="1" selected="">페이지 로드 후 1초 지연 캡쳐</option>
<option value="2">페이지 로드 후 2초 지연 캡쳐</option>
<option value="3">페이지 로드 후 3초 지연 캡쳐</option>
<option value="5">페이지 로드 후 5초 지연 캡쳐</option>
<option value="7">페이지 로드 후 7초 지연 캡쳐</option>
<option value="9">페이지 로드 후 9초 지연 캡쳐</option>
</select>
</div>
</div>
</div>
<div class="row gx-1 gx-md-3 mt-3">
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Y" id="retinaYn" name="retinaYn">
<label class="form-check-label" for="retinaYn">Retina 적용 (화면의 화소수를 2배 더 늘려 고품질 이미지로 변환)</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="Y" id="querySelectorYn" name="querySelectorYn">
<label class="form-check-label" for="querySelectorYn">웹사이트 특정 영역 캡쳐 (Query Selector)</label>
</div>
</div>
</div>
<div id="querySelectorArea" class="row gx-1 gx-md-3 mt-3 d-none">
<div class="col-md-12">
<div class="form-outline">
<input type="text" class="form-control form-control-lg" id="querySelector" name="querySelector">
<label class="form-label" for="querySelector" style="margin-left: 0px;">Query Selector</label>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 8px;"></div>
<div class="form-notch-trailing"></div>
</div>
</div>
<div class="mt-3">
<p class="fw-bold f14">Query Selector란?</p>
<p class="lh-base"> 웹사이트의 페이지는 HTML 태그로 구성되며 여러 HTML 태그 중 특정 태그를 가져오는 기술이 Query Selector 입니다.<br> 아래는 예제 HTML입니다.<br><br>
<code> <!DOCTYPE html><br> <html lang="ko"><br> <head><br> </head><br> <body><br> <div id="image-list"><br> 첫 번째 이미지: <img
src="https://example.com/images/photo/photo-1.jpg" class="photo"><br><br> 두 번째 이미지: <img src="https://example.com/images/photo/photo-2.jpg" class="photo"><br> </div><br>
</body><br> </html><br>
</code><br> id 값으로 특정 영역을 캡쳐하려면 "#image-list"를 입력하세요.<br> class 값으로 특정 영역을 캡쳐하려면 "img.photo" 또는 ".photo"를 입력하세요.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="completed-area" class="text-center d-none">
<p class="f20 fw-bold py-3 text-primary">화면 캡쳐 완료!</p>
<a id="btnDownload" class="btn btn-primary btn-lg"><svg class="svg-inline--fa fa-download" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"></path></svg><!-- <i class="fa-solid fa-download"></i> --> 이미지 다운로드</a>
<button type="button" class="btn btn-secondary btn-lg ms-2" onclick="doReset(true)"><svg class="svg-inline--fa fa-rotate-right" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="rotate-right" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<g class="fa-duotone-group">
<path class="fa-secondary" fill="currentColor"
d="M371 377.6c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9s100.5-223.1 223.9-223.1c54.6 0 106.3 20.75 146.5 55.63l-45.24 45.27c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9C329 415.9 345.3 377.6 371 377.6z">
</path>
<path class="fa-primary" fill="currentColor"
d="M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l137.1-138C455.5 34.57 462.3 32.11 468.9 32.11z"></path>
</g>
</svg><!-- <i class="fa-duotone fa-rotate-right"></i> --> 초기화</button>
<div class="text-center mt-5">
<p>이미지 미리보기</p>
<img id="imgPreview" class="img-fluid">
</div>
<div class="mt-5 pb-5 text-info"> 비볼디의 웹사이트 화면 스크린 캡쳐 온라인 도구가 유용했다면 더 많은 사람들에게 공유하고 말씀해주세요. </div>
</div>
</form>Text Content
비볼디 * 비볼디 소개 * URL단축 * 서버구축/호스팅 * SEO 백링크 * 유용한 도구 모음 * 우리들의 서비스 URL단축 서비스 비즈니스를 위한 강력한 URL단축 서비스 사용자가 언제 링크를 클릭하는지에 대해 확인할 수 있으므로 귀하가 공유하는 컨텐츠 및 커뮤니케이션에 보다 현명한 결정을 내릴 수 있습니다. 브랜드 링크(사용자가 URL만 봐도 귀사로 인식)는 브랜드가 아닌 URL에 비해 클릭률이 34% 높아질 수 있습니다. 서버구축, 서버호스팅 엄청난 성능, 무제한 트래픽, 매우 빠른 데이터 처리 한 번의 서버 구축으로 매월 비용없이 평생 무료 사용. 무제한 트래픽으로 사용자들에게 마음껏 서비스하세요. 비볼디의 기술력으로 하드웨어와 어플리케이션을 최적화하고 불필요한 네트워크 비용을 최소화하세요. 유용한 도구 모음 전체 보기 내 IP 주소 확인 내 외부 아이피(IP) 주소를 빠르게 확인할 수 있습니다. 사진 용량 줄이기 이미지의 퀄리티와 해상도는 고화질로 유지하면서 압축을 하여 이미지 파일의 크기를 줄여보세요. WEBP 이미지 변환기 PNG, JPG, GIF 이미지 파일을 Webp 포맷으로 변환할 수 있고 반대도 가능합니다. 사진 이미지 편집기 웹 사이트에서 쉽고 간편하게 사진을 편집하고 다운로드할 수 있습니다. 웹사이트 화면 스크린 캡쳐 URL 주소로 웹사이트의 화면 스크린을 캡쳐하여 이미지로 변환해주는 온라인 도구입니다. CSS HTML 색상 코드표 HEX, RGBA, HSLA, HSVA, CMYK 형식의 HTML 색상 코드표. * 블로그 * 문의하기 로그인 무료 회원가입 웹사이트 화면 스크린 캡쳐 온라인 URL 주소로 웹사이트의 화면 스크린을 캡쳐하여 이미지로 변환해주는 온라인 도구입니다. 간편하게 URL 입력만으로 웹사이트의 화면을 캡쳐하고 이미지를 다운로드하세요. (웹사이트에 포함된 유튜브 동영상 화면은 캡쳐되지 않습니다) 매번 웹 브라우저에서 화면 스크롤을 내려가면서 힘들게 캡쳐하셨나요? 신속하고 간편하게 화면을 캡쳐할 수 있습니다. 웹사이트 URL 'https://'를 포함하여 URL을 입력하세요. 확인 고급 설정 이미지 변환 화질 자동 자동 원본 (화질 변환 안함) 고화질 중간화질 저화질 웹사이트 접속 모드 데스크톱 PC (FHD) 데스크톱 PC (FHD) 데스크톱 PC (QHD) 휴대폰 태블릿 (세로) 태블릿 (가로) 가로 크기 px x 세로 크기 px 이미지 저장 포맷 JPG JPG PNG 페이지 로딩 지연 (정상적으로 캡쳐되지 않을 때 사용) 페이지 로드 후 1초 지연 캡쳐 페이지 로드 후 1초 지연 캡쳐 페이지 로드 후 2초 지연 캡쳐 페이지 로드 후 3초 지연 캡쳐 페이지 로드 후 5초 지연 캡쳐 페이지 로드 후 7초 지연 캡쳐 페이지 로드 후 9초 지연 캡쳐 Retina 적용 (화면의 화소수를 2배 더 늘려 고품질 이미지로 변환) 웹사이트 특정 영역 캡쳐 (Query Selector) Query Selector Query Selector란? 웹사이트의 페이지는 HTML 태그로 구성되며 여러 HTML 태그 중 특정 태그를 가져오는 기술이 Query Selector 입니다. 아래는 예제 HTML입니다. <!DOCTYPE html> <html lang="ko"> <head> </head> <body> <div id="image-list"> 첫 번째 이미지: <img src="https://example.com/images/photo/photo-1.jpg" class="photo"><br> 두 번째 이미지: <img src="https://example.com/images/photo/photo-2.jpg" class="photo"> </div> </body> </html> id 값으로 특정 영역을 캡쳐하려면 "#image-list"를 입력하세요. class 값으로 특정 영역을 캡쳐하려면 "img.photo" 또는 ".photo"를 입력하세요. 화면 캡쳐 완료! 이미지 다운로드 초기화 이미지 미리보기 비볼디의 웹사이트 화면 스크린 캡쳐 온라인 도구가 유용했다면 더 많은 사람들에게 공유하고 말씀해주세요. 질문이 있으신가요? 여기에서 답변을 찾으세요. 웹사이트 화면 캡쳐 온라인 도구의 장점은 무엇입니까? 웹사이트 전체 또는 특정 영역의 화면만 캡쳐할 때 일반적으로 캡쳐 관련 응용 프로그램을 실행하거나 별도의 소프트웨어를 다운로드 후 데스크톱에 설치하여야 합니다. 화면 스크린을 캡쳐하고 파일로 저장하는 이러한 행위는 너무나도 번거롭고 작업을 느리게 만듭니다. 비볼디의 캡쳐 온라인 도구는 전 세계의 모든 웹사이트와 웹페이지를 URL 입력만으로 모든 스크린을 캡처할 수 있습니다. 웹사이트 화면 캡쳐를 사용하는 이유는 무엇인가요? 일반적으로 웹페이지의 내용이 변경되기 전 사전에 미리 캡쳐를 하여 변경 전 내용을 보유하고 있는 사람들이 많습니다. 예를 들면 약관, 정책, 타인이 글을 쓰고 중간에 글 내용을 변경했을 때 변경 전과 후의 내용을 비교할 수 있습니다. 디자이너들은 잘 구성된 웹사이트를 참고하여 화면 레이아웃 구성을 공부할 수도 있고 쇼핑몰 사이트의 상품 이미지와 내용을 캡쳐해서 보관할 수도 있습니다. 페이지 로딩 지연 캡쳐 기능은 무엇인가요? 웹사이트가 운영되는 서버의 성능 그리고 서버의 회선 속도에 따라 웹사이트에 접속할 때 빠르게 또는 느리게 화면이 표시됩니다. 웹페이지가 느리게 로딩되는 경우 완전히 로드되지 않거나 로드되고 있는 중간에 캡쳐가 시작될 수 있습니다. 페이지 로딩 지연 기능은 웹페이지에 접속한 후 완전히 웹페이지가 로드될 때 까지 일정 시간동안 기다린 후 캡쳐를 시작하는 기능입니다. 일반적인 경우 1초 지연이면 충분하지만 웹사이트 접속이 느릴 때는 5초 이상으로 설정해 보세요. 유용한 도구 모음: 곧 더 많은 도구가 추가될 예정입니다. 이미지 용량 줄이기 Webp 이미지 변환기 사진 이미지 편집기 웹사이트 화면 캡쳐 내 IP 주소 확인 HTML 색상 코드표 URL 인코딩 디코딩 Base64 인코딩 디코딩 한글 도메인 퓨니코드 변환 브라우저 User Agent 확인 곧 더 많은 도구가 추가될 예정입니다. 소셜 커뮤니티에서 비볼디와 연락하고 소통하세요. 비볼디 대표자: 이용희 사업자번호: 402-40-91552 통신판매업 신고번호: 2019-서울도봉-0898호 개인정보관리책임자: 이호림 TERMS 이용 약관 서비스별 추가 약관 개인정보처리방침 정보 및 광고 수신 SERVICE URL단축 서비스 서버구축/호스팅 SEO 백링크 유용한 도구 모음 CONTACT 서울특별시 도봉구 노해로70길 46, 1층 137호 support@vivoldi.com 0507-1384-5849 (09:30 ~ 18:00) 2019 © 비볼디. All rights reserved. 예 아니요 AddThis Sharing Sidebar Share to FacebookFacebook , Number of shares Share to TwitterTwitterShare to LinkedInLinkedInShare to KakaoKakaoShare to Kakao TalkKakao TalkShare to LINELINEShare to 더 보기AddThis , Number of shares Hide Show Close AddThis AddThis Sharing SHARESFacebookTwitterLinkedInKakaoKakao TalkLINEAddThis