찾다

HTML 입문 튜토리얼

Jun 26, 2017 pm 03:17 PM
html시작하기

1. HTML 소개

HTML(Hypertext Markup Language)은 웹 페이지 문서를 설명하는 데 사용되는 마크업 언어입니다.

HTML 태그는 HTML 태그라고도 합니다. HTML은 단락 태그, 제목 태그, 하이퍼링크 태그, 그림 태그 등과 같은 많은 태그를 제공합니다. 웹 페이지에서 정의해야 하는 내용은 해당 HTML 태그로 설명할 수 있습니다.

2. HTML 구조

 1 nbsp;html><!-- 表示HTML5文档协议声明标签,协议的不同会影响整个页面的显示效果 --> 2 <!-- <html>表示文档标签 --> 3 <!-- <head>标签表示文档的头部标签,在<head>标签中的信息是用于给浏览器识别的内容,如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 --> 4     <meta> 5     <!-- 这是注释,不会显示在网页上,注释的内容写在符号之间 --> 6     <title>第一个HTML文件</title><!-- <title>表示该文档的标题 --> 7  8  9 <!-- <body>标签为我们在浏览器中看到的内容 -->10     第一个HTML文件11  12 

댓글 내용은 기호 사이에 작성되며, 브라우저에서 실행되는 효과는 다음과 같습니다

3 , HTML 헤드 태그

3.1, 태그

태그는 문서 앞에 위치하며 현재 HTML 또는 XHTML 표준 사양을 브라우저에 표시하는 데 사용됩니다. 문서 용도. 주로 브라우저가 문서 태그를 구문 분석하는 기반으로 사용됩니다.

태그는 브라우저 호환성과 관련이 있습니다. 을 삭제하면 브라우저에 HTML 페이지의 내용이 표시됩니다. 이때 페이지에는 IE6, IE7, IE8, Firefox2, Firefox3, Chrome 등의 브라우저 수 만큼의 표시 효과가 있을 수 있으나 이는 허용되지 않습니다.

3.2, 태그

태그는 루트 태그라고도 하며 브라우저에 HTML 문서임을 알리는 데 사용됩니다. 태그 HTML 문서의 시작을 표시하는 태그는 HTML 문서의 끝을 표시합니다. 모든 태그는 두 개의 닫는 태그 와 사이에 작성되어야 합니다. 검색 엔진이 문서를 구문 분석하는 데 도움이 되도록 lang 속성을 통해 현재 문서의 기본 언어를 설정할 수 있습니다. 예를 들어, .

3.3, 태그

