자신_HTML/Xhtml_웹페이지 제작별로 구성된 DIV의 일반적으로 사용되는 속성 종합 목록-HTML 튜토리얼-php.cn

1. 속성 목록

코드 복사

코드는 다음과 같습니다.

color: #999999 텍스트 색상
font-family: 노래 스타일 글꼴
font-size: 10pt 텍스트 크기
font-style:itelic 텍스트 기울임꼴 스타일
font-variant:small- caps small Font
letter-spacing: 1pt 텍스트 간격
line-height: 200% 줄 높이 설정
font-weight:bold Textbold
vertical-align:sub Subscript
vertical -align :super Superscript
text-dresseration:line-through 줄을 나누려면 ?h 추가
text-design:overline 윗줄 추가
text-꾸밈:underline 밑줄 추가
text-꾸밈: 없음 ?hExcept 결론 연결용
text-transform: capitalize 첫 번째 단어는 대문자로
text-transform: 대문자 영어 대문자
text-transform: 소문자 영어 쓰기
text-align:right Text * right- 정렬
text-align:왼쪽 텍스트*왼쪽 정렬
text-align:가운데 텍스트 가운데 정렬
CSS 페이지에 적용할 수 있는 몇 가지 간단한 텍스트 효과입니다.
배경
배경색: 검정색 배경색
배경이미지: url(image/bg.gif) 배경 이미지
배경첨부: 고정 고정배경
배경반복: 반복 반복 배열 - 웹페이지 기본
background-repeat: no-repeat 비반복 배열
background-repeat:peat-x는 x축에서 배열을 반복합니다
background-repeat:repeat-y는 배열을 반복합니다. y축
배경 위치: 90% 90% 배경 이미지의 x 및 y축 위치
링크
A 모든 하이퍼링크
A:link 하이퍼링크 텍스트 형식
A :visited 탐색된 링크 텍스트 형식
A:active 연결 형식 누르기
A:hover 마우스를 연결
테두리
border-top: 1px 검정색 상단 프레임
border-bottom으로 이동 : 1px 실선 #6699cc 하단 프레임
border-left : 1px 실선 #6699cc 왼쪽 테두리
border-right : 1px 실선 #6699cc 오른쪽 테두리
border-1px 실선 #6699cc 4개의 테두리
점선

