js는 텍스트 파일 복사 기능을 구현합니다(자세한 단계별 설명).

이번에는 js로 텍스트 파일을 복사하는 기능(자세한 단계별 설명)을 가져오겠습니다. js로 텍스트 파일 복사 기능을 구현하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 보세요.

최근에

태그의 텍스트를 클립보드에 복사하려면 버튼을 클릭해야 하는 경우가 발생했습니다.

이전에도 입력 상자의 내용을 복사한 적이 있는데 거의 똑같다고 생각했습니다. 전혀 안 되더라고요

다양한 방법을 시도해 보았는데 이 방법은 결국 블라인드 트릭을 사용하여 다음과 같은 효과를 얻었습니다

1. 원리 분석

브라우저는 복사할 수 있는 복사 명령을 제공합니다. 선택한 내용

document.execCommand("copy")

입력 상자인 경우 select() 메소드를 전달하고 입력 상자의 텍스트를 선택한 다음 복사 명령을 호출하여 해당 텍스트를 클립보드에 복사할 수 있습니다

하지만 select() 메소드는 및 에만 유효합니다. <p>는 사용하기 쉽지 않습니다.</p> <p style="text-align: left;">최종 해결책은 페이지에 <textarea>를 추가한 다음 숨기는 것입니다. </p>버튼을 클릭할 때 먼저 <textarea> 값을 <p>innerText로 변경한 후 <p style="text-align: left;"><strong></strong></p>코드 구현 <p style="text-align: left;"><strong></strong>HTML 부분</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><style type="text/css">   .wrapper {position: relative;}   #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;} </style> <p class="wrapper">   <p id="text">我把你当兄弟你却想着复制我？</p>   <textarea id="input">这是幕后黑手</textarea>   <button onclick="copyText()">copy</button> </p></pre><div class="contentsignin">로그인 후 복사</div></div> <p style="text-align: left;">JS 부분에 내용을 복사합니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script type="text/javascript">   function copyText() {    var text = document.getElementById("text").innerText;    var input = document.getElementById("input");    input.value = text; // 修改文本框的内容    input.select(); // 选中文本    document.execCommand("copy"); // 执行浏览器复制命令    alert("复制成功");   }  </script></pre><div class="contentsignin">로그인 후 복사</div></div> <p style="text-align: left;">개인 테스트, Firefox 48.0, Chrome 60.0, IE 8 모두 사용 가능</p> <p style="text-align: left;"> 이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사를 주목하세요. 중국사이트! </p> <p>추천 자료: </p> <p></p>Vue-cropper 이미지 자르기 단계에 대한 자세한 설명<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394682.html" target="_blank"></a><br></p>Angular 컨테이너 배포 단계에 대한 자세한 설명<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394674.html" target="_blank"></a><br></p>axios가 도메인 간을 요청하는 방법<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-394665.html" target="_blank"></a></p><p>위 내용은 js는 텍스트 파일 복사 기능을 구현합니다(자세한 단계별 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>관련 라벨：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ko/search?word=javascript" target="_blank">javascript</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ko/search?word=功能" target="_blank">功能</a> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ko/search?word=文件" target="_blank">文件</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">원천：php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/ko/faq/394686.html" title="json-server는 백엔드 데이터 시뮬레이션을 구현합니다."> <span>이전 기사：json-server는 백엔드 데이터 시뮬레이션을 구현합니다.</span> </a> <a href="http://www.php.cn/ko/faq/394688.html" title="렌더 실행을 수행하는 방법은 무엇입니까?"> <span>다음 기사：렌더 실행을 수행하는 방법은 무엇입니까?</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">저자별 최신 기사</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/402647.html">최신 PHP Programmer Toolbox v1.0 버전 소개</a> </div> <div>2018-06-11 11:57:34</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403921.html">vue.js 라우팅 실패를 처리하는 방법</a> </div> <div>2018-06-15 15:55:18</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403914.html">js를 사용하여 데이터베이스를 구문 분석하는 방법(코드 포함)</a> </div> <div>2018-06-15 15:49:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403911.html">js를 사용하여 프로젝트에서 DOM 이벤트를 바인딩하는 방법</a> </div> <div>2018-06-15 15:46:15</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403909.html">JS 문자열 및 특수문자 조작 방법</a> </div> <div>2018-06-15 15:42:38</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403907.html">프로젝트의 jQuery 내에서 각 메서드를 사용하는 방법</a> </div> <div>2018-06-15 15:40:34</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403904.html">jquery를 사용하여 파일을 업로드하는 방법</a> </div> <div>2018-06-15 15:39:32</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403902.html">JS 프로토타입 및 프로토타입 체인 사용 방법</a> </div> <div>2018-06-15 15:37:14</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403899.html">Angular CLI+Angular 5 실습 프로젝트 시연</a> </div> <div>2018-06-15 15:34:21</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/403890.html">jQuery를 사용하여 노드 요소 교체(코드 첨부)</a> </div> <div>2018-06-15 15:22:51</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">최신 이슈</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176376.html" target="_blank" title="JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법" class="wdcdcTitle">JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법</a> <a href="http://www.php.cn/ko/wenda/176376.html" class="wdcdcCons">img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 19:25:49</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>505</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176368.html" target="_blank" title="d3.js를 확대할 때 산점도 값이 유지되지 않습니다." class="wdcdcTitle">d3.js를 확대할 때 산점도 값이 유지되지 않습니다.</a> <a href="http://www.php.cn/ko/wenda/176368.html" class="wdcdcCons">d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 18:16:26</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>403</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176347.html" target="_blank" title="공급업체별 의사 요소에 대한 JavaScript 호버 이벤트" class="wdcdcTitle">공급업체별 의사 요소에 대한 JavaScript 호버 이벤트</a> <a href="http://www.php.cn/ko/wenda/176347.html" class="wdcdcCons">나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 15:35:24</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>274</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176343.html" target="_blank" title="Javascript/Jquery를 사용하여 버튼 없이 양식 제출" class="wdcdcTitle">Javascript/Jquery를 사용하여 버튼 없이 양식 제출</a> <a href="http://www.php.cn/ko/wenda/176343.html" class="wdcdcCons">JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 14:54:03</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>421</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176324.html" target="_blank" title="CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요." class="wdcdcTitle">CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요.</a> <a href="http://www.php.cn/ko/wenda/176324.html" class="wdcdcCons">클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 12:53:11</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>376</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>관련 주제</div> <a href="http://www.php.cn/ko/faq/zt" target="_blank">더> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/quxjgcktdlm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214433095543.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="^quxjg$c로 시작하는 잘못된 문자" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/quxjgcktdlm" class="title-a-spanl" title="^quxjg$c로 시작하는 잘못된 문자"><span>^quxjg$c로 시작하는 잘못된 문자</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jsszcd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214415543594.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js에서 배열의 길이를 얻는 방법" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jsszcd" class="title-a-spanl" title="js에서 배열의 길이를 얻는 방법"><span>js에서 배열의 길이를 얻는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jssxym"><img src="https://img.php.cn/upload/subject/202407/22/2024072214363232433.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="js 현재 페이지 새로 고침" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jssxym" class="title-a-spanl" title="js 현재 페이지 새로 고침"><span>js 현재 페이지 새로 고침</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jssswr"><img src="https://img.php.cn/upload/subject/202407/22/2024072214362363697.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JS 반올림" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jssswr" class="title-a-spanl" title="JS 반올림"><span>JS 반올림</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/imgwj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214345932833.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="img 파일을 여는 방법" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/imgwj" class="title-a-spanl" title="img 파일을 여는 방법"><span>img 파일을 여는 방법</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/nxyadmintgd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214292614169.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="이 파일을 변경하려면 관리자의 권한이 필요합니다." /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/nxyadmintgd" class="title-a-spanl" title="이 파일을 변경하려면 관리자의 권한이 필요합니다."><span>이 파일을 변경하려면 관리자의 권한이 필요합니다.</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/docwjgs"><img src="https://img.php.cn/upload/subject/202407/22/2024072214181228520.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="문서는 어떤 형식인가요?" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/docwjgs" class="title-a-spanl" title="문서는 어떤 형식인가요?"><span>문서는 어떤 형식인가요?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/jsscjddff"><img src="https://img.php.cn/upload/subject/202407/22/2024072214115932190.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="노드를 삭제하는 Node.js 메소드" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/jsscjddff" class="title-a-spanl" title="노드를 삭제하는 Node.js 메소드"><span>노드를 삭제하는 Node.js 메소드</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">인기 추천</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js는 무슨 뜻인가요?" href="http://www.php.cn/ko/faq/482163.html">js는 무슨 뜻인가요?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js에서 문자열을 배열로 변환하는 방법은 무엇입니까?" href="http://www.php.cn/ko/faq/461802.html">js에서 문자열을 배열로 변환하는 방법은 무엇입니까?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="자바스크립트를 사용하여 페이지를 새로 고치는 방법" href="http://www.php.cn/ko/faq/473330.html">자바스크립트를 사용하여 페이지를 새로 고치는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="js 배열에서 항목을 삭제하는 방법" href="http://www.php.cn/ko/faq/475790.html">js 배열에서 항목을 삭제하는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="sqrt 함수를 사용하는 방법" href="http://www.php.cn/ko/faq/415276.html">sqrt 함수를 사용하는 방법</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>인기 튜토리얼</div> <a target="_blank" href="http://www.php.cn/ko/course.html">더> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">관련 튜토리얼 <div></div></div> <div class="tabdiv swiper-slide" data-id="two">인기 추천<div></div></div> <div class="tabdiv swiper-slide" data-id="three">최신 강좌<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="http://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div>1417457 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/74.html" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" href="http://www.php.cn/ko/course/74.html">PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기</a> <div class="wzrthreerb"> <div>4258642 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="http://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>2481775 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="http://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>504156 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/2.html" title="PHP 제로 기반 입문 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 제로 기반 입문 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 제로 기반 입문 튜토리얼" href="http://www.php.cn/ko/course/2.html">PHP 제로 기반 입문 튜토리얼</a> <div class="wzrthreerb"> <div>844495 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="http://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div >1417457 학습 시간</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="http://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >2481775 학습 시간</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="http://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >504156 학습 시간</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/901.html" title="웹 프론트 엔드 개발에 대한 빠른 소개" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="웹 프론트 엔드 개발에 대한 빠른 소개"/> </a> <div class="wzrthree-right"> <a target="_blank" title="웹 프론트 엔드 개발에 대한 빠른 소개" href="http://www.php.cn/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a> <div class="wzrthreerb"> <div >215345 학습 시간</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/234.html" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PS 비디오 튜토리얼을 처음부터 마스터하세요"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" href="http://www.php.cn/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a> <div class="wzrthreerb"> <div >878441 학습 시간</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ko/course/1648.html" title="[웹 프런트엔드] Node.js 빠른 시작" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[웹 프런트엔드] Node.js 빠른 시작"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[웹 프런트엔드] Node.js 빠른 시작" href="http://www.php.cn/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a> <div class="wzrthreerb"> <div >6499 학습 시간</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1647.html" title="해외 웹 개발 풀스택 강좌 총집합" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="해외 웹 개발 풀스택 강좌 총집합"/> </a> <div class="wzrthree-right"> <a target="_blank" title="해외 웹 개발 풀스택 강좌 총집합" href="http://www.php.cn/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a> <div class="wzrthreerb"> <div >5098 학습 시간</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1646.html" title="Go 언어 실습 GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go 언어 실습 GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go 언어 실습 GraphQL" href="http://www.php.cn/ko/course/1646.html">Go 언어 실습 GraphQL</a> <div class="wzrthreerb"> <div >4282 학습 시간</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1645.html" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" href="http://www.php.cn/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a> <div class="wzrthreerb"> <div >635 학습 시간</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1644.html" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬"/> </a> <div class="wzrthree-right"> <a target="_blank" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" href="http://www.php.cn/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a> <div class="wzrthreerb"> <div >21799 학습 시간</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>최신 다운로드</div> <a href="http://www.php.cn/ko/xiazai">더> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">웹 효과 <div></div></div> <div class="swiper-slide" data-id="twof">웹사이트 소스 코드<div></div></div> <div class="swiper-slide" data-id="threef">웹사이트 자료<div></div></div> <div class="swiper-slide" data-id="fourf">프론트엔드 템플릿<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 기업 메시지 양식 연락처 코드" href="http://www.php.cn/ko/xiazai/js/8071">[양식 버튼] jQuery 기업 메시지 양식 연락처 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 뮤직 박스 재생 효과" href="http://www.php.cn/ko/xiazai/js/8070">[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과" href="http://www.php.cn/ko/xiazai/js/8069">[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 시각적 양식 드래그 앤 드롭 편집 코드" href="http://www.php.cn/ko/xiazai/js/8068">[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 모방 Kugou 음악 플레이어 코드" href="http://www.php.cn/ko/xiazai/js/8067">[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="클래식 HTML5 푸시 박스 게임" href="http://www.php.cn/ko/xiazai/js/8066">[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤" href="http://www.php.cn/ko/xiazai/js/8065">[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 개인 앨범 커버 호버 확대/축소 효과" href="http://www.php.cn/ko/xiazai/js/8064">[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8328" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8327" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿" target="_blank">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8326" title="디자이너 크리에이티브 작업 이력서 웹 템플릿" target="_blank">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8325" title="현대 엔지니어링 건설 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8324" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿" target="_blank">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8323" title="온라인 전자책 쇼핑몰 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8322" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다." target="_blank">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8321" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿" target="_blank">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3078" target="_blank" title="귀여운 여름 요소 벡터 자료(EPS+PNG)">[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3077" target="_blank" title="4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)">[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3076" target="_blank" title="노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)">[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3075" target="_blank" title="황금 졸업 모자 벡터 자료(EPS+PNG)">[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3074" target="_blank" title="흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)">[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3073" target="_blank" title="다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)">[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3072" target="_blank" title="플랫 스타일 식목일 배너 벡터 자료(AI+EPS)">[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/sucai/3071" target="_blank" title="9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)">[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8328" target="_blank" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8327" target="_blank" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8326" target="_blank" title="디자이너 크리에이티브 작업 이력서 웹 템플릿">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8325" target="_blank" title="현대 엔지니어링 건설 회사 웹사이트 템플릿">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8324" target="_blank" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8323" target="_blank" title="온라인 전자책 쇼핑몰 웹사이트 템플릿">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8322" target="_blank" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/xiazai/code/8321" target="_blank" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/ko/about/xieyi.html" rel="nofollow" target="_blank" title="회사 소개" class="cBlack">회사 소개</a> <a href="http://www.php.cn/ko/about/yinsi.html" rel="nofollow" target="_blank" title="부인 성명" class="cBlack">부인 성명</a> <a href="http://www.php.cn/ko/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1731461268"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>