JavaScript와 DOM을 결합하여 동적으로 테이블 인스턴스 생성

소개
이 글에서는 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 id="image257" alt="sample1-tabledom.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429332.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 id="image258" alt="sample2a2.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429333.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 id="image259" alt="sample2b2.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429334.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 id="image260" alt="sample2c.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429335.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 id="image261" alt="sample2d.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429336.jpg"><br><ins datetime="2006-07-02T22:50:58">동적으로 테이블 생성(Sample1.html로 돌아가기) <strong></strong></ins> 나머지 기사는 Sample1.html로 돌아갑니다. 다음 그림은 예제에서 생성된 테이블의 객체 트리 구조를 보여줍니다. <br><br>HTML 테이블 구조 검토<strong></strong><br><img id="image257" alt="sample1-tabledom.jpg" src="http://files.jb51.net/file_images/article/201212/201212231429332.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="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=dom操作" target="_blank">dom操作</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/18264.html" title="간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴">
                        <span>이전 기사：간단한 접이식 및 확장 가능한 디렉토리 구현 코드_탐색 메뉴</span>
                    </a>
                                    <a href="http://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>
           <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/1796639331.html">NullPointerException은 무엇이며 어떻게 해결합니까?</a>
                            </div>
                            <div>2024-10-22 09:46:29</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796629482.html">초보자에서 코더까지: C 기초로 시작되는 여정</a>
                            </div>
                            <div>2024-10-13 13:53:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796628545.html">PHP로 웹 개발 잠금 해제: 초보자 가이드</a>
                            </div>
                            <div>2024-10-12 12:15:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796627928.html">C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길</a>
                            </div>
                            <div>2024-10-11 22:47:31</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796627806.html">코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍</a>
                            </div>
                            <div>2024-10-11 19:36:51</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796627670.html">내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C</a>
                            </div>
                            <div>2024-10-11 15:50:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796627643.html">C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구</a>
                            </div>
                            <div>2024-10-11 15:07:41</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796627620.html">PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계</a>
                            </div>
                            <div>2024-10-11 14:21:21</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796627574.html">Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드</a>
                            </div>
                            <div>2024-10-11 12:59:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/ko/faq/1796627539.html">코딩의 핵심: 초보자를 위한 Python의 힘 활용</a>
                            </div>
                            <div>2024-10-11 12:17:31</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/176407.html"  target="_blank" title="자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다." class="wdcdcTitle">자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다.</a>
                            <a href="http://www.php.cn/ko/wenda/176407.html" class="wdcdcCons">처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-19 15:37:47</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>1361</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/176390.html"  target="_blank" title="스도쿠 검사기가 작동하지 않나요? 오류를 식별하는 데 도움을 줄 수 있는 사람이 있나요?" class="wdcdcTitle">스도쿠 검사기가 작동하지 않나요? 오류를 식별하는 데 도움을 줄 수 있는 사람이 있나요?</a>
                            <a href="http://www.php.cn/ko/wenda/176390.html" class="wdcdcCons">온라인 편집기에서 모든 것을 시도했지만 여전히 오류가 발생합니다. 하지만 내 컴퓨터의 VSCode에서 이 작업을 수행하면 제대로 작동합니다. 혼란스러워서 버그를 ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 21:21:07</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>474</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/176374.html"  target="_blank" title="웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까?" class="wdcdcTitle">웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까?</a>
                            <a href="http://www.php.cn/ko/wenda/176374.html" class="wdcdcCons">웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 19:13:16</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>476</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/176346.html"  target="_blank" title="클리어 후에도 내 파일 입력값은 그대로 남아있습니다" class="wdcdcTitle">클리어 후에도 내 파일 입력값은 그대로 남아있습니다</a>
                            <a href="http://www.php.cn/ko/wenda/176346.html" class="wdcdcCons">스크린샷에서 볼 수 있듯이. 파일을 선택하고 페이지를 새로 고치지 않고 팝업을 유지한 후 다시 열면 파일 입력이 여전히 내가 선택한 파일입니다. <input...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 15:44:52</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>384</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/176339.html"  target="_blank" title="MySQL의 가치를 얻으세요" class="wdcdcTitle">MySQL의 가치를 얻으세요</a>
                            <a href="http://www.php.cn/ko/wenda/176339.html" class="wdcdcCons">어제부터 이 값(그림 참조)을 얻으려고 노력 중이므로 "mysqlreader,executescalar 등"을 사용해 보았지만 행 수를 얻을 수 ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 14:45: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>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/sdszhbjyspm"><img src="https://img.php.cn/upload/subject/202407/22/2024072213252320615.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="상위 10개 디지털 화폐 거래소 순위" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/sdszhbjyspm" class="title-a-spanl" title="상위 10개 디지털 화폐 거래소 순위"><span>상위 10개 디지털 화폐 거래소 순위</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ko/faq/javajavascrip"><img src="https://img.php.cn/upload/subject/202407/22/2024072212191328676.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="자바와 자바스크립트의 차이점과 연관성" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/javajavascrip" class="title-a-spanl" title="자바와 자바스크립트의 차이점과 연관성"><span>자바와 자바스크립트의 차이점과 연관성</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ko/faq/webstormcjhtm"><img src="https://img.php.cn/upload/subject/202407/22/2024072212130892630.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="웹스톰으로 HTML을 만드는 방법" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/webstormcjhtm" class="title-a-spanl" title="웹스톰으로 HTML을 만드는 방법"><span>웹스톰으로 HTML을 만드는 방법</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ko/faq/jsjyyly"><img src="https://img.php.cn/upload/subject/202407/22/2024072214192342486.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="컴퓨터 응용 분야" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/jsjyyly" class="title-a-spanl" title="컴퓨터 응용 분야"><span>컴퓨터 응용 분야</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ko/faq/filbssjg"><img src="https://img.php.cn/upload/subject/202407/22/2024072213213124360.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="필 통화 가격 실시간 가격" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/filbssjg" class="title-a-spanl" title="필 통화 가격 실시간 가격"><span>필 통화 가격 실시간 가격</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ko/faq/sjccjmdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213505048069.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="데이터 저장 암호화 방법" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/sjccjmdff" class="title-a-spanl" title="데이터 저장 암호화 방법"><span>데이터 저장 암호화 방법</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ko/faq/csssjxzmx"><img src="https://img.php.cn/upload/subject/202407/22/2024072214174427622.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS에서 삼각형을 작성하는 방법" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/csssjxzmx" class="title-a-spanl" title="CSS에서 삼각형을 작성하는 방법"><span>CSS에서 삼각형을 작성하는 방법</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/ko/faq/bjbdc"><img src="https://img.php.cn/upload/subject/202407/22/2024072214414861004.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="어떤 노트북 배터리 테스트 소프트웨어가 가장 좋나요?" /> </a>
                            <a target="_blank" href="http://www.php.cn/ko/faq/bjbdc" class="title-a-spanl" title="어떤 노트북 배터리 테스트 소프트웨어가 가장 좋나요?"><span>어떤 노트북 배터리 테스트 소프트웨어가 가장 좋나요?</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>1417909 <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>4259049 <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>2487945 <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>504317 <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>859097 <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 >1417909 학습 시간</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 >2487945 학습 시간</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 >504317 학습 시간</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 >215374 학습 시간</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 >880158 학습 시간</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 >6603 학습 시간</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 >5132 학습 시간</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 >4301 학습 시간</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 >638 학습 시간</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 >21897 학습 시간</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/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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://www.php.cn/ko/about/us.html">회사 소개</a>
            <a href="http://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
            <a href="http://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?1731679274"></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>
JavaScript와 DOM을 결합하여 동적으로 테이블 인스턴스 생성_기본 지식