<br>실선<br><TEXTAREA STYLE="border:1px solid pink"> 텍스트의 줄 높이와 동일, 즉 line- 높이와 높이의 값이 동일하면 충분합니다. 마지막으로 div에 오버플로: 숨김을 지정하여 초과된 부분을 숨깁니다. <br><br>
</div>
<br> 2. 공통 속성 <strong> </strong> <br><br><div class="msgheader">
<div class="right">
<span style="CURSOR: pointer" onclick="copycode(getid('phpcode95'));">코드 복사<u></u></span>코드 다음과 같습니다.</div>
<div class="msgborder" id="phpcode95"> <br>1. 높이: DIV의 높이를 설정합니다. 너비: DIV의 너비를 설정합니다. <br>2. Margin: DIV의 확장된 여백(상위 컨테이너까지의 거리)을 설정하는 데 사용됩니다. margin: 뒤에는 상위 컨테이너의 위쪽, 오른쪽, 아래쪽 및 왼쪽으로부터 각각 4개의 거리가 옵니다. margin: [top][right][bottom][left] <br> 별도로 설정할 수 있습니다: margin-left: 거리 margin-right: 부모 컨테이너의 오른쪽 테두리까지의 거리 margin-top: 부모 컨테이너의 아래쪽 테두리까지의 거리 상위 컨테이너. <br>3. 패딩: DIV의 내부 여백(내부 요소와 DIV 경계 사이의 거리)을 설정하는 데 사용됩니다. padding: 그 뒤에 상위 컨테이너의 위쪽, 오른쪽, 아래쪽 및 왼쪽으로부터의 거리인 4개의 거리가 옵니다. margin: [top][right][bottom][left]: 거리는 다음과 같이 설정됩니다. 패딩은 자체 너비 및 높이 내(IE7 및 FF)에 포함되지 않습니다. 예를 들어 DIV의 너비가 100px로 설정되고 padding-left가 50px로 설정된 경우 DIV의 너비는 150px입니다. 페이지에 표시됩니다. <br>4. 테두리: DIV 표시의 테두리 스타일을 설정합니다. 표시 속성을 설정합니다. 해당 값에는 블록 및 없음이 포함되며, 부동 소수점: 페이지에서 DIV의 흐름 방향을 설정합니다. 해당 값에는 왼쪽(왼쪽에 표시됨), 오른쪽(오른쪽에 표시됨) 및 없음이 포함됩니다. <br> DIV의 배경 스타일을 설정하면 배경 색상, 배경 이미지, 타일링 방법 및 기타 스타일을 직접 따를 수 있습니다. 다음 속성을 사용하여 별도로 설정할 수도 있습니다. <br>Background-color: 배경색을 설정합니다. background-attachment: 배경 이미지의 첨부 방법, 해당 값은 스크롤 및 고정입니다. background-image: 기존 배경 이미지를 지정합니다. 배경 이미지의 타일링 방법. 해당 값에는 no-repeat(타일링되지 않음), 반복(두 방향으로 타일링됨),peat-x(가로 타일링),repeat-y(세로 타일링)가 포함됩니다. background-position: DIV에서 배경 위치를 지정합니다. 그 값은 상단 하단 왼쪽 오른쪽의 다양한 조합을 갖습니다. 좌표를 사용하여 특정 위치를 지정할 수도 있습니다. <br>5. 위치: DIV의 위치 지정 방법을 설정합니다. 위치에는 정적, 고정, 상대 및 절대의 네 가지 속성이 있습니다. 일반적으로 상대적인 것과 절대적인 것이 사용됩니다. 정적으로 지정된 경우 DIV는 HTML 규칙을 따릅니다. 상대 항목으로 지정된 경우 위쪽, 왼쪽, 오른쪽 및 아래쪽을 사용하여 페이지에서 DIV의 오프셋(자체 오프셋을 기준으로)을 설정할 수 있습니다. 현재 레이어는 사용할 수 없습니다. 절대값으로 지정하면 위쪽, 왼쪽, 오른쪽 및 아래쪽을 사용하여 DIV를 가장 가까운 상위 요소에 절대 위치로 지정할 수 있습니다. IE7과 FF의 DIV는 화면을 기준으로 고정되어 있습니다. 변경 사항이 없으며 IE6에서는 효과가 없습니다(이유는 모르겠습니다). <br>6. DIV의 텍스트 스타일을 지정합니다. 그 뒤에는 다양한 텍스트 스타일이 올 수 있습니다. 글꼴 패밀리: 사용할 글꼴 이름을 설정합니다. 글꼴 무게: 텍스트의 두께를 지정합니다. 해당 값에는 굵은 글꼴, 라이터 등이 포함됩니다. 텍스트 스타일을 지정합니다. 값에는 기울임꼴 일반 경사 등이 포함됩니다. color: 텍스트 색상을 지정합니다. -데코레이터: 텍스트 장식에 사용됩니다. 해당 값에는 밑줄 없음 및 깜박임 조합이 포함됩니다. 텍스트 들여쓰기: 텍스트의 대소문자를 설정합니다. 해당 값에는 소문자 대문자 대문자(첫 글자를 대문자로 표시)가 포함됩니다. 없음 방향: 콘텐츠의 흐름 방향. 해당 값에는 ltr(왼쪽에서 오른쪽으로), rtl(오른쪽에서 왼쪽으로)이 포함됩니다. line-height: 텍스트의 줄 높이를 지정합니다. Word-spacing: 단어 간격. <br>7. 오버플로: 콘텐츠 오버플로 제어. 해당 값에는 스크롤(스크롤 막대가 항상 표시됨), 표시(스크롤 막대가 표시되지 않지만 초과 부분이 표시됨), 자동(콘텐츠가 표시될 때 스크롤 막대가 표시됨)이 포함됩니다. 초과) 및 숨김(콘텐츠가 초과되면 스크롤 막대가 표시됨)이 있습니다. <br>
</div>
<br><strong>3. 일부 특수 효과: <br><br></strong>1. z-index: DIV의 스택 순서를 설정합니다. z-index 속성을 사용할 때 위치는 절대값으로 지정되어야 합니다. <br><br>2. 커서: DIV의 커서 스타일을 설정합니다. <br><br>3. 클립: 클리핑 사각형을 설정합니다. Clip:Rect(top right lower left); 상, 하, 좌, 우 사이의 거리를 설정하는데, 이때 위치는 절대값으로 지정해야 합니다. <br><br>4. 불투명도 투명도 필터:alpha(opacity=value) 예: filter:alpha(opacity=50);opacity:0.5; <br><br><strong>4. </strong><br><br>절대 위치와 상대 위치(위치)<strong> </strong><br>절대 위치: <br><br>위치 속성이 네티즌 행복의 열쇠가 될 것입니다: <br><br>H4 { 위치: 절대; 왼쪽: 100px; 상단: 43px } <br><br>이 CSS 규칙을 사용하면 브라우저는 브라우저 픽셀의 왼쪽에서 정확히 100개의 아이콘의 시작 위치를 설정할 수 있습니다. 상단에서 43픽셀입니다. 여기에서는 왼쪽과 위쪽만 설정됩니다. 즉, 텍스트는 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 브라우저 창에 입력됩니다. <br><br>left 및 top 속성은 매우 직관적입니다. Left(왼쪽)는 브라우저 창 왼쪽으로부터의 거리를 설정하고, top(상단)은 브라우저 창 상단으로부터의 거리를 설정합니다. 이러한 거리를 설정할 때 배운 다양한 각도 단위나 척도 값을 사용할 수 있습니다. 스케일 값을 사용할 때 스케일 값은 상위 피처의 치수를 기준으로 합니다. <br><br>무엇을 타겟팅할 수 있나요? 아무것! 단락, 단어, GIF 및 JPEG 이미지, QUICKTIME 동영상 등. <br><br>상대 위치 지정: <br><br>절대 위치 지정을 사용하면 페이지에 있는 다른 요소의 위치 지정 설정에 관계없이 페이지의 독립적인 위치에 요소를 정확하게 배치할 수 있습니다. 상대 위치 지정은 위치를 지정하는 기능의 위치가 파일에서 할당된 위치를 기준으로 함을 의미합니다. 예: <br><br>I { position:relative; left: 40px; top: 10px } <br><br>상대 위치 지정의 핵심은 위치 지정 요소의 위치가 일반적으로 있어야 하는 위치를 기준으로 한다는 것입니다. . 상대 위치 지정 장치는 일반 정적 위치 지정 장치의 줄 사이에 나타나며 정적 위치 지정 장치와 완전히 분리되지 않은 상태로 위치 지정됩니다. 상대 위치 지정 사용을 중지하면 텍스트 표시 위치가 정상으로 돌아갑니다. 상대 위치 지정을 사용할 때는 주의하십시오. 그렇지 않으면 페이지가 쉽게 복잡해질 수 있습니다. <br><br>상대 위치 지정 및 절대 위치 지정 외에도 정적 매개변수 값을 사용할 수도 있습니다. Static은 position 속성의 기본값입니다. 사용법은 일반 HTML의 위치 지정 방법과 동일하며 특별한 위치 지정 설정을 추가할 수 없습니다. 즉, margin 속성이나 float 속성을 사용하여 셀을 부동시키는 것 외에는 다른 어떤 것도 셀 위치 지정에 영향을 줄 수 없습니다. <br><br><br>포지셔닝 유닛 제어(너비, 높이, 가시성)<strong> </strong><br>포지셔닝 유닛의 왼쪽 상단 위치를 제어하는 것 외에도 너비와 높이를 제어할 수도 있습니다. 장치의 높이 및 페이지의 장치 가시성입니다. <br><br>너비: 배치된 요소는 페이지에 표시될 때 여전히 왼쪽에서 오른쪽으로 표시됩니다. width 속성을 사용하여 오른쪽 문자 흐름에 대한 제한을 설정할 수 있습니다. 즉, 요소의 너비를 설정할 수 있습니다. <br><br>DIV { 위치: 절대; 왼쪽: 40px; 너비: 150px } <br><br>브라우저는 이 규칙을 수신하면 규칙에 지정된 효과에 따라 텍스트를 표시합니다. , 단락의 최대 가로 크기를 150픽셀로 제한합니다. <br><br>너비 속성은 절대 위치에 있는 지형지물에만 적용됩니다. 우리가 배운 길이 단위를 사용하거나 상위 기능에 상대적인 배율 값을 사용하여 너비를 설정할 수 있습니다. IE 4에서는 이 속성을 이미지에도 사용할 수 있습니다. 너비 설정을 통해 이미지를 인위적으로 넓히거나 압축할 수 있습니다. <br><br>높이: 이론적으로 높이는 너비와 유사하게 설정되어야 하지만 세로 방향은 다음과 같습니다. <br><br>DIV { position: left: 200px height: 150px; } <br><br>여기서는 일부 브라우저가 높이 속성을 지원하지 않기 때문에 "이론적으로"를 사용합니다. <br><br>가시성: CSS를 사용하면 요소가 페이지에 표시되지 않도록 숨길 수 있습니다. 이 속성은 발견된 지형지물과 발견되지 않은 지형지물 모두에 적용됩니다. <br><br>H4 { visible: hide } <br><br>옵션: <br><br>visible은 기능을 표시합니다<br><br>hidden은 기능을 숨깁니다<br><br>inherit 상위 기능의 가시성 설정을 상속합니다. <br><br>inherit 값이 기본값입니다. 이렇게 하면 셀이 상위 셀의 가시성을 상속하게 됩니다. 따라서 단락이 숨겨져 있으면 여기에 포함된 인라인 셀도 숨겨집니다. 이 상속은 명시적으로 지정된 가시성을 통해 재정의될 수 있습니다. 예를 들어, 섹션 내의 EM 셀이 표시되도록 지정되고 해당 섹션이 숨겨지면 해당 섹션 내의 다른 모든 콘텐츠는 사라지고 EM 셀의 텍스트만 표시됩니다. <br><br>요소가 숨겨져도 브라우저 창의 원래 공간을 차지합니다. 따라서 숨겨진 이미지 주위에 텍스트를 배치하면 텍스트가 빈 공간을 둘러싸는 것처럼 나타납니다. 이번 소식<br><br>이 속성은 언어를 작성할 때나 동적 HTML을 사용할 때 유용합니다. 예를 들어 특정 단락이나 이미지를 마우스로 가리킬 때만 표시되도록 할 수 있습니다. <br><br><br>단위 수준(Z-색인) <strong> </strong><br>z-index 속성은 화면에 셀을 쌓는 데 사용됩니다. 기본적으로 단위는 HTML 태그에 나타나는 순서대로 쌓입니다. 즉, 나중에 나타나는 단위는 먼저 나타나는 단위 위에 쌓입니다. Z-index 속성은 실제로 형제 단위의 스택 순서와 상위 단위를 기준으로 한 단위의 스택을 정의합니다. 초안 사양에 따르면 양의 z-index 값을 가진 단위 그룹은 상위 단위 위에 쌓이고 자체 쌓는 순서는 해당 값의 크기에 따라 결정됩니다(더 큰 값을 가진 단위는 위에 있음). 맨 위). 마찬가지로, 음수 z-index 값을 가진 유닛 그룹은 상위 유닛 아래에 쌓이고, 자체적인 쌓는 순서도 값의 크기에 따라 결정됩니다(예를 들어 더 큰 값을 가진 유닛은 상위 레이어에 있음). , 값이 -1인 유닛은 해당 유닛 위의 -2 계층에 있습니다. <br><br>이 매개변수 값에는 순수 정수를 사용하세요. Z-색인은 절대 위치 또는 상대적 위치에 있는 지형지물에 사용됩니다. 이미지의 Z-색인을 설정할 수도 있습니다. (커뮤니케이터의 경우 <IMG> 태그를 <SPAN> 또는 <DIV> 태그 내에 포함시킨 다음 <SPAN> 또는 <DIV>에 z-index를 적용하는 것이 가장 좋습니다.) <br><br> <strong>절대적으로 배치된 단위 자르기(클립) <br></strong><br>절대적으로 배치된 단위를 잘라낼 수 있습니다. 즉, 사용자에게 표시되는 영역을 잘라서 단위의 일부만 표시하고 나머지는 투명하게 만듭니다. . 이는 전통적인 텍스트 및 이미지 기반 웹 페이지에는 그다지 유용한 기능이 아닙니다. 그러나 이는 멀티미디어 페이지가 필요한 경우 유용합니다. 예를 들어, Netscape Communivator 4와 Internet Explorer 4는 모두 멀티미디어 페이지를 지원합니다. 이들은 문서의 스크립팅 인터페이스를 통해 장치 주변의 클리핑 영역을 동적으로 조정하여 실선 텍스트가 "교차"되고 이미지가 페이드 인되며 기타 표시 기능을 제공합니다. <br>clip : ret(top,right.bottom,left) <br><br>여기서 위쪽, 오른쪽, 아래쪽 및 왼쪽은 직사각형입니다. 클립 상자의 위치는 클립된 장치의 왼쪽 상단 모서리를 기준으로 한 상단, 오른쪽, 하단 및 왼쪽 가장자리의 위치입니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 값은 절대 또는 상대 길이 값(백분율 값은 아님)이거나 키워드 auto일 수 있습니다. 자동 값은 클리핑 영역의 모든 측면이 배치된 후 클리핑된 단위의 모든 콘텐츠가 이 영역을 초과하지 않음을 의미합니다. <br><br><br>제어 장치 오버플로(overflow) <br> <strong></strong>절대 또는 상대 위치 결정 장치의 너비와 높이를 수정합니다. 지정된 영역이 요구 사항을 충족하지 못할 가능성이 높습니다. 이로 인해 장치 내용이 오버플로됩니다. 오버플로를 사용하여 브라우저가 오버플로를 처리하는 방법을 지정할 수 있습니다. 값 없음(기본값)을 사용하면 브라우저가 오버플로 내용을 표시할 수 있으므로 셀이 지정된 영역을 오버플로할 수 있습니다. 값 클립을 사용하려면 브라우저가 셀의 하단과 오른쪽에 있는 셀 내용을 잘라야 합니다. 그러면 지정된 영역을 벗어나는 셀 내용이 표시되지 않습니다. 값 스크롤을 사용하려면 브라우저가 셀의 아래쪽과 오른쪽에 있는 셀 내용을 잘라야 합니다(클립과 동일). 그러나 브라우저는 사용자가 잘린 내용을 스크롤할 수 있도록 셀에 스크롤 막대를 제공해야 합니다. 콘텐츠.</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="https://www.php.cn/ko/search?word=div" target="_blank">div</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">원천：php.cn</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="https://www.php.cn/ko/faq/11566.html" title="간단한 진행바의 HTML CSS 제작_HTML/Xhtml_웹페이지 제작">
                        <span>이전 기사：간단한 진행바의 HTML CSS 제작_HTML/Xhtml_웹페이지 제작</span>
                    </a>
                                    <a href="https://www.php.cn/ko/faq/11570.html"  title="HTML4.0 요소 기본 스타일 배열_HTML/Xhtml_웹페이지 제작">
                        <span>다음 기사：HTML4.0 요소 기본 스타일 배열_HTML/Xhtml_웹페이지 제작</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">본 웹사이트의 성명</div>
                <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
            </div>
            <ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="2507867629"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">저자별 최신 기사</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/ko/faq/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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://www.php.cn/ko/wenda/176399.html"  target="_blank" title="Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다." class="wdcdcTitle">Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다.</a>
                            <a href="https://www.php.cn/ko/wenda/176399.html" class="wdcdcCons">나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 22:01:35</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>3</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>816</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ko/wenda/176388.html"  target="_blank" title="CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까?" class="wdcdcTitle">CSS에서 부동 요소를 수평이 아닌 수직으로 쌓는 방법은 무엇입니까?</a>
                            <a href="https://www.php.cn/ko/wenda/176388.html" class="wdcdcCons">한쪽에는 기본 콘텐츠가 있고 다른 한쪽에는 추가 콘텐츠가 있는 두 개의 열로 구성된 웹페이지를 만들려고 합니다. 하지만 float 속성을 사용하여 추가 열을 왼쪽...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 20: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>2</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>386</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ko/wenda/176383.html"  target="_blank" title="Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법" class="wdcdcTitle">Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법</a>
                            <a href="https://www.php.cn/ko/wenda/176383.html" class="wdcdcCons">livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 20:02:10</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>543</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ko/wenda/176379.html"  target="_blank" title="MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다." class="wdcdcTitle">MySQL SQL 쿼리를 사용하여 다른 테이블의 필드 합계를 계산합니다.</a>
                            <a href="https://www.php.cn/ko/wenda/176379.html" class="wdcdcCons">다음과 같은 스키마가 있습니다. "user_id" 및 "username" 속성이 있는 사용자 테이블과 "custome...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 19:39:29</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>441</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/ko/wenda/176368.html"  target="_blank" title="d3.js를 확대할 때 산점도 값이 유지되지 않습니다." class="wdcdcTitle">d3.js를 확대할 때 산점도 값이 유지되지 않습니다.</a>
                            <a href="https://www.php.cn/ko/wenda/176368.html" class="wdcdcCons">d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 에서 2024-04-06 18:16:26</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>403</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>

