웹 프론트엔드 상식 학습 상세 소개

1. 공통 블록 수준 요소 인라인 요소

p - 가장 일반적으로 사용되는 블록 수준 요소

dl - dt-dd와 함께 사용되는 블록 수준 요소

양식 - 대화형 양식

h1 -h6- 제목

hr - 가로 구분선

ol - 정렬된 목록

p - 단락

ul - 순서가 지정되지 않은 목록

fieldset - 양식 필드 집합

colgroup-col - 양식 열 그룹화 요소

table-tr- td 테이블 및 row-cell

사전 서식이 지정된 텍스트

a - 하이퍼링크(앵커)

br - 줄바꿈

i - 기울임꼴

em - 강조

img - 그림

입력 - 입력 상자

레이블 - 양식 레이블

범위 - 공통 인라인 컨테이너, 텍스트 내의 블록 정의

강함 - 굵은 강조

sub - 아래 첨자

sup - 위 첨자

textarea - 여러 줄 텍스트 입력 상자

u - 밑줄

선택 - 프로젝트 선택

2. 텍스트 3점 구현을 위한 여러 조건

text-overflow속성은 만: 텍스트가 넘칠 때 줄임표 표시 여부. 다른 스타일 속성 정의가 없습니다. 넘칠 때 줄임표를 생성하는 효과를 얻으려면 다음을 정의해야 합니다.

1. 🎜>width: value; (px, %, 둘 다 허용됨)

2. 텍스트를 한 줄로 강제 표시:

white-space: nowrap; > 3. 오버플로 내용은 숨겨집니다.

4. 오버플로 텍스트는 줄임표를 표시합니다. text-overflow: ellipsis

참고: 한 줄의 텍스트여야 합니다. 이 기사의 오버플로를 설정하려면! ! !

IE6+; chrome1.0+; safari3.1+(firefox, Opera는 아직 지원되지 않음)

3. 수직 중앙 정렬을 위한 여러 조건

컨테이너를 수직으로 중앙에 배치하려면 기본

display

속성 값을 inline-block으로 변경하고 형제 요소(ruler)를 추가해야 합니다(형제 요소 [ruler] 스타일은 다음으로 설정됨).

세로 정렬

:중간;너비:0;높이:100%;디스플레이:인라인 블록;) . 세 가지 조건:

1: 컨테이너에 추가해야 함(상위 요소)

text-align

:center;2: 추가해야 함 현재 요소를 인라인 블록 요소(display:inline-block;)로 변환하고 수직 정렬:middle;

3을 현재 요소에 추가합니다(캐리지 리턴 없이). 뒤에 형제 요소 범위를 추가합니다. 현재 요소(캐리지 리턴 없음) ;그리고 Vertical-align:middle;width:0;height:100%;display:inline-block

4. 대체 요소 및 비대체 요소

대체요소와 비대체요소