태그는 태그 바로 뒤에 있는 head 태그라고도 하는 HTML 문서의 헤더 정보를 정의하는 데 사용됩니다. head 태그로 정의된 콘텐츠는 브라우저에만 제공되며 사용자 프레젠테이션에는 사용되지 않습니다. 제목, 작성자 및 관계를 설명하는 데 사용되는 , <meta>, <link> 및 <style> 등과 같이 문서 헤드에 있는 다른 태그를 캡슐화하는 데 주로 사용됩니다. 문서의 다른 문서 등. <span style="color: #ff00ff; font-size: 16px;">HTML 문서에는 <head> 태그 한 쌍만 포함될 수 있습니다. 대부분의 문서 헤더에 포함된 데이터는 실제로 페이지에 콘텐츠로 표시되지 않습니다. <br/><br/><h4>3.4, <meta> 태그 <p><meta> 태그는 검색 엔진에 대한 설명, 키워드, 업데이트 빈도 등 페이지에 대한 메타 정보를 제공할 수 있습니다. <p><meta> 태그는 문서의 머리 부분에 있으며 어떤 내용도 포함하지 않습니다. <meta> 태그의 속성은 문서와 관련된 이름/값 쌍을 정의합니다. 예: <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta name="keywords" content="HTML,ASP,PHP,SQL"><p> "키워드"는 자주 사용되는 이름입니다. 문서의 키워드 세트를 정의합니다. 일부 검색 엔진에서는 이러한 키워드를 사용하여 문서가 발견될 때 문서를 분류합니다. <br/><br/><h4>3.5, <title> 태그 <p><title> 태그는 HTML 페이지의 제목을 정의하는 데 사용됩니다. 즉, 웹 페이지에 이름을 지정하는 데 사용되며 <head> 꼬리표. HTML 문서에는 <title></style> </title> 태그 쌍만 포함될 수 있습니다. 기본 문법 형식은 다음과 같습니다. <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><title>网页标题名称</title></pre></div> <p><span style="font-size: 16px; color: #ff00ff;">제목 태그는 웹 사이트 SEO에 매우 중요하며, 제목의 품질은 웹 사이트의 SEO에 직접적인 영향을 미칩니다. </span><br><br></p> <h4 id="link-태그">3.6, <link> 태그 </h4> <p><link> 태그는 외부 CSS 파일을 링크하는 데 가장 일반적으로 사용됩니다. </p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><link></pre></div> <p>또한 웹사이트 아이콘을 소개하는 데에도 사용할 수 있습니다</p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><link></pre> </div> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/7521b8227cc686766ee6725e3c937478-1.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <p> </p> <h3 id="HTML-콘텐츠-태그">4. HTML 콘텐츠 태그 </h3> <h4 id="제목-태그">4.1. 제목 태그 </h4> <p> 제목 태그는 </p> <h1> - <h6 id="로-표시되며-여기서-h-h-은-h-부터-h-까지의-가장-작은-제목을-정의하며-현재-문서에-비해-중요도가-낮습니다-h-태그는-전체-페이지에-최대-한-번만-표시하는-것이-좋습니다-물론-초과할-수-있지만-SEO-검색에-도움이-되지-않습니다-span-style-font-size-px-color-ff-ff-제목-태그는-문서-내용의-중요성을-전달하는-데-사용됩니다-span-단지-굵게-또는-큰-텍스트를-생성하기-위해-제목을-사용하지-마세요">로 표시되며, 여기서 <h1> <h6>은 <h1>부터 <h6>까지의 가장 작은 제목을 정의하며 현재 문서에 비해 중요도가 낮습니다. h1 태그는 전체 페이지에 최대 한 번만 표시하는 것이 좋습니다(물론 초과할 수 있지만 SEO 검색에 도움이 되지 않습니다). <span style="font-size: 16px; color: #ff00ff;">제목 태그는 문서 내용의 중요성을 전달하는 데 사용됩니다</span>. 단지 굵게 또는 큰 텍스트를 생성하기 위해 제목을 사용하지 마세요. </h6> </h1> </h6> </h1> </h6> </h1> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b2d0086c776e4dd4c081b8c3c9c17772-2.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b2d0086c776e4dd4c081b8c3c9c17772-3.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <p><span style="color: #ff00ff; font-size: 16px;">참고: 브라우저는 제목 앞뒤에 빈 줄을 자동으로 추가합니다. </span></p> <h4 id="단락-태그">4.2. 단락 태그 </h4> <p> 단락은 </p> <p> 태그를 통해 정의됩니다. p 태그는 한 줄을 공유하지 않지만 한 줄 이상의 공간을 차지합니다. </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b2d0086c776e4dd4c081b8c3c9c17772-4.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-5.png?x-oss-process=image/resize,p_40" class="lazy" alt="">  </p> <h4 id="가로줄-표시">4.3. 가로줄 표시 </h4> <p>hr 태그는 페이지에 가로줄을 삽입하는 것을 의미합니다. <span style="color: #ff00ff; font-size: 16px;">hr 태그는 단일 태그이므로 닫을 필요가 없습니다. </span></p> <p>  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-7.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>4.4. 줄 바꿈 태그 <h4></h4> <br>는 <p>단일 태그<span style="font-size: 16px; color: #ff00ff;">이기도 한 간단한 줄 바꿈을 삽입할 수 있으며 닫는 태그가 필요하지 않습니다. </span></p> <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/93b5d2ff7156018c4882a3ecff1ab0b2-8.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/1051e1f8cf622765bc11a607dd5e2551-9.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>4.5.span 태그 <h4></h4> <span> 태그는 문서의 인라인 요소를 결합하는 데 사용됩니다. 일반적으로 범위 태그에는 스타일을 지정해야 합니다. 그렇지 않으면 페이지의 다른 텍스트와 구별할 수 없게 됩니다. <p></p> <p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/1051e1f8cf622765bc11a607dd5e2551-10.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/1051e1f8cf622765bc11a607dd5e2551-11.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>4.6, div 태그 <h4></h4> <div> 요소는 스타일을 사용하여 형식을 지정할 수 있도록 블록 수준 요소를 결합합니다. <p></p> <p>  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-12.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-13.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>4.7, img 태그 <h4></h4> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 입문 튜토리얼" > 기술적으로 말하면 <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 입문 튜토리얼" > 태그는 웹 페이지에 이미지를 삽입하지 않습니다. 웹페이지 링크. <span style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 입문 튜토리얼" > 태그는 참조된 이미지를 위한 자리 표시자 공간을 만듭니다. </span></p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML 입문 튜토리얼" > 태그에는 src 속성과 alt 속성이라는 두 가지 필수 속성이 있습니다. <p></p> <p>  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/e57ab189241f6c0bed74aca321e3aca3-14.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8c3ae83c5f1506f33dad53805cf414a0-15.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>5, HTML 고급 태그 <h3></h3>5.1, 목록 태그 <h4></h4>5.1.1, 정렬되지 않은 목록 <h5></h5>정렬되지 않은 목록은 ul 태그로 표시되고, 목록 항목은 li 태그로 표시되며, <p>Unordered 목록이 있습니다. 다양한 목록 항목 사이에는 순서 수준이 없으며 병렬입니다. <span style="max-width:90%"><span style="color: #ff00ff; font-size: 16px;"></span>  </span></p> <p>5.1.2 순서가 지정된 목록 <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8c3ae83c5f1506f33dad53805cf414a0-16.png?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/7f6e465cd7303cd559a16db04ea3d3e0-17.png?x-oss-process=image/resize,p_40" class="lazy" alt="">순서가 있는 목록은 ol 태그로 표시되며 목록 항목도 li 태그로 표시됩니다. 각 목록 항목은 특정 순서로 정의됩니다</p> <h5></h5>5.1.3. 사용자 정의 목록<p><span style="font-size: 16px; color: #ff00ff;">사용자 정의 목록은 용어나 명사를 설명하고 설명하는 데 자주 사용됩니다. </span></p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8d4bb3e16f60a4bd67fb17c618e5bf5f-20.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8d4bb3e16f60a4bd67fb17c618e5bf5f-21.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <h4 id="테이블-태그">5.2 테이블 태그</h4> <p>간단한 HTML 테이블은 테이블 요소와 하나 이상의 tr, th 또는 td 요소로 구성됩니다. tr 요소는 테이블 헤더를 정의하고, t 요소는 td를 정의합니다. 요소는 테이블 단위를 정의합니다. </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/8d4bb3e16f60a4bd67fb17c618e5bf5f-22.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/103ea6f3942105647a54088462301bc1-23.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <h4 id="양식-라벨">5.3, 양식 라벨 </h4> <h5 id="양식-라벨">5.3.1, 양식 라벨 </h5> <p>전체 양식의 콘텐츠를 래핑하는 데 사용되는 양식의 필드 라벨입니다. 양식은 사용자가 백엔드에 데이터를 제출하기 위한 가상 목록입니다. 양식은 일반적으로 텍스트 상자, 드롭다운 목록, 라디오 선택, 다중 선택, 텍스트 필드 등으로 구성됩니다. Action 속성은 가리키는 주소를 지정하는 데 사용됩니다. 현재 양식이 제출되면 백엔드에 추가됩니다. <br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/103ea6f3942105647a54088462301bc1-24.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/103ea6f3942105647a54088462301bc1-25.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">  </p> <h5 id="입력-태그">5.3.2, 입력 태그 </h5> <p>입력 태그는 텍스트 상자, 라디오 선택, 다중 선택, 버튼 등입니다. <span style="font-size: 16px; color: #ff00ff;">Type 속성의 다양한 값에 따라 입력 태그의 역할이 결정됩니다. </span></p> <p>텍스트 상자: text<br>비밀번호 상자: 비밀번호<br>라디오 선택: radio<br>다중 선택: 체크박스<br>버튼: 버튼<br>제출 버튼: 제출<br>재설정 버튼: 재설정<br><br></p> <p>입력 태그의 체크된 속성, value is only 체크된 속성 값은 생략 가능합니다. 즉, 라디오 버튼과 다중 선택 버튼에서 해당 버튼이 선택되었음을 의미합니다. </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/556c2f5f17f10703365154b3eba3b38d-26.png?x-oss-process=image/resize,p_40" class="lazy" alt="">  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/556c2f5f17f10703365154b3eba3b38d-27.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <p> </p> <h5 id="Select-태그">5.3.3. Select 태그 </h5> <p> select 요소는 단일 선택 또는 다중 선택 메뉴를 생성할 수 있으며 <select> 목록에서 사용 가능한 옵션. </select></p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b87b341e55fcc435a4a6aa7390b38c21-28.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b87b341e55fcc435a4a6aa7390b38c21-29.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <p>Multipe: 단일 속성이기도 합니다. 다중 값은 하나만 있습니다. 이 속성을 설정하면 select 태그가 목록 태그처럼 작동합니다. 그렇지 않으면 드롭다운 목록 레이블을 나타냅니다. </p> <p> </p> <h5 id="텍스트-영역-라벨">5.3.4.텍스트 영역 라벨 </h5> <p>텍스트 영역 텍스트 영역 라벨, 많은 양의 텍스트를 입력하는 데 사용되는 라벨입니다. 텍스트 필드 레이블의 열은 수용할 수 있는 문자 열 수를 나타냅니다. 행에 보관되는 데이터 행 수입니다. </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/b87b341e55fcc435a4a6aa7390b38c21-30.png?x-oss-process=image/resize,p_40" class="lazy" alt="">  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/80ea271348d878577289dc6c3deec3a3-31.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <p> </p> <h5 id="라벨-라벨">5.3.5, 라벨 라벨 </h5> <p>Lable 라벨을 사용하면 라벨이 가리키는 라벨 양식 라벨을 사용하여 라벨 텍스트를 클릭할 때 초점을 맞출 수 있습니다. </p> <p>두 가지 방법: 1. for 속성을 사용하여 양식 라벨을 가리킵니다. 2. 라벨 라벨을 사용하여 양식 라벨을 래핑합니다. </p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/80ea271348d878577289dc6c3deec3a3-32.png?x-oss-process=image/resize,p_40" class="lazy" alt=""> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/001/80ea271348d878577289dc6c3deec3a3-33.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <p></p> </div></span><p>위 내용은 HTML 입문 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">성명</div><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="phpgenera_Details_mainL4"><div class="phpmain1_2_top"><a href="javascript:void(0);" class="phpmain1_2_top_title">관련 기사<img class="lazy" data-src="/static/imghwm/index2_title2.png" src="/static/imghw/default1.png" alt="" /></a></div><div class="phpgenera_Details_mainL4_info"><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803889.html" title="HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174611540273549.jpg?x-oss-process=image/resize,p_40" alt="HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803889.html" title="HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?" class="phphistorical_Version2_mids_title">HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?</a><span class="Articlelist_txts_time">May 02, 2025 am 12:03 AM</span><p class="Articlelist_txts_p">htmltagsareessentialforwebdevelopmentasthuctureandenhancewebpages.1) thefinelayout, semantics 및 internactivity.2) semantictagsimproveAccessibility 및 sseo.3) appleasoftagscanoptimizeperformanceandenseRocRossercompatiber.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803630.html" title="HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오." class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174602888058018.jpg?x-oss-process=image/resize,p_40" alt="HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오." src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803630.html" title="HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오." class="phphistorical_Version2_mids_title">HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.</a><span class="Articlelist_txts_time">May 01, 2025 am 12:01 AM</span><p class="Articlelist_txts_p">일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803517.html" title="Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/174531649964017.jpg?x-oss-process=image/resize,p_40" alt="Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803517.html" title="Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_title">Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:24 PM</span><p class="Articlelist_txts_p">솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803513.html" title="DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/174531772592895.jpg?x-oss-process=image/resize,p_40" alt="DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803513.html" title="DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?" class="phphistorical_Version2_mids_title">DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:21 PM</span><p class="Articlelist_txts_p">마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803509.html" title="HTML 비디오의 재생 제어 스타일 수정 방법" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/503/042/174537198390896.jpg?x-oss-process=image/resize,p_40" alt="HTML 비디오의 재생 제어 스타일 수정 방법" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803509.html" title="HTML 비디오의 재생 제어 스타일 수정 방법" class="phphistorical_Version2_mids_title">HTML 비디오의 재생 제어 스타일 수정 방법</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:18 PM</span><p class="Articlelist_txts_p">HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803505.html" title="휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/174539556427851.jpg?x-oss-process=image/resize,p_40" alt="휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803505.html" title="휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?" class="phphistorical_Version2_mids_title">휴대 전화에서 기본 선택을 사용하면 어떤 문제가 발생합니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:15 PM</span><p class="Articlelist_txts_p">휴대 전화에서 기본 선택을 사용하는 데있어 잠재적 인 문제는 모바일 애플리케이션을 개발할 때 종종 상자를 선택해야 할 필요가 있습니다. 일반적으로 개발자 ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803501.html" title="휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/174539689375240.jpg?x-oss-process=image/resize,p_40" alt="휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803501.html" title="휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?" class="phphistorical_Version2_mids_title">휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:12 PM</span><p class="Articlelist_txts_p">휴대 전화에서 기본 선택을 사용하는 단점은 무엇입니까? 모바일 장치에서 애플리케이션을 개발할 때는 올바른 UI 구성 요소를 선택하는 것이 매우 중요합니다. 많은 개발자 ...</p></div><div class="phphistorical_Version2_mids"><a href="https://m.php.cn/ko/faq/1796803497.html" title="Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/article/001/246/273/174540087224288.jpg?x-oss-process=image/resize,p_40" alt="Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?" src="/static/imghw/default1.png" /></a><a href="https://m.php.cn/ko/faq/1796803497.html" title="Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_title">Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하는 방법은 무엇입니까?</a><span class="Articlelist_txts_time">Apr 30, 2025 pm 03:09 PM</span><p class="Articlelist_txts_p">Three.js 및 Octree를 사용하여 방에서 3 인칭 로밍의 충돌 처리를 최적화하십시오. 3.js의 Octree를 사용하여 방에서 3 인칭 로밍을 구현하고 충돌을 추가하십시오 ...</p></div></div><a href="https://m.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton"><span>See all articles</span><img class="lazy" data-src="/static/imghwm/down_right.png" src="/static/imghw/default1.png" alt="" /></a></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>핫 AI 도구</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>무료로 이미지를 벗다</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI 옷 제거제</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/ai/video-swap" title="Video Face Swap"class="phpmain_tab2_mids_title"><h3>Video Face Swap</h3></a><p>완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ko/ai">더보기</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>인기 기사</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796789525.html" title="Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 몇 주 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796793874.html" title="KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 몇 주 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796787760.html" title="Inzoi : 학교 및 대학에 지원하는 방법" class="phpgenera_Details_mainR4_bottom_title">Inzoi : 학교 및 대학에 지원하는 방법</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 몇 달 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796793871.html" title="KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 몇 주 전</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/1796788723.html" title="Atomfall에서 사이트 사무실 키를 찾을 위치" class="phpgenera_Details_mainR4_bottom_title">Atomfall에서 사이트 사무실 키를 찾을 위치</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 몇 주 전</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ko/article.html">더보기</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>뜨거운 도구</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/506" title="WebStorm Mac 버전" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d36e6254963493.png" src="/static/imghw/default1.png" alt="WebStorm Mac 버전" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/506" title="WebStorm Mac 버전" class="phpmain_tab2_mids_title"><h3>WebStorm Mac 버전</h3></a><p>유용한 JavaScript 개발 도구</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/1473" title="SublimeText3 영어 버전" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5aab40b1a662e720.jpg" src="/static/imghw/default1.png" alt="SublimeText3 영어 버전" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/1473" title="SublimeText3 영어 버전" class="phpmain_tab2_mids_title"><h3>SublimeText3 영어 버전</h3></a><p>권장 사항: Win 버전, 코드 프롬프트 지원!</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/1492" title="에디트플러스 중국어 크랙 버전" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/5e21527e79622256.png" src="/static/imghw/default1.png" alt="에디트플러스 중국어 크랙 버전" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/1492" title="에디트플러스 중국어 크랙 버전" class="phpmain_tab2_mids_title"><h3>에디트플러스 중국어 크랙 버전</h3></a><p>작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/502" title="ZendStudio 13.5.1 맥" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d3631514435840.png" src="/static/imghw/default1.png" alt="ZendStudio 13.5.1 맥" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/502" title="ZendStudio 13.5.1 맥" class="phpmain_tab2_mids_title"><h3>ZendStudio 13.5.1 맥</h3></a><p>강력한 PHP 통합 개발 환경</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/ko/toolset/development-tools/660" title="Atom Editor Mac 버전 다운로드" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ed8cfa94c1a582.jpg" src="/static/imghw/default1.png" alt="Atom Editor Mac 버전 다운로드" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/ko/toolset/development-tools/660" title="Atom Editor Mac 버전 다운로드" class="phpmain_tab2_mids_title"><h3>Atom Editor Mac 버전 다운로드</h3></a><p>가장 인기 있는 오픈 소스 편집기</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ko/ai">더보기</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>뜨거운 주제</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7907</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1652</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1411</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1303</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/ko/faq/php-tutorial" title="PHP 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">PHP 튜토리얼</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1248</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/ko/faq/zt">더보기</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></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' 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> 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><script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数,用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>