소개 이 글에서는 DOM 1.0의 몇 가지 기본적이고 강력한 메소드와 이를 JavaScript에서 사용하는 방법을 간략하게 소개합니다. HTML 요소를 동적으로 생성, 검색, 제어 및 삭제하는 방법을 배울 수 있습니다. 이러한 DOM 메서드는 XML에도 적용됩니다. DOM 1.0을 완벽하게 지원하는 모든 브라우저(IE5, Firefox 등)에서 이 기사의 예제를 잘 실행할 수 있습니다.
개요 - Sample1.html 이 기사에서는 예제 코드를 통해 DOM을 소개합니다. 먼저 아래 HTML 예제를 시도해 보세요. DOM 1 메소드를 사용하여 JavaScript에서 HTML 테이블을 동적으로 생성합니다. 텍스트 내용을 포함하는 4개의 셀로 구성된 작은 테이블을 만듭니다. 셀의 텍스트 내용은 "The cell is the yth row and the xth Column"입니다. 이는 테이블에 있는 셀의 행과 열 수를 나타냅니다.
head>
예제 코드 - JavaScript 및 DOM을 사용하여 HTML 테이블 만들기<br><script> <br>function start() { <br>//body 태그 가져오기<br> var mybody = document.getElementsByTagName("body")[0]; <br><br>// <table> 요소 및 <tbody> 요소 생성 <br>mytable = document.createElement("table") ; <br>mytablebody = document.createElement("tbody"); <br><br>//모든 셀 생성<br>for(var j = 0; j < 2; j ) { <BR>// 생성 a <tr>Element<br>mycurrent_row = document.createElement("tr"); <br>for(var i = 0; i < 2; i ) { <BR>// <td>요소 만들기 <br>mycurrent_cell = document.createElement("td"); <br>//텍스트 노드 생성<br>currenttext = document.createTextNode("셀은 "j"번째 행, "i"번째 열입니다.") ; <br>// <br>mycurrent_cell.appendChild(currenttext)에 생성된 텍스트 노드를 추가합니다. <br>// <br>mycurrent_row.appendChild 열에 <td> mycurrent_cell); <br>// <tbody>에 행 추가 <br>} <br>// <tbody> table> <br>mytable.appendChild(mytablebody);//<body> <br>mybody.appendChild(mytable)에 추가// 테두리 속성은 다음과 같습니다. 2로 설정 <br>mytable.setAttribute("border", "2") <br></script> <br></head> <br><body onload=" start( )"> <br></body> <br></html> <br><br><br><br><strong>요소와 텍스트 노드를 만드는 순서에 유의하세요</strong>:
<p>1. < table > 요소를 생성합니다. <br> 2. < table >의 하위 요소를 생성합니다. tbody > tr ><br>4. 각 < tr >에 대해 하위 요소 < ;
<br>< table >, < tbody >, < tr >, < td > 요소와 텍스트 노드를 역순으로 추가합니다. <br>1. 생성된 텍스트 노드를 </p>에 추가합니다.
<p>mycurrent_cell.appendChild(현재 텍스트);<br>
</p>2. < td > 행을 추가합니다.
<p>mycurrent_row.appendChild(mycurrent_cell);</p>
<p>3. < tr >
</p>mytablebody.appendChild(mycurrent_row);<p>
</p>4. < 테이블 >
<p>mytable.appendChild(mytablebody);</p>
<p>5. 에 을 추가합니다.
</p>mybody.appendChild(mytable);<p>
</p>이 방법을 기억하세요. W3C DOM으로 작업할 때 이것을 자주 사용하게 될 것입니다. 먼저 위에서 아래로 요소를 작성한 다음 아래에서 위로 상위 노드에 추가합니다. <p>다음은 JavaScript 코드로 생성된 HTML입니다. </p>
<p>...</p><table border=5><p><tr><td>셀은 0행, 0열</td><td>셀은 0행 0행 , 열 1</td></tr></p><tr><td>셀은 행 1, 열 0</td><td>셀은 행 1, 열 1</ td></tr><p></table><br>...</p>
<p>다음은 코드에 의해 생성된 테이블 요소와 해당 하위 요소의 DOM 개체 트리입니다. <br><br><br> 이러한 테이블과 해당 하위 요소를 구성하려면 몇 가지 DOM 메소드만 사용하면 됩니다. 생성할 구성의 모델 트리를 항상 염두에 두십시오. 이렇게 하면 코드 작성이 더 쉬워집니다. 그림의 < table >에는 하위 요소 < < tbody >에는 두 개의 하위 요소가 있습니다. <tbody>(<tr>)의 각 하위 요소는 < 마지막으로 각 < td >에는 하나의 하위 요소인 텍스트 노드가 있습니다. <br><br></p>기본 DOM 메소드 - Sample2.html<p><br><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/201212231429332.jpg" class="lazy" id="image257" alt="sample1-tabledom.jpg"> getElementByTagName 메소드는 문서 및 요소에 적용되므로 문서 루트 객체는 모든 요소 객체와 동일한 getElementByTagName 메소드를 갖습니다. element.getElementsByTagName(tagname)을 사용하면 요소의 모든 하위 요소 목록을 가져오고 태그 이름을 사용하여 선택할 수 있습니다. <br> element.getElementsByTagName은 특정 태그 이름을 가진 하위 요소 목록을 반환합니다. item 메소드를 호출하여(인덱스 매개변수 전달) 이 하위 요소 목록에서 요소를 가져올 수 있습니다. 목록의 첫 번째 하위 요소의 인덱스는 0입니다. 다음 항목에서는 이전 테이블 예제를 계속합니다. 다음 예는 더 간단하며 몇 가지 기본 방법을 보여줍니다. <br><ins datetime="2006-07-02T22:43:47"><strong></strong></ins>코드 복사<br><br><br> 코드는 다음과 같습니다.</p>
<div class="codetitle">
<span> <a style="CURSOR: pointer" data="85111" class="copybut" id="copybut85111" onclick="doCopy('code85111')"><html> <u><head> </u><title>예제 코드 - JavaScript 및 DOM을 사용하여 HTML 테이블 만들기</a><script> </span>// 모든 본문 요소가 포함된 목록 가져오기(하나만 있음) </div>// 그런 다음 목록에서 첫 번째 요소를 선택합니다. <div class="codebody" id="code85111">myBody = document.getElementsByTagName("body")[0]; 🎜 ><br>//body 요소의 모든 p 요소 가져오기 <br>myBodyElements = myBody.getElementsByTagName("p") <br><br>//p 요소 목록의 두 번째 요소 가져오기(0에서 인덱스) 시작) <br>myP = myBodyElements[1]; <br></script> <br></head><br><body onload="start()"> <p>안녕하세요</p> <br></body> <br><br><br>
<p>이 예에서는 myP 변수를 본문의 두 번째 p 요소를 나타내는 DOM 개체로 설정합니다. <br>1. 모든 본문 요소가 포함된 목록 가져오기</p>
<p>myBody = document.getElementsByTagName("body")[0];</p>
<p>유효한 HTML 문서에는 본문 요소가 하나만 있으므로 이 목록에는 항목이 하나만 있습니다. [0]을 사용하여 목록의 첫 번째 요소를 선택하여 얻습니다. <br>2. 블로그 하위 요소에서 모든 p 요소를 가져옵니다. </p>
<p>myBodyElements = myBody.getElementsByTagName("p");</p>
<p>3. p 요소 목록에서 두 번째 항목을 선택합니다</p>
<p>myP = myBodyElements[1];</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/201212231429333.jpg" class="lazy" id="image258" alt="sample2a2.jpg"><br>html 요소의 DOM 객체를 얻은 후에는 해당 속성을 설정할 수 있습니다. 예를 들어 스타일 배경색 속성을 설정하려면 다음만 추가하면 됩니다. </p>
<p>myP.style.Background = "rgb(255,0,0)";</p>
<p><strong> document.createTextNode("..")를 사용하여 텍스트 노드를 만듭니다. </strong><br>문서 개체를 사용하여 createTextNode 메서드를 호출하여 텍스트 노드를 만듭니다. 텍스트 내용만 입력하면 됩니다. 반환 값은 이 텍스트 노드를 나타내는 개체입니다. </p>
<p>myTextNode = document.createTextNode("world");</p>
<p>위 코드는 텍스트 데이터가 "word"인 TEXT_NODE 유형(텍스트 블록) 노드를 생성하고 변수 myTextNode는 이 노드 개체를 가리킵니다. 이 텍스트를 HTML 페이지에 삽입하려면 이 텍스트 노드를 다른 노드 요소의 바이트 포인트로 설정해야 합니다. <br><strong>appendChild(..)를 사용하여 요소 삽입 </strong><br>따라서 myP.appendChild([node_element])를 호출하여 이 텍스트 노드를 두 번째 p 요소의 바이트 포인트로 설정합니다. </p>
<p>myP.appendChild(myTextNode);</p>
<p>이 예를 테스트하여 "hello"와 "world"라는 단어가 "helloworld"로 결합되어 있음을 확인하세요. 따라서 html 페이지를 보면 hello와 world라는 두 개의 텍스트 노드가 하나의 노드인 것처럼 보이지만 실제로 이 문서 모델에는 두 개의 노드가 있습니다. 두 번째 노드는 새로운 TEXT_NODE 유형 노드이며 두 번째 p 태그의 두 번째 바이트 포인트입니다. 아래 이미지는 문서 트리에서 방금 생성된 텍스트 노드를 보여줍니다. <br><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/201212231429334.jpg" class="lazy" id="image259" alt="sample2b2.jpg"></p>
<p>createTextNode 및 AppendChild는 hello와 world 사이에 공백을 추가하는 간단한 방법입니다. hello 다음에 world가 추가되는 것처럼,appendChild 메소드는 마지막 자식 노드 뒤에 추가된다는 점에 유의하는 것이 중요합니다. 따라서 hello와 world 사이에 텍스트 노드를 추가하려면 appendChild 대신 insertBefore 메소드를 사용해야 합니다. </p>
<p><strong>문서 개체와 createElement(..) 메서드를 사용하여 새 요소를 만듭니다. </strong><br> createElement 메서드를 사용하여 새 HTML 요소나 원하는 다른 요소를 만들 수 있습니다. 예를 들어 < body > 요소 < p > 요소에 바이트 포인트를 추가하려는 경우 이전 예에서 myBody를 사용하여 새 요소 노드를 추가할 수 있습니다. 노드를 생성하려면 document.createElement("tagname")를 호출하면 됩니다. 예: </p>
<p>myNewPTAGnode = document.createElement("p");<br>myBody.appendChild(myNewPTAGnode);</p>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/201212231429335.jpg" class="lazy" id="image260" alt="sample2c.jpg"><br><strong>removeChild(..) 메소드를 사용하여 노드를 삭제하세요. </strong><br> 각 노드를 삭제할 수 있습니다. 다음 코드 줄은 myP(두 번째 < p > 요소)에서 world라는 단어가 포함된 텍스트 노드를 삭제합니다. </p>
<p>myP.removeChild(myTextNode);</p>
<p> 마지막으로 world라는 단어가 포함된 텍스트 노드 myTextNode를 새로 생성된 < p >
</p>myNewPTAGnode.appendChild(myTextNode);<p>
</p> 수정된 개체 트리는 최종적으로 다음과 같습니다. <p><br><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/201212231429336.jpg" class="lazy" id="image261" alt="sample2d.jpg"><br><ins datetime="2006-07-02T22:50:58">동적으로 테이블 생성(Sample1.html로 돌아가기) <strong></strong></ins> 나머지 기사는 Sample1.html로 돌아갑니다. 다음 그림은 예제에서 생성된 테이블의 객체 트리 구조를 보여줍니다. <br><br>HTML 테이블 구조 검토<strong></strong><br><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/201212231429332.jpg" class="lazy" id="image257" alt="sample1-tabledom.jpg"><br>요소 노드를 생성하여 문서 트리에 추가<strong></strong>샘플1의 테이블 생성 기본 사항 .html 단계: <br> 본문 개체(문서 개체의 첫 번째 항목)를 가져옵니다. 마지막으로 위의 테이블 구조에 따라 각 바이트 포인트를 추가합니다. 아래 소스 코드는 샘플1.html의 설명입니다.
</p>start 함수 끝에는 또 다른 DOM 메서드인 setAttribute를 사용하여 테이블의 테두리 속성을 설정하는 새로운 코드 줄이 있습니다. setAttribute 메소드에는 속성 이름과 속성 값이라는 두 개의 매개변수가 있습니다. setAttribute 메소드를 사용하여 모든 요소의 속성을 설정할 수 있습니다. <p><br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="63084" class="copybut" id="copybut63084" onclick="doCopy('code63084')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span><div class="codebody" id="code63084">
<br><head> <br><title>예제 코드 - JavaScript 및 DOM을 사용하여 HTML 테이블 만들기<br><script> <br>function start() { <br> / / 본문 가져오기 <br>var mybody = document.getElementsByTagName("body")[0] <br><br>// <table> 및 <tbody> 요소 만들기 <br>mytable = document.createElement( " table"); <br>mytablebody = document.createElement("tbody"); <br><br>//모든 셀 생성<br>for(var j = 0; j < 2; j ) { <br> // <tr> 요소 생성 <br>mycurrent_row = document.createElement("tr") <br><br>for(var i = 0; i < 2; i ) { <br> // 생성 <td> 요소 <br>mycurrent_cell = document.createElement("td"); <br>// 텍스트 노드 생성<br>currenttext = document.createTextNode("셀은 "j" 행입니다. " 열");// 생성된 텍스트 노드를 <td> 요소에 추가합니다. <br>mycurrent_cell.appendChild(currenttext)// <tr>Row<br>mycurrent_row.appendChild(mycurrent_cell); <br>} <br>// <tbody> <br>mytablebody.appendChild(mycurrent_row)에 <tr> 라인 추가 <br><br>/ / <tbody>를 <br>mytable.appendChild(mytablebody) <br>에 추가합니다.// <br>mybody.appendChild(mytable)에 <table>을 추가합니다. / mytable의 테두리 속성을 2로 설정합니다. <br>} <br></head> ;body onload="start()"> <br></body> <br></html> DOM 및 CSS 처리 테이블 <br><br><br><br> table <br><br> 이 예에서는 두 가지 새로운 DOM 속성을 소개합니다. 먼저 mycel의 바이트 포인트 목록을 얻으려면 childNodes 속성을 사용하십시오. 이 childNodes 목록에는 이름 및 유형에 관계없이 모든 바이트 노드가 포함됩니다. getElementsByTagName 메소드와 마찬가지로 바이트 포인트 목록을 반환하며 [ x ]를 사용하여 원하는 바이트 포인트 항목을 가져옵니다. 이 예에서는 myceltext를 테이블의 두 번째 행의 두 번째 셀에 텍스트 노드로 저장합니다. 마지막으로 myceltext의 데이터 속성을 포함하는 새 텍스트 노드를 생성하고 이를 < body > 요소의 하위 요소로 만들어 이 예제의 최종 결과를 표시합니다. <br>
<br>객체가 텍스트 노드인 경우 데이터 속성을 사용하여 해당 콘텐츠를 가져올 수 있습니다. </div>
<br><ins datetime="2006-07-02T22:50:58"><strong></strong>코드 복사 </ins><br><strong> 코드 </strong><br>mybody = document.getElementsByTagName("body")[0]; <p>mytable = mybody.getElementsByTagName("table")[0] <br>mytablebody = mytable .getElementsByTagName(" tbody")[0]; </p>
<div class="codetitle">myrow = mytablebody.getElementsByTagName("tr")[1]; <span>mycel = myrow.getElementsByTagName("td")[1]; >// mycel 바이트 포인트 목록의 첫 번째 항목 <a style="CURSOR: pointer" data="2605" class="copybut" id="copybut2605" onclick="doCopy('code2605')">myceltext=mycel.childNodes[0] <u></u>//currenttext의 내용은 myceltext의 데이터입니다. </a>currenttext=document.createTextNode( myceltext.data); </span>mybody.appendChild(currenttext); </div>
<div class="codebody" id="code2605">
<br><br><br>속성 값 가져오기<br><br> 다음과 같은 셀이 있습니다. mytable 객체의 setAttribute 메소드를 사용합니다. 이 셀은 이 테이블의 테두리 속성을 설정하는 데 사용됩니다. 이 속성을 얻으려면 getAttribute 메소드를 사용하십시오: <br>
<br>mytable.getAttribute("border");<br>
<br><br>스타일 속성을 변경하여 열 숨기기 <br><br> JavaScript 변수를 사용하여 개체를 가리키면 스타일 속성을 즉시 설정할 수 있습니다. 다음 코드는 Sample1.html을 수정한 것입니다. 두 번째 열의 셀은 숨겨지고, 첫 번째 열의 셀 배경은 빨간색으로 변경됩니다. 스타일 속성은 직접 설정됩니다. <br><br>
</div>
<br><strong>코드 복사</strong><br> 코드는 다음과 같습니다.<p></p>
<div class="codebody" id="code84043">
<br><html> <br><body onload="start()"> <br></body> <br><script> >var mybody =document.getElementsByTagName("body")[0]; <br>mytable = document.createElement("table"); <br>mytablebody = document.createElement("tbody"); for(var j = 0; j < 2; j ) { <br>mycurrent_row=document.createElement("tr") <br>for(var i = 0; i < 2; i ) { <br> mycurrent_cell = document.createElement("td"); <br>currenttext = document.createTextNode("셀은 다음과 같습니다: " i j) <br>mycurrent_cell.appendChild(currenttext); 🎜>// 0열에 셀 배경색을 설정하는 경우<br>// 1열에 셀을 숨기는 경우<br>if (i == 0) { <br>mycurrent_cell.style.Background = "rgb( 255, 0,0)"; <br>} else { <br>mycurrent_cell.style.display = "none"; <br>} <br>} <br>mytablebody.appendChild(mycurrent_row); <br>} <br> mytable.appendChild(mytablebody); <br><br>} <br></script> <br><br><br>
</div>
</div>
</div>
</div> </div>
</div>
<div style="display: flex;">
<div class="wzconBq" style="display: inline-flex;">
<span>관련 라벨：</span>
<div class="wzcbqd">
<a onclick="hits_log(2,'www',this);" href-data="https://www.php.cn/ko/search?word=dom작업" target="_blank">DOM 작업</a> <a onclick="hits_log(2,'www',this);" href-data="https://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="https://www.php.cn/ko/faq/18264.html" title="간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴">
<span>이전 기사：간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴</span>
</a>
<a href="https://www.php.cn/ko/faq/18266.html" title="Underscore.js_javascript 스킬의 템플릿 기능 소개 및 적용">
<span>다음 기사：Underscore.js_javascript 스킬의 템플릿 기능 소개 및 적용</span>
</a>
</div>
<div class="wzconShengming">
<div class="bzsmdiv">본 웹사이트의 성명</div>
<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="wzconZzwz">
<div class="wzconZzwztitle">저자별 최신 기사</div>
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771332.html">LLMS 작동 방식 : 사후 훈련, 신경망, 환각 및 추론에 대한 사전 훈련</a>
</div>
<div>2025-02-26 03:58:14</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771322.html">나는 블록 체인과 AI를 결합하여 예술을 생성했습니다. 다음은 다음에 일어난 일입니다.</a>
</div>
<div>2025-02-26 03:38:10</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771315.html">고급 프롬프트 엔지니어링 : 사고 체인 (COT)</a>
</div>
<div>2025-02-26 03:17:10</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771302.html">sqlite에서 증강 증강 생성</a>
</div>
<div>2025-02-26 02:49:09</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771274.html">자신의 node.js api를 구축하기 위해 LLM 구동 보일러 플레이트를 사용하는 방법</a>
</div>
<div>2025-02-26 01:08:13</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771258.html">2024 년 코딩을위한 LLMS : 가격, 성과 및 최고를위한 전투</a>
</div>
<div>2025-02-26 00:46:10</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771227.html">비전 언어 모델을 제기합니다</a>
</div>
<div>2025-02-25 23:42:08</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771219.html">큰 언어 모델의 응답의 신뢰성을 측정하는 방법</a>
</div>
<div>2025-02-25 22:50:13</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771209.html">삶의 환상</a>
</div>
<div>2025-02-25 21:54:11</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796771201.html">과학자들은 인간의 사고를 반영하는 큰 언어 모델에 대해 진지하게 생각합니다.</a>
</div>
<div>2025-02-25 20:45:11</div>
</li>
</ul>
</div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">최신 이슈</div>
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796781356.html">초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형</a>
</div>
<div>2025-03-19 09:10:13</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796781077.html">소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까?</a>
</div>
<div>2025-03-18 15:17:30</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796781076.html">브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?</a>
</div>
<div>2025-03-18 15:16:33</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796781075.html">브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?</a>
</div>
<div>2025-03-18 15:14:33</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="https://www.php.cn/ko/faq/1796781074.html">내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?</a>
</div>
<div>2025-03-18 15:12:30</div>
</li>
</ul>
</div>
<div class="wzconZt" >
<div class="wzczt-title">
<div>관련 주제</div>
<a href="https://www.php.cn/ko/faq/zt" target="_blank">더>
</a>
</div>
<div class="wzcttlist">
<ul>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/lpdm"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072214363468857.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="블루 스크린 코드 0x000009c" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/lpdm" class="title-a-spanl" title="블루 스크린 코드 0x000009c"><span>블루 스크린 코드 0x000009c</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/biosssmysa"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072214220596020.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="바이오스는 무슨 뜻인가요?" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/biosssmysa" class="title-a-spanl" title="바이오스는 무슨 뜻인가요?"><span>바이오스는 무슨 뜻인가요?</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/dandelionssm"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072214090575299.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="민들레가 뭐야?" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/dandelionssm" class="title-a-spanl" title="민들레가 뭐야?"><span>민들레가 뭐야?</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/xmlwjzmdk"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072214261484643.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="XML 파일을 여는 방법" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/xmlwjzmdk" class="title-a-spanl" title="XML 파일을 여는 방법"><span>XML 파일을 여는 방법</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/uisjs"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072214241775985.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="UI 디자이너란 무엇인가요?" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/uisjs" class="title-a-spanl" title="UI 디자이너란 무엇인가요?"><span>UI 디자이너란 무엇인가요?</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/jpsssm"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072214244225452.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="JPA가 뭐야?" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/jpsssm" class="title-a-spanl" title="JPA가 뭐야?"><span>JPA가 뭐야?</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/dreamweaverzm"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072212123771104.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Dreamweaver에서 웹 페이지를 중앙에 맞추는 방법" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/dreamweaverzm" class="title-a-spanl" title="Dreamweaver에서 웹 페이지를 중앙에 맞추는 방법"><span>Dreamweaver에서 웹 페이지를 중앙에 맞추는 방법</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/mysqlrhjsjk"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072213521114716.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="MySQL에서 데이터베이스를 구축하는 방법" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/mysqlrhjsjk" class="title-a-spanl" title="MySQL에서 데이터베이스를 구축하는 방법"><span>MySQL에서 데이터베이스를 구축하는 방법</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="https://www.php.cn/ko/faq/xnkjtdjs"><img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/subject/202407/22/2024072212281429012.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="가상공간의 특징 소개" /> </a>
<a target="_blank" href="https://www.php.cn/ko/faq/xnkjtdjs" class="title-a-spanl" title="가상공간의 특징 소개"><span>가상공간의 특징 소개</span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="phpwzright">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<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="https://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="https://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="https://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="https://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="https://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="https://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="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a>
<div class="wzrthreerb">
<div>1439012 <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="https://www.php.cn/ko/course/74.html" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/74.html">PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기</a>
<div class="wzrthreerb">
<div>4300091 <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="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a>
<div class="wzrthreerb">
<div>2679081 <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="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a>
<div class="wzrthreerb">
<div>517745 <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="https://www.php.cn/ko/course/2.html" title="PHP 제로 기반 입문 튜토리얼" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/2.html">PHP 제로 기반 입문 튜토리얼</a>
<div class="wzrthreerb">
<div>879106 <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="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a>
<div class="wzrthreerb">
<div >1439012 학습 시간</div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a>
<div class="wzrthreerb">
<div >2679081 학습 시간</div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a>
<div class="wzrthreerb">
<div >517745 학습 시간</div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/901.html" title="웹 프론트 엔드 개발에 대한 빠른 소개" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="웹 프론트 엔드 개발에 대한 빠른 소개"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="웹 프론트 엔드 개발에 대한 빠른 소개" href="https://www.php.cn/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a>
<div class="wzrthreerb">
<div >217239 학습 시간</div>
<div class="courseICollection" data-id="901">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/234.html" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a>
<div class="wzrthreerb">
<div >924297 학습 시간</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="https://www.php.cn/ko/course/1648.html" title="[웹 프런트엔드] Node.js 빠른 시작" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a>
<div class="wzrthreerb">
<div >9953 학습 시간</div>
<div class="courseICollection" data-id="1648">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/1647.html" title="해외 웹 개발 풀스택 강좌 총집합" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="해외 웹 개발 풀스택 강좌 총집합"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="해외 웹 개발 풀스택 강좌 총집합" href="https://www.php.cn/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a>
<div class="wzrthreerb">
<div >8006 학습 시간</div>
<div class="courseICollection" data-id="1647">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/1646.html" title="Go 언어 실습 GraphQL" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/1646.html">Go 언어 실습 GraphQL</a>
<div class="wzrthreerb">
<div >6814 학습 시간</div>
<div class="courseICollection" data-id="1646">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/1645.html" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a>
<div class="wzrthreerb">
<div >849 학습 시간</div>
<div class="courseICollection" data-id="1645">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="https://www.php.cn/ko/course/1644.html" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" class="wzrthreelaimg">
<img class="lazy" src="/static/imghw/default1.png" data-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="https://www.php.cn/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a>
<div class="wzrthreerb">
<div >33242 학습 시간</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="https://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="https://www.php.cn/ko/toolset/js-special-effects/8071">[양식 버튼] jQuery 기업 메시지 양식 연락처 코드</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="HTML5 MP3 뮤직 박스 재생 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8070">[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8069">[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="jQuery 시각적 양식 드래그 앤 드롭 편집 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8068">[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="VUE.JS 모방 Kugou 음악 플레이어 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8067">[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="클래식 HTML5 푸시 박스 게임" href="https://www.php.cn/ko/toolset/js-special-effects/8066">[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤" href="https://www.php.cn/ko/toolset/js-special-effects/8065">[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="CSS3 개인 앨범 커버 호버 확대/축소 효과" href="https://www.php.cn/ko/toolset/js-special-effects/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="https://www.php.cn/ko/toolset/website-source-code/8328" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8327" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿" target="_blank">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8326" title="디자이너 크리에이티브 작업 이력서 웹 템플릿" target="_blank">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8325" title="현대 엔지니어링 건설 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8324" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿" target="_blank">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8323" title="온라인 전자책 쇼핑몰 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8322" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다." target="_blank">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-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="https://www.php.cn/ko/toolset/website-materials/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="https://www.php.cn/ko/toolset/website-materials/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="https://www.php.cn/ko/toolset/website-materials/3076" target="_blank" title="노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)">[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-materials/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="https://www.php.cn/ko/toolset/website-materials/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="https://www.php.cn/ko/toolset/website-materials/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="https://www.php.cn/ko/toolset/website-materials/3072" target="_blank" title="플랫 스타일 식목일 배너 벡터 자료(AI+EPS)">[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-materials/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="https://www.php.cn/ko/toolset/website-source-code/8328" target="_blank" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8327" target="_blank" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8326" target="_blank" title="디자이너 크리에이티브 작업 이력서 웹 템플릿">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8325" target="_blank" title="현대 엔지니어링 건설 회사 웹사이트 템플릿">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8324" target="_blank" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8323" target="_blank" title="온라인 전자책 쇼핑몰 웹사이트 템플릿">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-code/8322" target="_blank" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="https://www.php.cn/ko/toolset/website-source-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>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
<a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
<a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<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?1742633565"></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>
<!-- Matomo -->
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->
</body>
</html> 