a) 대체 요소: 브라우저는 태그와 속성을 기반으로 요소의 특정 표시 콘텐츠를 결정합니다. 예를 들어, 브라우저는 이미지 정보를 읽고 태그의 src 속성 값을 기반으로 표시하지만 (x)html 코드를 보면 이미지의 실제 내용을 볼 수 없습니다. 입력 상자, 라디오 버튼 등을 표시할지 여부를 결정하는 태그 속성의 유형입니다. (x), , , <select>는 모두 대체 요소입니다. 이러한 요소에는 실제 콘텐츠가 없는 경우가 많습니다. 즉, 빈 요소입니다. </p> <p style="text-align: left;">대체 요소는 디스플레이에 상자를 생성하므로 일부 인라인 요소(img, input)가 너비와 높이를 설정할 수 있습니다. </p> <p style="text-align: left;">b) 대체할 수 없는 요소(대체할 수 없는 요소): (x) html의 대부분의 요소는 대체할 수 없는 요소입니다. 즉, 해당 내용이 사용자(예: 브라우저)에게 직접 표시됩니다. </p> <p style="text-align: left;">5. 스프라이트 맵이란 무엇인가요? 장점은 무엇입니까? </p> <p style="text-align: left;">이미지 통합, 작은 단일 배경 이미지를 하나의 큰 배경 이미지로 통합합니다. </p> <p style="text-align: left;">이미지 통합의 장점: 1) 이미지 통합을 통해 서버로의 요청 횟수를 줄여 페이지 로딩 속도를 향상시킵니다. 2) 사진을 통합하여 크기를 줄입니다. </p> <p style="text-align: left;">6. <a href="http://www.php.cn/code/5005.html" target="_blank">css 캐스케이딩 </a> 스타일시트란 무엇인가요? 우선순위 알고리즘은 어떻게 계산되나요? </p> <p style="text-align: left;">a. 중요도와 소스의 우선순위는 </p> <p style="text-align: left;">1) 브라우저 기본 스타일 </p> <p style="text-align: left;">2) <a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>/id입니다. ....선택기의 가중치 </p> <p style="text-align: left;">3) 인라인 스타일 </p> <p style="text-align: left;">4) 인라인 또는 외부(쓰기 순서) </p> <p style="text-align: left;">5) !important가 가장 높습니다</p> <p style="text-align: left;">7. 디스플레이:없음과 <a href="http://www.php.cn/wiki/929.html" target="_blank">가시성</a>:숨김 </p> <p style="text-align: left;">전자: 숨겨졌지만 공간을 차지하지 않음, 후자: 숨겨졌지만 공간을 차지함</p> <p style="text-align: left;">8. <a href="http://www.php.cn/code/6440.html" target="_blank">플로팅을 지우는 여러 가지 방법 </a></p> <p style="text-align: left;">hack1: 상위 요소에 Overflow:hidden 선언을 추가합니다.</p> <p style="text-align: left;">hack2: 상위 요소에 높이를 추가합니다</p> <p style="text-align: left;">hack3: 플로팅 요소 아래에 빈 p를 추가하고 요소에 선언을 추가합니다. p{clear:both height:0; Overflow:hidden;}</p> <p style="text-align: left;">hack4: 범용 클리어 플로팅 메서드 p:after{content: ". ";clear:both;display:block;height:0;overflow:hidden; visible:hidden;}</p> <p style="text-align: left;">9. 어떤 속성을 상속받을 수 있나요? </p> <p style="text-align: left;">1) 텍스트 관련: 글꼴 모음, 글꼴 크기, 글꼴 스타일, 글꼴 변형, 글꼴 두께, 글꼴, 문자 간격, 줄 높이, 텍스트 정렬, 텍스트 들여쓰기, 텍스트 -변환, 단어 간격</p> <p style="text-align: left;">2) 목록 관련: 목록 스타일-이미지, 목록 스타일-위치, 목록 스타일 유형, 목록 스타일</p> <p style="text-align: left;">3) 색상 관련 : color </p> <p style="text-align: left;">4) 투명도(하위 요소는 상위 요소의 불투명도를 상속하지만 변경할 수 없음) </p> <p style="text-align: left;">참고: 글꼴 크기는 비율이 아니라 상위 요소의 크기를 상속합니다. . line-height 상위 요소가 백분율 또는 px 값인 경우 하위 요소는 상위 요소와 동일합니다. 상위 요소가 일반 또는 숫자인 경우 하위 요소의 줄 높이는 하위 요소의 글꼴 크기입니다. 요소에 숫자를 곱합니다. </p> <p style="text-align: left;">10. 위치 지정 방법</p> <p style="text-align: left;">위치 속성 값: <a href="http://www.php.cn/wiki/188.html" target="_blank">정적</a>, 상대, 절대, 고정</p> <p style="text-align: left;">1) 정적</p> <p style="text-align: left;">정적은 해당 요소는 문서 흐름에 위치하며 <a href="http://www.php.cn/wiki/904.html" target="_blank">상단</a>, <a href="http://www.php.cn/wiki/906.html" target="_blank">하단</a>, <a href="http://www.php.cn/wiki/907.html" target="_blank">왼쪽</a> 및 <a href="http://www.php.cn/wiki/905.html" target="_blank">오른쪽</a>에 정상적으로 표시됩니다. 요소의 속성은 무시됩니다. <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> 속성은 항상 0입니다.</p> <p style="text-align: left;">2) 상대</p> <p style="text-align: left;"> 상대 위치 지정은 문서 흐름에서 요소가 차지하는 위치와 크기를 유지하며 left/ 오른쪽/위/아래 여러 속성이 상대 이동 거리를 결정하고 원래 위치는 유지</p> <p style="text-align: left;">3) 절대</p> <p style="text-align: left;"><a href="http://www.php.cn/code/6074.html" target="_blank">절대 위치 지정</a>, 문서에서 개체를 분리합니다. 흐름, /right/top/bottom과 같은 왼쪽 속성을 사용하면 위치 지정 설정이 있는 가장 가까운 상위 요소를 기준으로 절대 위치가 지정됩니다. 그렇지 않은 경우 본문 개체를 기반으로 합니다. </p> <p style="text-align: left;">4) 고정</p> <p style="text-align: left;">고정은 절대와 유사하지만 창의 왼쪽 상단을 기준으로 하며 문서와 함께 스크롤되지 않습니다. 그러나 다중 프레임 페이지에 있는 경우 브라우저의 왼쪽 위 모서리가 아닌 프레임의 왼쪽 위 모서리를 기준으로 합니다. </p> <p style="text-align: left;">11.링크와 @import의 차이점은 무엇인가요? </p> <p style="text-align: left;">1. 조상의 차이. Link는 XHTML 태그에 속하며, @import는 전적으로 CSS에서 제공하는 메소드입니다. </p> <p style="text-align: left;">2. 링크 태그는 CSS 로드 외에도 <a href="http://www.php.cn/wiki/1541.html" target="_blank">RSS</a> 정의, rel 연결 속성 정의 등 다양한 작업을 수행할 수 있습니다. @import는 CSS만 로드할 수 있습니다</p> <p style="text-align: left;">3. 로딩 순서의 차이. 페이지가 로드되면(즉, 뷰어가 볼 때) 링크에서 참조하는 CSS가 동시에 로드되는 반면, @import에서 참조하는 CSS는 페이지가 로드되기 전에 완전히 다운로드될 때까지 기다립니다. 그래서 가끔 @import가 CSS를 로드하는 페이지를 탐색할 때 스타일이 없는 경우가 있습니다(깜빡거림만 있을 뿐입니다) </p> <p style="text-align: left;"> 4. 호환성의 차이. @import는 CSS2.1에서 제안되었기 때문에 기존 브라우저에서는 지원하지 않습니다. @import는 IE5 이상에서만 인식이 가능하지만 링크 태그에는 이런 문제가 없습니다</p> <p style="text-align: left;"> 5. dom을 사용할 때의 차이점 스타일을 제어합니다. JavaScript를 사용하여 스타일을 변경하기 위해 DOM을 제어할 때 @import는 DOM으로 제어할 수 없기 때문에 link 태그만 사용할 수 있습니다. </p> <p style="text-align: left;">12. 위치 지정 속성 값은 무엇입니까? 각각의 가치가 있나요? </p> <p style="text-align: left;">각 속성 값의 기능: </p> <p style="text-align: left;">정적: 기본값. 위치가 정적으로 설정된 요소는 일반적으로 항상 문서 흐름에 의해 지정된 위치에 표시됩니다(정적 요소는 위쪽, 아래쪽, 왼쪽 또는 오른쪽 선언을 무시합니다). </p> <p style="text-align: left;">절대: 상위 요소를 기준으로 한 절대 위치 지정, s는 레이아웃 흐름에서 벗어나 공간을 차지하지 않습니다. 레이어라고 부르는 위치는 가장 가까운 위치에 있는 상위 요소 위치를 기준으로 합니다. "왼쪽", "상단", "오른쪽" 및 "하단" 속성을 직접 지정할 수 있습니다. 상위 요소가 배치되지 않은 경우 html(루트 요소)이 사용됩니다. (스태킹 순서 z-index: 값) </p> <p style="text-align: left;">relative: 기본 위치를 기준으로 한 오프셋 위치 지정으로 왼쪽, 위쪽, 오른쪽 및 오른쪽을 설정하여 일반 위치를 기준으로 위치를 이동할 수 있습니다. (자체 시작 위치를 기준으로 이동, [일반 레이아웃 흐름을 방해하지 않음] </p> <p style="text-align: left;">고정: 브라우저를 기준으로 절대 위치 지정, 브라우저 창의 지정된 좌표를 기준으로 위치 지정. 이 요소는 "left", "top", "right" 및 "bottom" 속성으로 지정할 수 있습니다. </p> <p style="text-align: left;">13. <.>html5<a href="http://www.php.cn/wiki/1118.html" target="_blank"></a>새 <a href="http://www.php.cn/php/php-tp-append.html" target="_blank"> 태그 15개 추가</a></.></p>헤더 탐색 바닥글 <p style="text-align: left;">메인<a href="http://www.php.cn/wiki/646.html" target="_blank"> 외 기사 섹션 그림 데이터 목록 비디오 오디오 fieldest 범례 레이블 캡션</a></p>14. 1. BFC란 무엇인가요? <p style="text-align: left;"></p>1. 블록 수준 서식 컨텍스트<p style="text-align: left;"></p>2. 적응형 2열 레이아웃, 수직성 방지<p style="text-align: left;"> margin<a href="http://www.php.cn/wiki/931.html" target="_blank"> 겹침(두 개의 BFC에 배치) </a></p>3. 루트 요소, <p style="text-align: left;">float<a href="http://www.php.cn/wiki/919.html" target="_blank"> 속성이 없음, 위치가 절대 또는 고정, 표시가 인라인 블록, 테이블-셀 , table-caption, flex, inline-flex, Overflow는 보이지 않습니다</a></p>15. .px, em, rem, pt의 차이점<p style="text-align: left;"></p>1) px는 실제로는 픽셀이므로 px를 사용하세요. 글꼴 크기를 설정할 때 비교적 안정적이고 정확합니다<p style="text-align: left;"></p> 하지만 이 방법에는 우리가 만든 웹 페이지를 브라우저에서 탐색할 때 브라우저를 확대하면 문제가 발생합니다. us 웹<p style="text-align: left;">페이지 레이아웃<a href="http://www.php.cn/code/7955.html" target="_blank">이 깨졌습니다. 따라서 웹페이지의 글꼴을 정의하기 위해 "em"을 사용하는 것이 제안되었습니다. </a></p>2) em은 기준선을 기준으로 글꼴 크기를 조정하는 것입니다. <p style="text-align: left;"></p>em은 상위 요소를 기준으로 글꼴 크기를 설정하는 것이므로 요소를 설정할 때 문제가 발생합니다. 부모 요소의 크기를 알아야 할 수도 있습니다 <p style="text-align: left;"></p>3) rem은 루트 요소의 글꼴 크기를 기준으로 표시됩니다. <p style="text-align: left;"></p>rem은 루트 요소 <html>에 상대적입니다. ;, 즉 루트 요소에서 참조 값만 결정하면 됩니다 <p style="text-align: left;"></p>4) pt의 크기는 1인치의 1/72입니다 <p style="text-align: left;"></p> 파운드: 텍스트 측정 단위 <p style="text-align: left;"><p style="text-align: left;">이 측정 방법은 인쇄 디자인 배경에서 왔으며 미디어에 가장 적합하지만 디스플레이에도 널리 사용됩니다</p><p style="text-align: left;">16. 수직 + 수평 센터링을 달성하는 방법은 무엇입니까? </p><p style="text-align: left;">1.p{너비:200px;높이:200px;<a href="http://www.php.cn/wiki/892.html" target="_blank">배경</a>:#f00;위치:고정;왼쪽:0;오른쪽:0;상단:0;하단:0;여백 :auto;}</p><p style="text-align: left;">2.p{너비:200px;높이:200px;배경:#f00;위치:고정;왼쪽:50%;상단:50%;여백:-100px 0 0 -100px; }</p><p style="text-align: left;">17. 점진적인 향상과 점진적인 저하</p><p style="text-align: left;">점진적인 향상: 낮은 버전의 브라우저용 페이지를 구축하여 가장 기본적인 기능을 보장한 다음 고급 브라우저용 효과 및 상호 작용을 수행합니다. 더 나은 사용자 경험을 달성하기 위한 추가 기능. </p><p style="text-align: left;">우아한 성능 저하: 처음부터 완전한 기능을 구축한 다음 하위 버전 브라우저와 호환되도록 만듭니다</p><p style="text-align: left;">18. CSS 선택기란 무엇인가요? </p><p style="text-align: left;">1) 와일드카드 선택기 *</p><p style="text-align: left;">2) 유형 선택기/요소 선택기 a</p><p style="text-align: left;">3) 속성 선택기 input[type="button"]</p><p style="text-align: left;">4 ) 선택기 p 포함 .code a</p><p style="text-align: left;">5) 하위 개체 선택기 ul.test>li<p style="text-align: left;">6) ID 선택기 #</p> <p style="text-align: left;">7) 클래스 선택기 .</p> <p style="text-align: left;">8) 그룹 선택기 body,ul,li</p> <p style="text-align: left;">9) <a href="http://www.php.cn/code/6014.html" target="_blank">의사 클래스</a> 및 의사 객체 선택기 p<a href="http://www.php.cn/wiki/970.html" target="_blank">:first-letter </a> a<a href="http://www.php.cn/wiki/966.html" target="_blank">:hover</a></p> <p style="text-align: left;">10) 인접 선택자 li+li</p> <p style="text-align: left;">19. 애니메이션과 전환의 차이점 </p> <p style="text-align: left;">동일점: 둘 다 시간에 따라 변하는 요소의 속성값입니다. . </p> <p style="text-align: left;">차이점: 전환은 시간이 지남에 따라 </p> <p style="text-align: left;">css 속성을 변경하기 위해 이벤트(호버 이벤트 또는 클릭 이벤트 등)를 트리거해야 합니다. 애니메이션은 이벤트를 명시적으로 트리거하지 않고도 사용할 수도 있습니다. <a href="http://www.php.cn/code/9595.html" target="_blank">애니메이션</a> 효과를 얻으려면 시간이 지남에 따라 요소의 CSS 속성 값을 지정하려면 명확한 애니메이션 속성 값이 필요합니다. </p> <p style="text-align: left;">20. 표준 <a href="http://www.php.cn/code/6444.html" target="_blank">박스 모델</a>과 이상한 박스 모델은 무엇인가요? 둘의 차이점, 이상한 상자 모델 구현 방법과 표준 합계 모델 </p> <p style="text-align: left;">표준 상자 모델: 콘텐츠+테두리+<a href="http://www.php.cn/wiki/948.html" target="_blank">패딩</a>  </p> <p style="text-align: left;">이상한 상자 모델: 콘텐츠 </p> <p style="text-align: left;">하나는 상자 너비를 계산할 때 테두리와 패딩을 추가하고, 다른 하나는 추가하지 않습니다. </p> <p style="text-align: left;">이상한 상자 모델 구현: box-sizing: border-box</p> <p style="text-align: left;">표준 상자 model: box-sizing: content-box</p> <p style="text-align: left;">21. 상위 요소 내에서 요소를 위, 아래, 왼쪽, 오른쪽 가운데에 배치하는 방법</p> <p style="text-align: left;">css: </p> <p style="text-align: left;">.box {display:flex;width:800px;height:300px ;justify-content:center}</p> <p style="text-align: left;">.box p{align-self:center}</p> <p style="text-align: left;">html:</p> <p style="text-align: left;">< ;p class="box"></p> <p style="text-align: left;"> <p></p></p> <p style="text-align: left;"></p></p> <p style="text-align: left;">22. 비디오 및 오디오 </p> <p style="text-align: left;"> 비디오의 경우: video /ogg video/mp4 video/webm <a href="http://www.php.cn/code/6093.html" target="_blank">audio</a>의 경우: audio/ogg audio/mpeg</p> <p style="text-align: left;">23. <a href="http://www.php.cn/code/10723.html" target="_blank">유연한 상자 모델</a>의 속성 및 속성 값(6개 이상의 속성 작성) </p> <p style="text-align: left;">display:flex;</p> <p style="text-align: left;">flex-<a href="http://www.php.cn/wiki/873.html" target="_blank">direction</a>: </p> <p style="text-align: left;">정렬 콘텐츠:</p> <p style="text-align: left;"> 정렬 항목:</p> <p style="text-align: left;">정렬 자체:</p> <p style="text-align: left;">정렬 콘텐츠:</p> <p style="text-align: left;">flex-wrap: </p> <p style="text-align: left;">23. 선형 그래디언트 및 경로에 대해 간략하게 소개 그래디언트 및 반복 그래디언트 사용법</p> <p style="text-align: left;">선형 그래디언트: 선형-그라디언트()</p> <p style="text-align: left;">방사형 그라디언트: Radial-gradient()</p> <p style="text-align: left;"> 선형 그라디언트 반복: Repeating-linear-gradient()</p> <p style="text-align: left;"> 방사형 그라디언트 반복: Repeating-Radial-Gradient()</p> <p style="text-align: left;">24. 애니메이션의 사용법을 간략하게 소개합니다. </p> <p style="text-align: left;">애니메이션은 두 부분으로 구성됩니다. 애니메이션: 애니메이션 이름 애니메이션 실행 시간 애니메이션 유형 애니메이션 지연 시간 애니메이션 반복 횟수 애니메이션 이름; <a href="http://www.php.cn/wiki/1051.html" target="_blank"></a> 25. css3D의 주요 속성과 속성값 </p> <p style="text-align: left;"> 1. 심도 : perspactive:number; 보고 싶은 객체가 크다면 값을 더 작게 설정하세요 , 개체를 더 작게 보려면 값을 더 크게 설정하세요 </p> <p style="text-align: left;">2. 3D 스테이지: 변환 스타일:preserve-3d;</p> <p style="text-align: left;">3.translateZ()rotateZ()scaleZ() </p> <p style="text-align: left;">26. 2D의 주요 속성</p> <p style="text-align: left;">transform:translate() Rotate() Skew() scale()</p> <p style="text-align: left;">transform-origin:</p> <p style="text-align: left;">27 .전환 애니메이션</p> <p style="text-align: left;">전환: 속성 이름(</p>모두<p style="text-align: left;"> 사용 가능) 애니메이션 실행 시간 애니메이션 유형 애니메이션 지연 시간<a href="http://www.php.cn/wiki/1483.html" target="_blank"></a>28의 속성과 속성값을 간략하게 소개합니다. . css3</p> <p style="text-align: left;"><a href="http://www.php.cn/code/6021.html" target="_blank"></a> background-origin</p>의 새로운 <p style="text-align: left;">배경 속성: 배경 원점<a href="http://www.php.cn/code/865.html" target="_blank"></a></p>배경 클립<p style="text-align: left;">:배경 자르기<a href="http://www.php.cn/code/868.html" target="_blank"></a></p>배경 크기<p style="text-align: left;">:<a href="http://www.php.cn/code/872.html" target="_blank">배경 이미지의 크기 </a><a href="http://www.php.cn/code/8294.html" target="_blank"></a>다음은 배경 크기의 세 가지 값입니다</p> <p style="text-align: left;">길이</p> <p style="text-align: left;">는 배경 이미지의 크기를 지정합니다. 첫 번째 값은 너비이고 두 번째 값은 높이입니다. </p> <p style="text-align: left;">백분율(%)</p> <p style="text-align: left;">배경 이미지 크기를 백분율로 설정 </p> <p style="text-align: left;">표지</p> <p style="text-align: left;">배경 이미지를 충분히 크게 확대하여 배경 이미지를 배경 영역을 완전히 덮는다 </p> <p style="text-align: left;"> 29. 5대 브라우저의 핵심과 대표작 작성 </p> <p style="text-align: left;">*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser </p> <p style="text-align: left;">*Gecko:: 대표작 Mozilla Firefox는 오픈소스입니다 </p> <p style="text-align: left;">*Webkit: 대표작 Safari와 Chrome은 오픈소스 프로젝트입니다. </p> <p style="text-align: left;">*Presto: 대표작 Opera, Presto는 Opera Software에서 개발한 브라우저 레이아웃 엔진입니다. 또한 세계에서 가장 빠른 렌더링 엔진으로 인정받고 있습니다. </p> <p style="text-align: left;">*Blink: Google과 Opera Software가 개발한 브라우저 레이아웃 엔진으로 2013년 4월에 출시되었습니다. </p> <p style="text-align: left;">30. IE6의 몇 가지 일반적인 버그와 해결책을 적습니다(4개 이상) </p> <p style="text-align: left;">1) 그림에 테두리가 있습니다. BUG 해결 방법: 그림에 border:0 또는 border:0을 추가하세요. none;</p> <p style="text-align: left;">2. 이중 부동 방향(이중 여백) 해결책: display:inline</p> <p style="text-align: left;">3. 기본 높이(IE6, IE7) 해결책: 요소에 선언 추가: 글꼴 크기:0; 옵션 2: 요소에 명령문 추가: Overflow:hidden;</p> <p style="text-align: left;"> 4. 버튼 요소의 기본 크기는 다릅니다. 옵션: 태그를 사용하여 </p> <p style="text-align: left;"> 시뮬레이션합니다. 필터 </p>어떤 것들이 있나요? <p style="text-align: left;"><a href="http://www.php.cn/code/120.html" target="_blank">1._ 밑줄 속성 필터 </a></p>2.9: 다른 브라우저에서는 구문을 인식하지 못합니다: selector {속성: 속성 값 9;}<p style="text-align: left;"></p>3.<p>위 내용은 웹 프론트엔드 상식 학습 상세 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>관련 라벨：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/ko/search?word=web前端" target="_blank">web前端</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">원천：php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/ko/faq/358069.html" title="부트스트랩 IE8 호환성 처리를 사용하는 방법"> <span>이전 기사：부트스트랩 IE8 호환성 처리를 사용하는 방법</span> </a> <a href="http://www.php.cn/ko/faq/358073.html" title="즉, CSS3을 사용하여 작성하는 예"> <span>다음 기사：즉, CSS3을 사용하여 작성하는 예</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">저자별 최신 기사</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354750.html">HTML에서 굵게, 기울임꼴, 밑줄, 취소선 등 글꼴 효과를 설정하는 예를 소개합니다.</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/338018.html">Java 버전의 Redis 구현</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/353509.html">가장 간단한 WeChat 애플릿 데모</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/356272.html">Python에서 pandas.DataFrame(생성, 색인, 추가 및 삭제)의 간단한 작업 방법 소개</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354839.html">위챗 미니 프로그램: 탭 효과 구현 방법 예시</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354423.html">Python은 사전 구조 출력을 아름답게 하기 위해 사용자 정의 메소드를 구성합니다.</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/350853.html">HTML5: Canvas를 사용하여 실시간으로 비디오 처리</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/346502.html">Asp.net은 SignalR을 사용하여 사진을 보냅니다.</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/354842.html">WeChat Mini 프로그램 개발 튜토리얼-App() 및 Page() 기능 개요</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/ko/faq/356574.html">Python Redis 사용법에 대한 자세한 설명</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">최신 이슈</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176353.html" target="_blank" title="잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요." class="wdcdcTitle">잘못된 React 하위 요소(발견: {clientVersion} 키가 있는 개체) 하위 요소 컬렉션을 렌더링하려면 대신 배열을 사용하세요.</a> <a href="http://www.php.cn/ko/wenda/176353.html" class="wdcdcCons">다단계 양식이 있는데 제출하려고 하면 이 오류가 표시됩니다. 그러나 간단한 형태로 createOrganization 스케줄링을 사용하면 작동합니다. 백엔드 문제인...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-06 16:25:39</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>346</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176286.html" target="_blank" title="웹 애플리케이션 및 PWA의 경험을 개선하기 위해 투명한 브라우저를 실행합니다. [정적 HTML, CSS 및 JavaScript 지원] [사용자가 웹 애플리케이션/PWA에서 데스크탑 배경화면을 볼 수 있도록 허용]" class="wdcdcTitle">웹 애플리케이션 및 PWA의 경험을 개선하기 위해 투명한 브라우저를 실행합니다. [정적 HTML, CSS 및 JavaScript 지원] [사용자가 웹 애플리케이션/PWA에서 데스크탑 배경화면을 볼 수 있도록 허용]</a> <a href="http://www.php.cn/ko/wenda/176286.html" class="wdcdcCons">저는 현재 소켓을 사용하여 웹 애플리케이션(채팅)을 개발하고 있는 주니어 프런트 엔드 개발자이자 디자이너입니다. 나와 친구들이 사용하는 언어는 Scala, HTM...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-05 13:50:12</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>1367</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176276.html" target="_blank" title="Eloquent 쿼리를 사용하여 그룹 사용자(전체 사용자, 관리 사용자, 제어 운영자, 경비원)" class="wdcdcTitle">Eloquent 쿼리를 사용하여 그룹 사용자(전체 사용자, 관리 사용자, 제어 운영자, 경비원)</a> <a href="http://www.php.cn/ko/wenda/176276.html" class="wdcdcCons">모든 사용자, "admin" 역할을 가진 총 사용자 수, "control_operator" 역할을 가진 총 사용자 수, &qu...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-05 12:11: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>332</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176242.html" target="_blank" title="웹 사이트 페이지에서 로컬에 설치된 라이브러리 사용" class="wdcdcTitle">웹 사이트 페이지에서 로컬에 설치된 라이브러리 사용</a> <a href="http://www.php.cn/ko/wenda/176242.html" class="wdcdcCons">Windows 운영 체제용으로 작성되고 최신 브라우저의 system32에 등록된 라이브러리(.dll, .ocx)를 사용하여 사이트 작업 및 계산 논리의 일부 기능...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-05 00:15:49</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>3563</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/ko/wenda/176214.html" target="_blank" title="React/Node: Trial_period_days를 사용하여 구독할 때 통합 오류가 발생했습니다." class="wdcdcTitle">React/Node: Trial_period_days를 사용하여 구독할 때 통합 오류가 발생했습니다.</a> <a href="http://www.php.cn/ko/wenda/176214.html" class="wdcdcCons">7일 무료 평가판으로 설정하고 Firebase를 통해 사용자 정의 Nodejs 함수를 사용하여 고객에게 요금을 청구하려는 제품이 Stripe에 정의되어 있습니다....</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> 에서 2024-04-04 20:30:57</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>320</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>관련 주제</div> <a href="http://www.php.cn/ko/faq/zt" target="_blank">더> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/webqdssm"><img src="https://img.php.cn/upload/subject/202407/22/2024072214251033100.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="웹 프론트엔드란 무엇인가" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/webqdssm" class="title-a-spanl" title="웹 프론트엔드란 무엇인가"><span>웹 프론트엔드란 무엇인가</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/webqiand"><img src="https://img.php.cn/upload/subject/202407/22/2024072214195149684.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="웹 프런트엔드를 위한 세 가지 주요 프레임워크" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/webqiand" class="title-a-spanl" title="웹 프런트엔드를 위한 세 가지 주요 프레임워크"><span>웹 프런트엔드를 위한 세 가지 주요 프레임워크</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/webqdxycwdzs"><img src="https://img.php.cn/upload/subject/202407/22/2024072212213460370.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="웹 프론트엔드에 필요한 지식" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/webqdxycwdzs" class="title-a-spanl" title="웹 프론트엔드에 필요한 지식"><span>웹 프론트엔드에 필요한 지식</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/yzphzzpysmqb"><img src="https://img.php.cn/upload/subject/202407/22/2024072213300281305.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="원래 화면과 조립 화면의 차이점은 무엇입니까?" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/yzphzzpysmqb" class="title-a-spanl" title="원래 화면과 조립 화면의 차이점은 무엇입니까?"><span>원래 화면과 조립 화면의 차이점은 무엇입니까?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/rgzndjbgn"><img src="https://img.php.cn/upload/subject/202407/22/2024072213313958393.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="인공지능의 기본 개념은 무엇인가" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/rgzndjbgn" class="title-a-spanl" title="인공지능의 기본 개념은 무엇인가"><span>인공지능의 기본 개념은 무엇인가</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/xmlywfljdwl"><img src="https://img.php.cn/upload/subject/202407/22/2024072213314924289.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="히말라야 사람들은 왜 인터넷에 접속할 수 없나요?" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/xmlywfljdwl" class="title-a-spanl" title="히말라야 사람들은 왜 인터넷에 접속할 수 없나요?"><span>히말라야 사람들은 왜 인터넷에 접속할 수 없나요?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/bagfwz"><img src="https://img.php.cn/upload/subject/202407/22/2024072212272646246.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="바이낸스 공식 홈페이지" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/bagfwz" class="title-a-spanl" title="바이낸스 공식 홈페이지"><span>바이낸스 공식 홈페이지</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/ko/faq/rjcscygj"><img src="https://img.php.cn/upload/subject/202407/22/2024072213592226958.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="소프트웨어 테스팅을 위한 일반적인 도구" /> </a> <a target="_blank" href="http://www.php.cn/ko/faq/rjcscygj" class="title-a-spanl" title="소프트웨어 테스팅을 위한 일반적인 도구"><span>소프트웨어 테스팅을 위한 일반적인 도구</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">인기 추천</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="디스플레이 타원을 초과하도록 CSS를 설정하는 방법" href="http://www.php.cn/ko/faq/482865.html">디스플레이 타원을 초과하도록 CSS를 설정하는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="CSS에서 글꼴 크기를 설정하는 방법" href="http://www.php.cn/ko/faq/469426.html">CSS에서 글꼴 크기를 설정하는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="CSS에서 호버를 사용하는 방법" href="http://www.php.cn/ko/faq/417948.html">CSS에서 호버를 사용하는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="CSS에서 문자 간격을 설정하는 방법" href="http://www.php.cn/ko/faq/482889.html">CSS에서 문자 간격을 설정하는 방법</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="CSS3의 새로운 기능은 무엇입니까?" href="http://www.php.cn/ko/faq/415878.html">CSS3의 새로운 기능은 무엇입니까?</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>인기 튜토리얼</div> <a target="_blank" href="http://www.php.cn/ko/course.html">더> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">관련 튜토리얼 <div></div></div> <div class="tabdiv swiper-slide" data-id="two">인기 추천<div></div></div> <div class="tabdiv swiper-slide" data-id="three">최신 강좌<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="http://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div>1417729 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/74.html" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기" href="http://www.php.cn/ko/course/74.html">PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기</a> <div class="wzrthreerb"> <div>4258917 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="http://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>2486349 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="http://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div>504203 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/2.html" title="PHP 제로 기반 입문 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="PHP 제로 기반 입문 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PHP 제로 기반 입문 튜토리얼" href="http://www.php.cn/ko/course/2.html">PHP 제로 기반 입문 튜토리얼</a> <div class="wzrthreerb"> <div>858915 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ko/course/812.html" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)" href="http://www.php.cn/ko/course/812.html">최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)</a> <div class="wzrthreerb"> <div >1417729 학습 시간</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/286.html" title="JAVA 초보자용 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 초보자용 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="JAVA 초보자용 비디오 튜토리얼" href="http://www.php.cn/ko/course/286.html">JAVA 초보자용 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >2486349 학습 시간</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/504.html" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼" href="http://www.php.cn/ko/course/504.html">Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼</a> <div class="wzrthreerb"> <div >504203 학습 시간</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/901.html" title="웹 프론트 엔드 개발에 대한 빠른 소개" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="웹 프론트 엔드 개발에 대한 빠른 소개"/> </a> <div class="wzrthree-right"> <a target="_blank" title="웹 프론트 엔드 개발에 대한 빠른 소개" href="http://www.php.cn/ko/course/901.html">웹 프론트 엔드 개발에 대한 빠른 소개</a> <div class="wzrthreerb"> <div >215359 학습 시간</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/234.html" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="PS 비디오 튜토리얼을 처음부터 마스터하세요"/> </a> <div class="wzrthree-right"> <a target="_blank" title="PS 비디오 튜토리얼을 처음부터 마스터하세요" href="http://www.php.cn/ko/course/234.html">PS 비디오 튜토리얼을 처음부터 마스터하세요</a> <div class="wzrthreerb"> <div >879810 학습 시간</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/ko/course/1648.html" title="[웹 프런트엔드] Node.js 빠른 시작" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[웹 프런트엔드] Node.js 빠른 시작"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[웹 프런트엔드] Node.js 빠른 시작" href="http://www.php.cn/ko/course/1648.html">[웹 프런트엔드] Node.js 빠른 시작</a> <div class="wzrthreerb"> <div >6586 학습 시간</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1647.html" title="해외 웹 개발 풀스택 강좌 총집합" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="해외 웹 개발 풀스택 강좌 총집합"/> </a> <div class="wzrthree-right"> <a target="_blank" title="해외 웹 개발 풀스택 강좌 총집합" href="http://www.php.cn/ko/course/1647.html">해외 웹 개발 풀스택 강좌 총집합</a> <div class="wzrthreerb"> <div >5117 학습 시간</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1646.html" title="Go 언어 실습 GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go 언어 실습 GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Go 언어 실습 GraphQL" href="http://www.php.cn/ko/course/1646.html">Go 언어 실습 GraphQL</a> <div class="wzrthreerb"> <div >4290 학습 시간</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1645.html" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다"/> </a> <div class="wzrthree-right"> <a target="_blank" title="550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다" href="http://www.php.cn/ko/course/1645.html">550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다</a> <div class="wzrthreerb"> <div >638 학습 시간</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/ko/course/1644.html" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬"/> </a> <div class="wzrthree-right"> <a target="_blank" title="기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬" href="http://www.php.cn/ko/course/1644.html">기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬</a> <div class="wzrthreerb"> <div >21833 학습 시간</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>최신 다운로드</div> <a href="http://www.php.cn/ko/xiazai">더> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">웹 효과 <div></div></div> <div class="swiper-slide" data-id="twof">웹사이트 소스 코드<div></div></div> <div class="swiper-slide" data-id="threef">웹사이트 자료<div></div></div> <div class="swiper-slide" data-id="fourf">프론트엔드 템플릿<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 기업 메시지 양식 연락처 코드" href="http://www.php.cn/ko/toolset/js-special-effects/8071">[양식 버튼] jQuery 기업 메시지 양식 연락처 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 MP3 뮤직 박스 재생 효과" href="http://www.php.cn/ko/toolset/js-special-effects/8070">[플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과" href="http://www.php.cn/ko/toolset/js-special-effects/8069">[메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery 시각적 양식 드래그 앤 드롭 편집 코드" href="http://www.php.cn/ko/toolset/js-special-effects/8068">[양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="VUE.JS 모방 Kugou 음악 플레이어 코드" href="http://www.php.cn/ko/toolset/js-special-effects/8067">[플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="클래식 HTML5 푸시 박스 게임" href="http://www.php.cn/ko/toolset/js-special-effects/8066">[HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤" href="http://www.php.cn/ko/toolset/js-special-effects/8065">[그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="CSS3 개인 앨범 커버 호버 확대/축소 효과" href="http://www.php.cn/ko/toolset/js-special-effects/8064">[사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8328" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8327" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿" target="_blank">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8326" title="디자이너 크리에이티브 작업 이력서 웹 템플릿" target="_blank">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8325" title="현대 엔지니어링 건설 회사 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8324" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿" target="_blank">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8323" title="온라인 전자책 쇼핑몰 웹사이트 템플릿" target="_blank">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8322" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다." target="_blank">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8321" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿" target="_blank">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3078" target="_blank" title="귀여운 여름 요소 벡터 자료(EPS+PNG)">[PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3077" target="_blank" title="4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)">[PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3076" target="_blank" title="노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)">[배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3075" target="_blank" title="황금 졸업 모자 벡터 자료(EPS+PNG)">[PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3074" target="_blank" title="흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)">[PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3073" target="_blank" title="다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)">[PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3072" target="_blank" title="플랫 스타일 식목일 배너 벡터 자료(AI+EPS)">[배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-materials/3071" target="_blank" title="9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)">[PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8328" target="_blank" title="가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿">[프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8327" target="_blank" title="신선한 색상의 개인 이력서 가이드 페이지 템플릿">[프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8326" target="_blank" title="디자이너 크리에이티브 작업 이력서 웹 템플릿">[프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8325" target="_blank" title="현대 엔지니어링 건설 회사 웹사이트 템플릿">[프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8324" target="_blank" title="교육 서비스 기관을 위한 반응형 HTML5 템플릿">[프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8323" target="_blank" title="온라인 전자책 쇼핑몰 웹사이트 템플릿">[프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8322" target="_blank" title="IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.">[프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/ko/toolset/website-source-code/8321" target="_blank" title="보라색 스타일 외환 거래 서비스 웹 사이트 템플릿">[프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p> </div> <div class="footermid"> <a href="http://www.php.cn/ko/about/us.html">회사 소개</a> <a href="http://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="http://www.php.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1731627353"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>