<div class="wzconZt" >
                <div class="wzczt-title">
                    <div>관련 주제</div>
                    <a href="https://www.php.cn/ko/faq/zt" target="_blank">더>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/divgdt"><img src="https://img.php.cn/upload/subject/202407/22/2024072214385242717.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="div 스크롤 막대" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/divgdt" class="title-a-spanl" title="div 스크롤 막대"><span>div 스크롤 막대</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/lgdivzmbpxs"><img src="https://img.php.cn/upload/subject/202407/22/2024072213521342494.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="두 개의 div를 나란히 표시하는 방법" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/lgdivzmbpxs" class="title-a-spanl" title="두 개의 div를 나란히 표시하는 방법"><span>두 개의 div를 나란히 표시하는 방법</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/divyspanqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072213514069307.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="div와 스팬의 차이점" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/divyspanqb" class="title-a-spanl" title="div와 스팬의 차이점"><span>div와 스팬의 차이점</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/divbqdyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213425821724.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="div 태그를 사용하는 방법" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/divbqdyf" class="title-a-spanl" title="div 태그를 사용하는 방법"><span>div 태그를 사용하는 방법</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/divwzczjzdff"><img src="https://img.php.cn/upload/subject/202407/22/2024072213315264396.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="div 텍스트를 세로로 가운데에 맞추는 방법" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/divwzczjzdff" class="title-a-spanl" title="div 텍스트를 세로로 가운데에 맞추는 방법"><span>div 텍스트를 세로로 가운데에 맞추는 방법</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/csszdivdhy"><img src="https://img.php.cn/upload/subject/202407/22/2024072211494531801.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS에서 div의 의미" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/csszdivdhy" class="title-a-spanl" title="CSS에서 div의 의미"><span>CSS에서 div의 의미</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/pythondqbytjs"><img src="https://img.php.cn/upload/subject/202407/22/2024072212190056240.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="파이썬의 모든 사용법 소개" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/pythondqbytjs" class="title-a-spanl" title="파이썬의 모든 사용법 소개"><span>파이썬의 모든 사용법 소개</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/ko/faq/convertmlyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213545599285.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="명령 사용법 변환" /> </a>
                            <a target="_blank" href="https://www.php.cn/ko/faq/convertmlyf" class="title-a-spanl" title="명령 사용법 변환"><span>명령 사용법 변환</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>

