HTML을 사용하여 PDF 파일을 삽입하는 방법은 무엇입니까?
우리는 배울 것이다 HTML 문서에 PDF 파일을 삽입하는 방법 , 예제를 통해 구현을 아는 것과 함께. 때로는 PDF 파일을 HTML 문서나 코드에 삽입하여 콘텐츠를 보다 대화형으로 만들고 싶을 수도 있습니다. 형식이 너무 다르기 때문에 작업을 수행하는 것이 쉽지 않습니다.
이를 수행하는 방법은 다음과 같습니다.
내용의 테이블
방법 1: 사용 객체 태그
- HTML의 개체 태그는 PDF 파일을 포함하는 첫 번째 방법입니다. 아래 예에서는 PDF 파일이 객체인 웹 페이지에 표시됩니다.
- PDF 파일을 웹페이지에 포함시키는 것 외에도 객체 태그는 ActiveX, Flash, 비디오, 오디오 및 Java 애플릿을 포함할 수 있습니다.
- HTML 태그가 포함된 개체에 대화형 문서를 첨부할 수 있습니다.
- 객체의 height, width 속성을 이용하여 필요에 따라 화면에 표시할 수 있습니다.
실시예 1 : 이 예에서는 개체 태그를 사용하여 HTML에 PDF 파일을 포함하는 방법을 설명합니다.
HTML HTML제목> 머리>의 PDF <style>.pdf { 너비: 100%; 종횡비: 4/3; } .pdf, html, body { 높이: 100%; 여백: 0; 패딩: 0; } h1, h3 { 텍스트 정렬: 중앙; } h1 { 색상: 녹색; } 스타일> <body> <h1>techcodeview.comh1> <h3>Object Tagh3을 사용하여 PDF 파일 삽입> <object>개체> 본문> html> </pre> </code> <p dir='ltr'> <b> <strong>산출: </strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=''> <h2 id='method-2-using-an-iframe'> <b> <strong>방법 2: 사용하기 </strong> </b> <a href='/html-iframes' rel=''> <b> <strong>아이프레임 </strong> </b> </a> </h2> <ul> <li value='1'> <span>iframe 태그를 사용하는 것은 HTML 웹 페이지에 PDF 파일을 삽입하는 두 번째 방법입니다. 웹 개발에서 웹 개발자는 iframe 태그를 사용하여 다양한 형식의 파일을 포함하고 웹 페이지 내에 다른 웹 사이트도 포함합니다. </span> </li> <li value='2'> <span>폭넓은 호환성으로 인해 iframe 태그는 PDF 삽입에 널리 사용됩니다. </span> </li> <li value='3'> <span>PDF 문서 또는 개체 태그를 지원하지 않는 브라우저에서도 이 태그를 사용하여 PDF HTML 코드를 포함할 수 있습니다. </span> </li> </ul> <p dir='ltr'> <b> <strong>실시예 2 </strong> </b> <span>: 이 예에서는 iframe을 사용하여 HTML에 PDF 파일을 삽입하는 방법을 설명합니다. </span> </p>HTML <code> <pre> <html> <head> <title>HTML제목> 머리>의 PDF <style>.pdf { 너비: 100%; 종횡비: 4/3; } .pdf, html, body { 높이: 100%; 여백: 0; 패딩: 0; } h1, h3 { 텍스트 정렬: 중앙; } h1 { 색상: 녹색; } 스타일> <body> <h1>techcodeview.comh1> <h3>Iframe Tagh3을 사용하여 PDF 파일 삽입> <iframe>iframe> 본문> html> </pre> </code> <p dir='ltr'> <b> <strong>산출: </strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=''> <h2 id='method-3-using-embed-tag'> <b> <strong>방법 3: 사용 </strong> </b> <b> <strong>태그 삽입 </strong> </b> </h2> <ul> <li value='1'> <span>PDF HTML 코드를 웹사이트에 삽입할 때 삽입 태그는 이전 태그만큼 자주 사용되지 않습니다. 사용자의 브라우저가 PDF 파일을 처리할 수 없으면 디스플레이가 비어 있게 되기 때문입니다. </span> </li> <li value='2'> <span>PDF HTML 코드 삽입 방법은 대체 콘텐츠를 제공할 필요가 없을 때 사용됩니다. </span> </li> </ul> <p dir='ltr'> <b> <strong>예 </strong> </b> <span>: 이 예에서는 embed 태그를 사용하여 HTML에 PDF 파일을 포함하는 방법을 설명합니다. </span> </p>HTML <code> <pre> <html> <head> <title>HTML제목> 머리>의 PDF <style>.pdf { 너비: 100%; 종횡비: 4/3; } .pdf, html, body { 높이: 100%; 여백: 0; 패딩: 0; } h1, h3 { 텍스트 정렬: 중앙; } h1 { 색상: 녹색; } 스타일> <body> <h1>techcodeview.comh1> <h3>Embed Tagh3>을 사용하여 PDF 파일 삽입 <embed>본문> html> </pre> </code> <p dir='ltr'> <b> <strong>산출: </strong> </b> </p> <img src='//techcodeview.com/img/geeks-premier-league-2022/50/how-embed-pdf-file-using-html.webp' alt=''> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
공유하다 </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=HTML을 사용하여 PDF 파일을 삽입하는 방법은 무엇입니까?&url=https://www.techcodeview.com/ko/how-embed-pdf-file-using-html"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/ko/how-embed-pdf-file-using-html"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/ko/how-embed-pdf-file-using-html&title=HTML을 사용하여 PDF 파일을 삽입하는 방법은 무엇입니까?"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
마음에 드실지도 몰라요 </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/ko/top-25-c-projects-with-source-code-2023" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/c-projects/31/top-25-c-projects-with-source-code-2023.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="2023년 소스 코드가 포함된 상위 25개 C 프로젝트" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ko/top-25-c-projects-with-source-code-2023">2023년 소스 코드가 포함된 상위 25개 C 프로젝트 </a>
</h4>
</div> <div class="group">
<a href="/ko/installation-r" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/r-tutorial/35/installation-r.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="R 설치" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/ko/installation-r">R 설치 </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
인기 기사 </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/t-sql-tutorial">
<img src="https://techcodeview.com/img/t-sql-tutorial/02/t-sql-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="T-SQL 튜토리얼" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/t-sql-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">T-SQL 튜토리얼 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/18-critical-kill-mockingbird-quotes-1311046">
<img src="https://techcodeview.com/img/blog/27/18-critical-kill-mockingbird-quotes.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="앵무새를 죽이는 데 중요한 18가지 명언" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/18-critical-kill-mockingbird-quotes-1311046" class="hover:text-tech-500 transition-colors line-clamp-3">앵무새를 죽이는 데 중요한 18가지 명언 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/11-best-pre-law-schools-1311632">
<img src="https://techcodeview.com/img/blog/80/11-best-pre-law-schools.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="11개의 최고의 법과대학" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/11-best-pre-law-schools-1311632" class="hover:text-tech-500 transition-colors line-clamp-3">11개의 최고의 법과대학 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/bellman-ford-algorithm">
<img src="https://techcodeview.com/img/shortest-path/62/bellman-ford-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="벨만-포드 알고리즘" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/bellman-ford-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">벨만-포드 알고리즘 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/java-set-list">
<img src="https://techcodeview.com/img/java-tutorial/82/java-set-list.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java 목록으로 설정" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/java-set-list" class="hover:text-tech-500 transition-colors line-clamp-3">Java 목록으로 설정 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/how-split-strings-c">
<img src="https://techcodeview.com/img/c-tutorial/97/how-split-strings-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="C++에서 문자열을 분할하는 방법은 무엇입니까?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/how-split-strings-c" class="hover:text-tech-500 transition-colors line-clamp-3">C++에서 문자열을 분할하는 방법은 무엇입니까? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/cucumber-testing">
<img src="https://techcodeview.com/img/cucumber-testing/86/cucumber-testing.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="오이 테스트" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/cucumber-testing" class="hover:text-tech-500 transition-colors line-clamp-3">오이 테스트 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/what-is-full-form-mg-car">
<img src="https://techcodeview.com/img/category/84/what-is-full-form-mg-car.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MG Car의 완전한 형태는 무엇입니까?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/what-is-full-form-mg-car" class="hover:text-tech-500 transition-colors line-clamp-3">MG Car의 완전한 형태는 무엇입니까? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/multidimensional-arrays-c">
<img src="https://techcodeview.com/img/cpp-array/75/multidimensional-arrays-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="C의 다차원 배열" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/multidimensional-arrays-c" class="hover:text-tech-500 transition-colors line-clamp-3">C의 다차원 배열 </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/ko/what-is-personal-statement-1311244">
<img src="https://techcodeview.com/img/blog/10/what-is-personal-statement.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="개인 진술서란 무엇입니까? 대학 에세이에 대해 알아야 할 모든 것" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/ko/what-is-personal-statement-1311244" class="hover:text-tech-500 transition-colors line-clamp-3">개인 진술서란 무엇입니까? 대학 에세이에 대해 알아야 할 모든 것 </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">범주 </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/ko/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
블로그
</a> <a href="/ko/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
자바 변환
</a> <a href="/ko/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
수학
</a> <a href="/ko/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
자바 컬렉션
</a> <a href="/ko/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
차이점
</a> <a href="/ko/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
자바 문자열
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">재미있는 기사 </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="HTML에 수평선을 추가하는 방법은 무엇입니까?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ko/html-questions/">Html 질문 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ko/how-add-horizontal-line-html">HTML에 수평선을 추가하는 방법은 무엇입니까? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/88/6-fundamental-capricorn-traits.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="염소자리의 6가지 기본 특성에 대해 설명합니다." class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ko/blog/">블로그 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ko/6-fundamental-capricorn-traits-13196">염소자리의 6가지 기본 특성에 대해 설명합니다. </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/android-tutorial/65/how-save-text-messages-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Android에서 문자 메시지를 저장하는 방법" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ko/android-tutorial/">안드로이드 튜토리얼 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ko/how-save-text-messages-android">Android에서 문자 메시지를 저장하는 방법 </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/latex-tutorial/54/latex-colors.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="라텍스 색상" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ko/latex-tutorial/">라텍스 튜토리얼 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ko/latex-colors">라텍스 색상 </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-tutorial/81/types-classes-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java의 클래스 유형" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ko/java-tutorial/">자바 튜토리얼 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ko/types-classes-java">Java의 클래스 유형 </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/selenium-tutorial/59/selenium-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="셀레늄 튜토리얼" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/ko/selenium-tutorial/">셀레늄 튜토리얼 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/ko/selenium-tutorial">셀레늄 튜토리얼 </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 판권 소유 |
<a href="//www.techcodeview.com/hr/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">부인 성명 </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">회사 소개 </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">개인 정보 보호 정책 </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>