<div class="phpwzright">
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-5902227090019525"
        data-ad-slot="3653428331"
        data-ad-format="auto"
        data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
        <div class="wzrOne">
            <div class="wzroTitle">인기 추천</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="url은 무슨 뜻인가요?" href="https://www.php.cn/ko/faq/418772.html">url은 무슨 뜻인가요?</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="DOM은 무엇을 의미하나요?" href="https://www.php.cn/ko/faq/414303.html">DOM은 무엇을 의미하나요?</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="이미지 크기를 변경하는 방법" href="https://www.php.cn/ko/faq/414252.html">이미지 크기를 변경하는 방법</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="HTML에서 글꼴을 굵게 만드는 방법" href="https://www.php.cn/ko/faq/414520.html">HTML에서 글꼴을 굵게 만드는 방법</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="HTML 이미지의 크기를 설정하는 방법" href="https://www.php.cn/ko/faq/475145.html">HTML 이미지의 크기를 설정하는 방법</a>
                                </div>
                            </li>
                                    </ul>
            </div>
        </div>
        <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
        <div class="wzrThree">
            <div class="wzrthree-title">
                <div>인기 튜토리얼</div>
                <a target="_blank" href="https://www.php.cn/ko/course.html">더>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">관련 튜토리얼 <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">인기 추천<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">최신 강좌<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a>
                                    <div class="wzrthreerb">
                                        <div>1423223 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ko/course/74.html" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" href="https://www.php.cn/ko/course/74.html">PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기</a>
                                    <div class="wzrthreerb">
                                        <div>4268778 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="74">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a>
                                    <div class="wzrthreerb">
                                        <div>2536648 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a>
                                    <div class="wzrthreerb">
                                        <div>507477 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/ko/course/2.html" title="PHP 제로 기반 입문 튜토리얼" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 제로 기반 입문 튜토리얼"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="PHP 제로 기반 입문 튜토리얼" href="https://www.php.cn/ko/course/2.html">PHP 제로 기반 입문 튜토리얼</a>
                                    <div class="wzrthreerb">
                                        <div>862790 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="2">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="https://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a>
                                <div class="wzrthreerb">
                                    <div >1423223 학습 시간</div>
                                                                                <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="https://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a>
                                <div class="wzrthreerb">
                                    <div >2536648 학습 시간</div>
                                                                                <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="https://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a>
                                <div class="wzrthreerb">
                                    <div >507477 학습 시간</div>
                                                                                <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/901.html" title="웹 프론트 엔드 개발에 대한 빠른 소개" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="웹 프론트 엔드 개발에 대한 빠른 소개"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="웹 프론트 엔드 개발에 대한 빠른 소개" href="https://www.php.cn/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a>
                                <div class="wzrthreerb">
                                    <div >215856 학습 시간</div>
                                                                                <div class="courseICollection" data-id="901">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/234.html" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PS 비디오 튜토리얼을 처음부터 마스터하세요"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" href="https://www.php.cn/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a>
                                <div class="wzrthreerb">
                                    <div >890438 학습 시간</div>
                                                                                <div class="courseICollection" data-id="234">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
                <ul class="three" style="display: none;">
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/1648.html" title="[웹 프런트엔드] Node.js 빠른 시작" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[웹 프런트엔드] Node.js 빠른 시작"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="[웹 프런트엔드] Node.js 빠른 시작" href="https://www.php.cn/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a>
                                <div class="wzrthreerb">
                                    <div >7475 학습 시간</div>
                                                                                <div class="courseICollection" data-id="1648">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/1647.html" title="해외 웹 개발 풀스택 강좌 총집합" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="해외 웹 개발 풀스택 강좌 총집합"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="해외 웹 개발 풀스택 강좌 총집합" href="https://www.php.cn/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a>
                                <div class="wzrthreerb">
                                    <div >5962 학습 시간</div>
                                                                                <div class="courseICollection" data-id="1647">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/1646.html" title="Go 언어 실습 GraphQL" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go 언어 실습 GraphQL"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Go 언어 실습 GraphQL" href="https://www.php.cn/ko/course/1646.html">Go 언어 실습 GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >4938 학습 시간</div>
                                                                                <div class="courseICollection" data-id="1646">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/1645.html" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" href="https://www.php.cn/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a>
                                <div class="wzrthreerb">
                                    <div >697 학습 시간</div>
                                                                                <div class="courseICollection" data-id="1645">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="https://www.php.cn/ko/course/1644.html" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" href="https://www.php.cn/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a>
                                <div class="wzrthreerb">
                                    <div >24741 학습 시간</div>
                                                                                <div class="courseICollection" data-id="1644">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper2', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrthreeTab>div').click(function(e){
                    $('.wzrthreeTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrthreelist>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>

<div class="wzrFour">
            <div class="wzrfour-title">
                <div>최신 다운로드</div>
                <a href="https://www.php.cn/ko/xiazai">더>
                </a>
            </div>
                        <script>
                $(document).ready(function(){
                    var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                        speed:1000,
                        autoplay:{
                            delay:3500,
                            disableOnInteraction: false,
                        },
                        pagination:{
                            el:'.sjyx_banSwiperwz .swiper-pagination',
                            clickable :false,
                        },
                        loop:true
                    })
                })
            </script>
            <div class="wzrfourList swiper3">
                <div class="wzrfourlTab swiper-wrapper">
                    <div class="check swiper-slide" data-id="onef">웹 효과 <div></div></div>
                    <div class="swiper-slide" data-id="twof">웹사이트 소스 코드<div></div></div>
                    <div class="swiper-slide" data-id="threef">웹사이트 자료<div></div></div>
                    <div class="swiper-slide" data-id="fourf">프론트엔드 템플릿<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery 기업 메시지 양식 연락처 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8071">[양식 버튼] jQuery 기업 메시지 양식 연락처 코드</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 MP3 뮤직 박스 재생 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8070">[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8069">[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery 시각적 양식 드래그 앤 드롭 편집 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8068">[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="VUE.JS 모방 Kugou 음악 플레이어 코드" href="https://www.php.cn/ko/toolset/js-special-effects/8067">[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="클래식 HTML5 푸시 박스 게임" href="https://www.php.cn/ko/toolset/js-special-effects/8066">[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤" href="https://www.php.cn/ko/toolset/js-special-effects/8065">[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="CSS3 개인 앨범 커버 호버 확대/축소 효과" href="https://www.php.cn/ko/toolset/js-special-effects/8064">[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8328" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8327" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿" target="_blank">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8326" title="디자이너 크리에이티브 작업 이력서 웹 템플릿" target="_blank">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8325" title="현대 엔지니어링 건설 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8324" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿" target="_blank">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8323" title="온라인 전자책 쇼핑몰 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8322" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다." target="_blank">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8321" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿" target="_blank">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3078"  target="_blank"  title="귀여운 여름 요소 벡터 자료(EPS+PNG)">[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3077"  target="_blank"  title="4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)">[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3076"  target="_blank"  title="노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)">[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3075"  target="_blank"  title="황금 졸업 모자 벡터 자료(EPS+PNG)">[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3074"  target="_blank"  title="흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)">[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3073"  target="_blank"  title="다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)">[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3072"  target="_blank"  title="플랫 스타일 식목일 배너 벡터 자료(AI+EPS)">[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-materials/3071"  target="_blank"  title="9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)">[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="fourf" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8328"  target="_blank" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8327"  target="_blank" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8326"  target="_blank" title="디자이너 크리에이티브 작업 이력서 웹 템플릿">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8325"  target="_blank" title="현대 엔지니어링 건설 회사 웹사이트 템플릿">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8324"  target="_blank" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8323"  target="_blank" title="온라인 전자책 쇼핑몰 웹사이트 템플릿">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8322"  target="_blank" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/ko/toolset/website-source-code/8321"  target="_blank" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper3', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrfourlTab>div').click(function(e){
                    $('.wzrfourlTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrfourList>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>
    </div>
</div>
<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
            <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
            <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

<script>
  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>

</body>
</html>