HTML Iframes 로 웹페이지 임베드하기 - 높이 및 너비 설정

소개

<iframe> 태그는 한 웹페이지를 다른 웹페이지에 임베드하는 데 사용됩니다. 이 랩에서는 <iframe> 태그를 사용하여 현재 웹페이지 내에 다른 웹페이지를 표시하는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 파일에 태그 추가하기</h2> <p>HTML 파일에 <code><iframe></code>을 추가하려면 <code><iframe></code> 시작 및 종료 태그를 사용하고, 표시할 웹페이지의 URL 을 지정하는 <code>src</code> 속성을 포함해야 합니다. 다음은 <code><iframe></code> 태그의 예시입니다.</p> <pre><code class="language-html"><iframe src="https://www.example.com"></iframe> </code></pre> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%3Ciframe%3E%EC%9D%98-%EB%86%92%EC%9D%B4%EC%99%80-%EB%84%88%EB%B9%84-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0"></div> <h2 id="의-높이와-너비-설정하기"><iframe>의 높이와 너비 설정하기</h2> <p><code>height</code> 및 <code>width</code> 속성을 사용하여 요구 사항에 따라 <code><iframe></code>의 크기를 조정할 수 있습니다. <code>height</code> 및 <code>width</code> 속성은 픽셀, 백분율 또는 em 단위의 값을 사용합니다. 다음은 예시입니다.</p> <pre><code class="language-html"><iframe src="https://www.example.com" height="500" width="500"></iframe> </code></pre> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="sandbox-%EB%B0%8F-allow-%EC%86%8D%EC%84%B1%EC%9C%BC%EB%A1%9C-%EB%94%94%EC%8A%A4%ED%94%8C%EB%A0%88%EC%9D%B4-%EA%B8%B0%EB%8A%A5-%EC%A0%9C%EC%96%B4%ED%95%98%EA%B8%B0"></div> <h2 id="sandbox-및-allow-속성으로-디스플레이-기능-제어하기">sandbox 및 allow 속성으로 디스플레이 기능 제어하기</h2> <p><code>sandbox</code> 및 <code>allow</code> 속성을 사용하여 전체 화면 표시 허용, <code><iframe></code> 내 스크립트 실행 활성화 등 <code><iframe></code>의 다양한 기능을 제어할 수 있습니다. 다음은 예시입니다.</p> <pre><code class="language-html"><iframe src="https://www.example.com" sandbox="allow-modals allow-forms" ></iframe> </code></pre> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%EB%8C%80%EC%B2%B4-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0"></div> <h2 id="대체-콘텐츠-사용하기">대체 콘텐츠 사용하기</h2> <p>브라우저가 인라인 프레임을 지원하지 않는 경우 표시할 <code>alternative</code> 콘텐츠와 함께 <code><iframe></code> 태그를 사용하는 것이 좋습니다. <code><iframe></code> 태그가 지원되지 않는 경우 표시될 대체 텍스트를 여는 <code><iframe></code> 태그와 닫는 <code><iframe></code> 태그 사이에 추가할 수 있습니다. 다음은 예시입니다.</p> <pre><code class="language-html"><iframe src="https://www.example.com" height="500" width="500" >Your browser does not support inline frames.</iframe > </code></pre> <div class="pt-24 -mt-20 relative -z-10 anchor-item" id="%EC%9A%94%EC%95%BD"></div> <h2 id="요약">요약</h2> <p>축하합니다! 현재 웹페이지 내에 다른 웹페이지를 표시하기 위해 <code><iframe></code> 태그를 사용하는 방법을 배웠습니다. 표시하려는 웹페이지의 URL 을 <code>src</code> 속성으로 설정하고, <code>height</code> 및 <code>width</code> 속성을 사용하여 요구 사항에 따라 표시를 조정하는 것을 잊지 마세요. 또한 <code>sandbox</code> 및 <code>allow</code> 속성을 사용하여 <code><iframe></code>의 다양한 기능을 제어할 수 있습니다. 또한 <code><iframe></code> 태그를 지원하지 않는 브라우저를 위해 대체 콘텐츠를 포함해야 합니다.</p> </article></div></div></div></div><span></span></div><div class="w-40 hidden lg:block shrink-0 sticky top-24"><div id="tutorial-detail-sidebar"><div class="mb-10"><p class="text-xs font-bold uppercase mt-10">공유</p><div class="flex gap-2 mt-5"><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Twitter에 공유" href="https://twitter.com/intent/tweet?text=HTML%20Iframes%20%EB%A1%9C%20%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%9E%84%EB%B2%A0%EB%93%9C%ED%95%98%EA%B8%B0%20-%20%EB%86%92%EC%9D%B4%20%EB%B0%8F%20%EB%84%88%EB%B9%84%20%EC%84%A4%EC%A0%95%20%7C%20LabEx&url=https://labex.io/ko/tutorials/html-html-embedded-html-page-70775" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#twitter" fill="#333"></use></svg></a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Facebook에 공유" href="https://www.facebook.com/sharer.php?title=HTML%20Iframes%20%EB%A1%9C%20%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80%20%EC%9E%84%EB%B2%A0%EB%93%9C%ED%95%98%EA%B8%B0%20-%20%EB%86%92%EC%9D%B4%20%EB%B0%8F%20%EB%84%88%EB%B9%84%20%EC%84%A4%EC%A0%95%20%7C%20LabEx&u=https://labex.io/ko/tutorials/html-html-embedded-html-page-70775" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#facebook" fill="#333"></use></svg></a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-1.5 p-1.5 shadow-sm dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300" aria-label="Google Classroom에 공유" href="https://classroom.google.com/share?url=https://labex.io/ko/tutorials/html-html-embedded-html-page-70775" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#google-classroom-black" fill="#333"></use></svg></a></div></div><p class="text-xs font-bold uppercase">주제</p><div class="flex flex-wrap gap-1 mt-5"><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/linux">Linux</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/devops">DevOps</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/cybersecurity">사이버 보안</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/kali">Kali Linux</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/devops-engineer">DevOps Engineer</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/cybersecurity-engineer">Cybersecurity Engineer</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/database">데이터베이스</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/datascience">데이터 과학</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/rhel">Red Hat Enterprise Linux</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/comptia">CompTIA</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/docker">Docker</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/kubernetes">Kubernetes</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/python">Python</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/git">Git</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/shell">Shell</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/nmap">Nmap</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/wireshark">Wireshark</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/hydra">Hydra</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/java">Java</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/sqlite">SQLite</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/postgresql">PostgreSQL</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/mysql">MySQL</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/redis">Redis</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/mongodb">MongoDB</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/go">Golang</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/cpp">C++</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/c">C</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/jenkins">Jenkins</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/ansible">Ansible</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/pandas">Pandas</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/numpy">NumPy</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/sklearn">scikit-learn</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/matplotlib">Matplotlib</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/webdev">웹 개발</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/css">CSS</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/javascript">JavaScript</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/react">React</a><a class="focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-xs gap-x-1.5 px-2.5 py-1.5 dark:text-gray-900 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 inline-flex items-center text-gray-800 bg-gray-200 hover:bg-gray-300 shadow-none" href="/ko/tutorials/category/devsecops">DevSecOps</a></div></div></div></div><div class="py-20"><div class="flex items-center align-center text-center w-full flex-row"><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div><div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><span class="text-2xl">관련 <a href="/learn/html" class="">HTML 코스</a></span></div><div class="flex border-gray-200 dark:border-gray-800 w-full border-t border-solid"></div></div><div class="grid grid-cols-12 gap-6 mt-10"><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ko/courses/html-for-beginners" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="초보자를 위한 HTML" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/html-for-beginners.png?lang=ko 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>초보자를 위한 HTML</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>html</span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>web-development</span></div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ko/courses/project-build-a-tic-tac-toe-web-app" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="틱택토 웹 앱 만들기" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-build-a-tic-tac-toe-web-app.png?lang=ko 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>틱택토 웹 앱 만들기</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>javascript</span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>web-development</span></div></div></div></div></a></div><div class="col-span-12 sm:col-span-6 lg:col-span-4"><a href="/ko/courses/project-creating-a-whack-a-mole-web-game" class="course-card" data-v-784b32aa><div class="text-gray-800 bg-white overflow-hidden rounded-md shadow l-hover-shadow l-hover-translate-y" data-v-784b32aa><div class="relative l-bg-divider overflow-hidden course-image" data-v-784b32aa><div class="overflow-hidden cover course undefined" data-v-784b32aa data-v-1737ff8a><img src="/cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko" onerror="this.setAttribute('data-error', 1)" width="525" height="270" alt="두더지 잡기 웹 게임 만들기" loading="lazy" data-nuxt-img sizes="(max-width: 767px) 100vw, (max-width: 991px) 50vw, (max-width: 1199px) 33vw, 25vw" srcset="/cdn-cgi/image/width=300,height=154,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 300w, /cdn-cgi/image/width=327,height=168,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 327w, /cdn-cgi/image/width=384,height=197,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 384w, /cdn-cgi/image/width=565,height=291,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 565w, /cdn-cgi/image/width=600,height=308,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 600w, /cdn-cgi/image/width=654,height=336,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 654w, /cdn-cgi/image/width=768,height=394,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 768w, /cdn-cgi/image/width=1130,height=582,quality=85,format=auto,onerror=redirect/https://course-cover.labex.io/project-creating-a-whack-a-mole-web-game.png?lang=ko 1130w" class="w-full h-auto" fetchpriority="auto" data-v-1737ff8a></div></div><div class="p-3" data-v-784b32aa><p class="h-14 text-xl font-semibold line-clamp-2 mb-4" data-v-784b32aa><span data-v-784b32aa>두더지 잡기 웹 게임 만들기</span></p><div class="flex items-center fs-0" data-v-784b32aa><div class="flex-auto truncate overflow-hidden" data-v-784b32aa><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>javascript</span><span class="inline-flex items-center font-medium text-xs px-1.5 py-0.5 dark:bg-primary-400 dark:text-gray-900 text-gray-800 bg-white ring-1 ring-inset ring-gray-800 rounded-full me-2" data-v-784b32aa>web-development</span></div></div></div></div></a></div></div></div></div></section></div></main><footer class="bg-slate-800"><div class="pt-10 pb-1"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><div class="flex flex-col"><div class="flex items-center justify-between w-full"><a href="/ko" class="" aria-label="LabEx"><img src="/labex-logo-light.svg" onerror="this.setAttribute('data-error', 1)" width="98" height="30" alt="LabEx" loading="lazy" data-nuxt-img sizes="(max-width: 991px) 78px, 98px" srcset="/labex-logo-light.svg 78w, /labex-logo-light.svg 98w, /labex-logo-light.svg 156w, /labex-logo-light.svg 196w"></a><div><div class="language-switch" data-v-8a0b34f8><div data-headlessui-state class="relative inline-flex text-left rtl:text-right" data-v-8a0b34f8><div id="headlessui-menu-button-v-0-2-0" aria-haspopup="menu" aria-expanded="false" data-headlessui-state class="inline-flex w-full" role="button"><button type="button" class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm px-2.5 py-1.5 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 flex items-center gap-2 text-white hover:text-white hover:bg-slate-700" data-v-8a0b34f8><span data-v-8a0b34f8>🇰🇷 한국어</span></button></div></div></div></div></div><p class="mt-4 mb-4 text-gray-400">실습 랩으로 Linux, DevOps 및 사이버 보안을 배우세요 실습 랩</p></div><div class="border-b border-gray-700 mb-8"></div><div class="grid gap-6 pb-10 lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1"><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">실습 과정</div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">리눅스 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">파이썬 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">사이버 보안 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">도커 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/comptia" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">CompTIA 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">자바 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/data-science" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">데이터 과학 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Git 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">쿠버네티스 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/kali" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">칼리 리눅스 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/ansible" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">앤서블 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">데브옵스 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/learn/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">머신러닝 학습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/courses/rhcsa-certification-exam-practice-exercises" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">RHCSA 실전 시험</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/courses/comptia-linux-plus-training-labs" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">CompTIA 리눅스+</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/exercises/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">파이썬 연습 문제</a></div><div class="flex flex-col gap-2"><a href="https://linux-commands.labex.io/" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">리눅스 명령어 요약표</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">실습 랩</div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/projects/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">리눅스 프로젝트</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/projects/category/python" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">파이썬 프로젝트</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/projects/category/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">자바 프로젝트</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/projects/category/c" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">C 언어 프로젝트</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/projects/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">데브옵스 프로젝트</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/projects/category/go" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Go 언어 프로젝트</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/git" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Git 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/shell" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">셸 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/java" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">자바 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">도커 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/mysql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MySQL 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/mongodb" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MongoDB 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">쿠버네티스 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/ml" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">머신러닝 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">사이버 보안 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/nmap" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Nmap 실습</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/free-labs/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Wireshark 실습</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">놀이터</div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/linux-online-linux-terminal-and-playground-372915" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">온라인 리눅스 터미널</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/docker-online-docker-playground-372912" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">도커 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/kubernetes-online-kubernetes-playground-593609" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">쿠버네티스 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/python-online-python-playground-372886" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">파이썬 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/go-online-golang-playground-372913" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Go 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/cpp-online-c-playground-372911" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">C++ 온라인 컴파일러</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/ansible-online-ansible-playground-415831" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">앤서블 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/jenkins-online-jenkins-playground-415838" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">젠킨스 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/java-online-java-playground-372914" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">자바 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/rust-online-rust-playground-372918" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">러스트 플레이그라운드</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/kali-online-kali-linux-terminal-and-playground-592935" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">칼리 리눅스 온라인</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/nmap-online-nmap-playground-593613" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Nmap 온라인</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/wireshark-online-wireshark-playground-593624" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">와이어샤크 온라인</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/mysql-online-mysql-playground-372916" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MySQL 온라인</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/kali-online-postgresql-database-playground-593616" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">PostgreSQL 온라인</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/rhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">RHCSA 시험 시뮬레이터</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/lesson/choosing-a-linux-distribution" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">추천 Linux 배포판</a></div></div><div class="flex flex-col"><div class="text-xl font-medium text-white mb-2">튜토리얼</div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/linux" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/docker" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/kubernetes" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kubernetes 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/mongodb" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MongoDB 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/postgresql" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">PostgreSQL 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/wireshark" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Wireshark 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/devops" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/category/cybersecurity" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">사이버 보안 튜토리얼</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/java-java-interview-questions-and-answers-593685" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Java 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/python-python-interview-questions-and-answers-593698" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Python 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/kubernetes-kubernetes-interview-questions-and-answers-593688" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Kubernetes 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/linux-devops-interview-questions-and-answers-593679" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">DevOps 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/cybersecurity-cybersecurity-interview-questions-and-answers-593676" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">사이버 보안 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/docker-docker-interview-questions-and-answers-593680" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Docker 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/linux-linux-interview-questions-and-answers-593689" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">Linux 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/mongodb-mongodb-interview-questions-and-answers-593692" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">MongoDB 면접 질문</a></div><div class="flex flex-col gap-2"><a href="https://labex.io/ko/tutorials/linux-database-interview-questions-and-answers-593677" rel="noopener noreferrer" class="hover:text-white text-gray-400 line-clamp-5">데이터베이스 면접 질문</a></div></div></div><div class="flex flex-wrap justify-center items-center gap-2 text-sm text-gray-400"><a href="https://support.labex.io" target="_blank" class="hover:text-white">지원</a><span class="text-gray-600">|</span><a href="mailto:info@labex.io" class="hover:text-white">문의하기</a><span class="text-gray-600">|</span><a href="/ko/forum" class="hover:text-white">포럼</a><span class="text-gray-600">|</span><a href="/ko/tutorials" class="hover:text-white">튜토리얼</a><span class="text-gray-600">|</span><a href="/ko/free-labs" class="hover:text-white">무료 실습</a><span class="text-gray-600">|</span><a href="/ko/linuxjourney" class="hover:text-white">LINUX JOURNEY</a><span class="text-gray-600">|</span><a href="/ko/exercises" class="hover:text-white">연습</a><span class="text-gray-600">|</span><a href="/ko/teams" class="hover:text-white">LABEX TEAMS</a><span class="text-gray-600">|</span><a href="https://labex.io/ko/questions/labex-affiliate-program-a6jov663" rel="noopener noreferrer" class="hover:text-white">제휴</a><span class="text-gray-600">|</span><a href="https://sitemap.labex.io/" rel="noopener noreferrer" class="hover:text-white">사이트맵</a><span class="text-gray-600">|</span><a href="/ko/privacy" class="hover:text-white">개인정보처리방침</a><span class="text-gray-600">|</span><a href="/ko/terms" class="hover:text-white">서비스 이용약관</a></div><div class="sm:col-span-2 md:col-span-3 lg:col-span-4 text-gray-400 text-center"><div class="flex gap-2 mt-4 justify-center"><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Twitter" href="https://x.com/intent/follow?screen_name=wearelabex" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#x-black" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Facebook" href="https://www.facebook.com/WeAreLabEx/" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#facebook" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="LinkedIn" href="https://www.linkedin.com/company/wearelabex/mycompany/" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#linkedin" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="TikTok" href="https://www.tiktok.com/@labexcoding" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#tiktok" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="YouTube" href="https://www.youtube.com/@labexio" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#youtube" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Discord" href="https://discord.gg/J6k3u69nU6" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#discord" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Github" href="https://github.com/labex-labs" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#github" fill="#333"></use></svg></a><a class="focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 font-medium rounded-md text-sm gap-x-2 p-2 ring-1 hover:ring-0 ring-inset ring-current dark:text-primary-400 hover:bg-primary-500 disabled:bg-transparent dark:hover:bg-primary-500 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center text-gray-400 hover:text-white" aria-label="Dockerhub" href="https://hub.docker.com/u/labex" rel="noopener noreferrer" target="_blank"><svg class="svg-icon" aria-hidden="true"><use href="/_nuxt/icons.BMd9ddKk.svg#docker-white" fill="#333"></use></svg></a></div></div></div></div><div class="py-3"><div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl"><p class="text-gray-400 font-medium text-center mb-0"> © 2017-2026 LabEx Technology Limited All Rights Reserved </p></div></div></footer></div><span></span><span></span><div class="alert-box" data-v-285a8eec></div><div></div></div><div id="teleports"></div><script>window.NUXT={};window.NUXT.config={public:{turnstile:{siteKey:"0x4AAAAAAAKM2eNgDcxF-9yH"},env:"production",appVersion:"v_1779764419801",cookie:{domain:""},gtag:{id:"G-ZFCX52ZJTZ"},ads:{id:"AW-882002536",registerConversionTag:"MBFrCIGFxNQYEOiUyaQD",subscriptionConversionTag:"crfuCO_z2tQYEOiUyaQD",purchaseConversionTag:"53Q2COvEvO0YEOiUyaQD"},gtm:{id:"GTM-TN7PC69C"},clarityProjectId:"qfnofdz0u8",apiBaseUrl:"/api/v2",ossBaseUrl:"https://file.labex.io",paypalClientId:"AZZ0ZORi-uwIWCMBvvWS8pN7yKq3dEmOuztg95XoqmPv0WihfrIU3XYEByj3y1sZcB6g2CW5tjcQOlHX",googleClientId:"359324822670-0i8infpcje3uh1ttca1d6stgdmdmhk1a.apps.googleusercontent.com",webPushServerKey:"BHIC0R48BSznqt8oCmKfQJkty77I0SV-EWdNqJ-3EPJ-HUBqnXKlrw_6cowDynxkVdNA26Y1q6s-VTaUdBYYICU",xAuth:"",stripeKey:"pk_live_51NnFfaISCR4x8ogMvIwl9UJQpDybg8tc41t8igKNOtejuDkPiQBvjShWmA94hm6Ii7hBpCxyiJ5CceACBNvIJWFj00KyBHumTT",i18n:{baseUrl:"https://labex.io",defaultLocale:"en",rootRedirect:"",redirectStatusCode:302,skipSettingLocaleOnNavigate:false,locales:[{code:"en",language:"en-US",dir:"ltr",name:"English",flag:"🇺🇸"},{code:"zh",language:"zh-CN",dir:"ltr",name:"简体中文",flag:"🇨🇳"},{code:"es",language:"es-ES",dir:"ltr",name:"Español",flag:"🇪🇸"},{code:"ja",language:"ja-JP",dir:"ltr",name:"日本語",flag:"🇯🇵"},{code:"fr",language:"fr-FR",dir:"ltr",name:"Français",flag:"🇫🇷"},{code:"de",language:"de-DE",dir:"ltr",name:"Deutsch",flag:"🇩🇪"},{code:"ru",language:"ru-RU",dir:"ltr",name:"Русский",flag:"🇷🇺"},{code:"pt",language:"pt-PT",dir:"ltr",name:"Português",flag:"🇧🇷"},{code:"ko",language:"ko-KR",dir:"ltr",name:"한국어",flag:"🇰🇷"}],detectBrowserLanguage:false,experimental:{localeDetector:"",typedPages:true,typedOptionsAndMessages:false,alternateLinkCanonicalQueries:true,devCache:false,cacheLifetime:"",stripMessagesPayload:false,preload:false,strictSeo:false,nitroContextDetection:true,httpCacheDuration:10,compactRoutes:false},domainLocales:{en:{domain:""},zh:{domain:""},es:{domain:""},ja:{domain:""},fr:{domain:""},de:{domain:""},ru:{domain:""},pt:{domain:""},ko:{domain:""}}}},app:{baseURL:"/",buildId:"1d2f30fd-f754-412b-87b2-8766b1cb380b",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script> <script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":833,"once":1110,"_errors":1111,"serverRendered":42,"path":1113},["ShallowReactive",3],{"tutorialDetail:html-html-embedded-html-page-70775:ko":4,"footerData_ko":89,"skillTreeListData:basic:ko":307,"tutorialRecommendCourseListData:html-html-embedded-html-page-70775:ko":424,"skillTreeDetailData:html:ko":448},{"tutorial":5,"steps":63,"skilltrees":87},{"id":6,"name":7,"fee_type":8,"type":9,"difficulty":10,"time":11,"from_community":12,"max_lab_num":13,"allow_to_start":12,"remain_num":9,"allow_to_view":12,"skills":14,"hidden":42,"path":43,"alias":44,"icon":45,"show_in_tutorial":42,"description":46,"default_console_type":47,"meta_title":48,"meta_description":49,"meta_keywords":50,"skilltree_alias":20,"practice_url":51,"langs":52,"ai_verify":12,"repo_full_name":62},70775,"HTML 임베디드 HTML 페이지",2,0,"Beginner",20,false,-1,[15,27,36],{"key":16,"name":17,"desc":18,"project":19,"group":23},"html\u002Fembed_media","Embedding External Media","External media content like videos from YouTube or audio clips can be embedded using \u003Ciframe> and \u003Caudio> or \u003Cvideo> tags.",{"key":20,"name":21,"desc":22},"html","HTML","",{"key":24,"name":25,"desc":26},"html\u002FMultimediaandGraphicsGroup","Multimedia and Graphics","Multimedia and Graphics deals with embedding multimedia elements like images, image maps, figures with captions, and external media in HTML documents.",{"key":28,"name":29,"desc":30,"project":31,"group":32},"html\u002Finter_elems","Interactive and Dynamic Elements","Interactive and dynamic elements, such as \u003Ciframe>, \u003Caudio>, \u003Cvideo>, and \u003Ccanvas>, enable the creation of engaging and interactive web content that responds to user actions.",{"key":20,"name":21,"desc":22},{"key":33,"name":34,"desc":35},"html\u002FAdvancedElementsGroup","Advanced Elements","Advanced Elements covers advanced HTML elements and features, including custom data attributes, accessibility considerations, and HTML templating.",{"key":37,"name":38,"desc":39,"project":40,"group":41},"html\u002Fcustom_attr","Custom Data Attributes","Custom data attributes (data-* attributes) provide a way to store custom data for JavaScript or CSS use without affecting HTML semantics.",{"key":20,"name":21,"desc":22},{"key":33,"name":34,"desc":35},true,"html\u002Flab-html-iframe-tag","html-html-embedded-html-page-70775","https:\u002F\u002Ficons.labex.io\u002Fhtml-embedded-html-page.png","\u003Ciframe> 태그는 한 웹페이지를 다른 웹페이지에 임베드하는 데 사용됩니다. 이 랩에서는 \u003Ciframe> 태그를 사용하여 현재 웹페이지 내에 다른 웹페이지를 표시하는 방법을 배우게 됩니다.",4,"HTML Iframes 로 웹페이지 임베드하기 - 높이 및 너비 설정","HTML iframe 을 사용하여 한 웹페이지를 다른 웹페이지에 임베드하는 방법을 배우고, 높이와 너비를 설정하는 방법을 알아보세요.","html 연습장, html, iframe, html 실습, html 연습, 웹페이지, 웹 개발, 임베드, 웹페이지 삽입, iframe 사용법","\u002Flabs\u002Fhtml-html-document-structure-597898?course=html-for-beginners&hideheader=true&hidelabby=true",[53,54,55,56,57,58,59,60,61],"zh","es","fr","de","ja","ru","ko","pt","en","labex-labs\u002Flabs",[64,68,73,76,80,83],{"position":9,"title":65,"layout":66,"text":67,"need_verify":12,"has_solution":12},"소개","doc-fullscreen","## 소개\n\n`\u003Ciframe>` 태그는 한 웹페이지를 다른 웹페이지에 임베드하는 데 사용됩니다. 이 랩에서는 `\u003Ciframe>` 태그를 사용하여 현재 웹페이지 내에 다른 웹페이지를 표시하는 방법을 배우게 됩니다.\n\n> 참고: `index.html`에서 코딩을 연습할 수 있으며, [Visual Studio Code 에서 HTML 작성 방법](https:\u002F\u002Fcode.visualstudio.com\u002Fdocs\u002Flanguages\u002Fhtml)을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.\n",{"position":69,"title":70,"layout":71,"text":72,"need_verify":42,"has_solution":12},1,"HTML 파일에 \u003Ciframe> 태그 추가하기","doc-workbench-split","## HTML 파일에 \u003Ciframe> 태그 추가하기\n\nHTML 파일에 `\u003Ciframe>`을 추가하려면 `\u003Ciframe>` 시작 및 종료 태그를 사용하고, 표시할 웹페이지의 URL 을 지정하는 `src` 속성을 포함해야 합니다. 다음은 `\u003Ciframe>` 태그의 예시입니다.\n\n```html\n\u003Ciframe src=\"https:\u002F\u002Fwww.example.com\">\u003C\u002Fiframe>\n```\n",{"position":8,"title":74,"layout":71,"text":75,"need_verify":42,"has_solution":12},"\u003Ciframe>의 높이와 너비 설정하기","## \u003Ciframe>의 높이와 너비 설정하기\n\n`height` 및 `width` 속성을 사용하여 요구 사항에 따라 `\u003Ciframe>`의 크기를 조정할 수 있습니다. `height` 및 `width` 속성은 픽셀, 백분율 또는 em 단위의 값을 사용합니다. 다음은 예시입니다.\n\n```html\n\u003Ciframe src=\"https:\u002F\u002Fwww.example.com\" height=\"500\" width=\"500\">\u003C\u002Fiframe>\n```\n",{"position":77,"title":78,"layout":71,"text":79,"need_verify":42,"has_solution":12},3,"sandbox 및 allow 속성으로 디스플레이 기능 제어하기","## sandbox 및 allow 속성으로 디스플레이 기능 제어하기\n\n`sandbox` 및 `allow` 속성을 사용하여 전체 화면 표시 허용, `\u003Ciframe>` 내 스크립트 실행 활성화 등 `\u003Ciframe>`의 다양한 기능을 제어할 수 있습니다. 다음은 예시입니다.\n\n```html\n\u003Ciframe\n src=\"https:\u002F\u002Fwww.example.com\"\n sandbox=\"allow-modals allow-forms\"\n>\u003C\u002Fiframe>\n```\n",{"position":47,"title":81,"layout":71,"text":82,"need_verify":42,"has_solution":12},"대체 콘텐츠 사용하기","## 대체 콘텐츠 사용하기\n\n브라우저가 인라인 프레임을 지원하지 않는 경우 표시할 `alternative` 콘텐츠와 함께 `\u003Ciframe>` 태그를 사용하는 것이 좋습니다. `\u003Ciframe>` 태그가 지원되지 않는 경우 표시될 대체 텍스트를 여는 `\u003Ciframe>` 태그와 닫는 `\u003Ciframe>` 태그 사이에 추가할 수 있습니다. 다음은 예시입니다.\n\n```html\n\u003Ciframe src=\"https:\u002F\u002Fwww.example.com\" height=\"500\" width=\"500\"\n >Your browser does not support inline frames.\u003C\u002Fiframe\n>\n```\n",{"position":84,"title":85,"layout":66,"text":86,"need_verify":12,"has_solution":12},5,"요약","## 요약\n\n축하합니다! 현재 웹페이지 내에 다른 웹페이지를 표시하기 위해 `\u003Ciframe>` 태그를 사용하는 방법을 배웠습니다. 표시하려는 웹페이지의 URL 을 `src` 속성으로 설정하고, `height` 및 `width` 속성을 사용하여 요구 사항에 따라 표시를 조정하는 것을 잊지 마세요. 또한 `sandbox` 및 `allow` 속성을 사용하여 `\u003Ciframe>`의 다양한 기능을 제어할 수 있습니다. 또한 `\u003Ciframe>` 태그를 지원하지 않는 브라우저를 위해 대체 콘텐츠를 포함해야 합니다.\n",[88],{"name":21,"alias":20},{"groups":90},[91,145,199,253],{"name":92,"items":93},"실습 과정",[94,97,100,103,106,109,112,115,118,121,124,127,130,133,136,139,142],{"name":95,"url":96},"리눅스 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Flinux",{"name":98,"url":99},"파이썬 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fpython",{"name":101,"url":102},"사이버 보안 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fcybersecurity",{"name":104,"url":105},"도커 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fdocker",{"name":107,"url":108},"CompTIA 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fcomptia",{"name":110,"url":111},"자바 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fjava",{"name":113,"url":114},"데이터 과학 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fdata-science",{"name":116,"url":117},"Git 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fgit",{"name":119,"url":120},"쿠버네티스 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fkubernetes",{"name":122,"url":123},"칼리 리눅스 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fkali",{"name":125,"url":126},"앤서블 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fansible",{"name":128,"url":129},"데브옵스 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fdevops",{"name":131,"url":132},"머신러닝 학습","https:\u002F\u002Flabex.io\u002Fko\u002Flearn\u002Fml",{"name":134,"url":135},"RHCSA 실전 시험","https:\u002F\u002Flabex.io\u002Fko\u002Fcourses\u002Frhcsa-certification-exam-practice-exercises",{"name":137,"url":138},"CompTIA 리눅스+","https:\u002F\u002Flabex.io\u002Fko\u002Fcourses\u002Fcomptia-linux-plus-training-labs",{"name":140,"url":141},"파이썬 연습 문제","https:\u002F\u002Flabex.io\u002Fko\u002Fexercises\u002Fpython",{"name":143,"url":144},"리눅스 명령어 요약표","https:\u002F\u002Flinux-commands.labex.io\u002F",{"name":146,"items":147},"실습 랩",[148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196],{"name":149,"url":150},"리눅스 프로젝트","https:\u002F\u002Flabex.io\u002Fko\u002Fprojects\u002Fcategory\u002Flinux",{"name":152,"url":153},"파이썬 프로젝트","https:\u002F\u002Flabex.io\u002Fko\u002Fprojects\u002Fcategory\u002Fpython",{"name":155,"url":156},"자바 프로젝트","https:\u002F\u002Flabex.io\u002Fko\u002Fprojects\u002Fcategory\u002Fjava",{"name":158,"url":159},"C 언어 프로젝트","https:\u002F\u002Flabex.io\u002Fko\u002Fprojects\u002Fcategory\u002Fc",{"name":161,"url":162},"데브옵스 프로젝트","https:\u002F\u002Flabex.io\u002Fko\u002Fprojects\u002Fcategory\u002Fdevops",{"name":164,"url":165},"Go 언어 프로젝트","https:\u002F\u002Flabex.io\u002Fko\u002Fprojects\u002Fcategory\u002Fgo",{"name":167,"url":168},"Git 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fgit",{"name":170,"url":171},"셸 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fshell",{"name":173,"url":174},"자바 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fjava",{"name":176,"url":177},"도커 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fdocker",{"name":179,"url":180},"MySQL 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fmysql",{"name":182,"url":183},"MongoDB 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fmongodb",{"name":185,"url":186},"쿠버네티스 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fkubernetes",{"name":188,"url":189},"머신러닝 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fml",{"name":191,"url":192},"사이버 보안 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fcybersecurity",{"name":194,"url":195},"Nmap 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fnmap",{"name":197,"url":198},"Wireshark 실습","https:\u002F\u002Flabex.io\u002Fko\u002Ffree-labs\u002Fwireshark",{"name":200,"items":201},"놀이터",[202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247,250],{"name":203,"url":204},"온라인 리눅스 터미널","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Flinux-online-linux-terminal-and-playground-372915",{"name":206,"url":207},"도커 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fdocker-online-docker-playground-372912",{"name":209,"url":210},"쿠버네티스 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fkubernetes-online-kubernetes-playground-593609",{"name":212,"url":213},"파이썬 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fpython-online-python-playground-372886",{"name":215,"url":216},"Go 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fgo-online-golang-playground-372913",{"name":218,"url":219},"C++ 온라인 컴파일러","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcpp-online-c-playground-372911",{"name":221,"url":222},"앤서블 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fansible-online-ansible-playground-415831",{"name":224,"url":225},"젠킨스 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fjenkins-online-jenkins-playground-415838",{"name":227,"url":228},"자바 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fjava-online-java-playground-372914",{"name":230,"url":231},"러스트 플레이그라운드","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Frust-online-rust-playground-372918",{"name":233,"url":234},"칼리 리눅스 온라인","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fkali-online-kali-linux-terminal-and-playground-592935",{"name":236,"url":237},"Nmap 온라인","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fnmap-online-nmap-playground-593613",{"name":239,"url":240},"와이어샤크 온라인","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fwireshark-online-wireshark-playground-593624",{"name":242,"url":243},"MySQL 온라인","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fmysql-online-mysql-playground-372916",{"name":245,"url":246},"PostgreSQL 온라인","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fkali-online-postgresql-database-playground-593616",{"name":248,"url":249},"RHCSA 시험 시뮬레이터","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Frhel-online-rhel-terminal-rhcsa-and-rhce-exam-playground-592933",{"name":251,"url":252},"추천 Linux 배포판","https:\u002F\u002Flabex.io\u002Fko\u002Flesson\u002Fchoosing-a-linux-distribution",{"name":254,"items":255},"튜토리얼",[256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304],{"name":257,"url":258},"Linux 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Flinux",{"name":260,"url":261},"Docker 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Fdocker",{"name":263,"url":264},"Kubernetes 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Fkubernetes",{"name":266,"url":267},"MongoDB 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Fmongodb",{"name":269,"url":270},"PostgreSQL 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Fpostgresql",{"name":272,"url":273},"Wireshark 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Fwireshark",{"name":275,"url":276},"DevOps 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Fdevops",{"name":278,"url":279},"사이버 보안 튜토리얼","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcategory\u002Fcybersecurity",{"name":281,"url":282},"Java 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fjava-java-interview-questions-and-answers-593685",{"name":284,"url":285},"Python 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fpython-python-interview-questions-and-answers-593698",{"name":287,"url":288},"Kubernetes 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fkubernetes-kubernetes-interview-questions-and-answers-593688",{"name":290,"url":291},"DevOps 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Flinux-devops-interview-questions-and-answers-593679",{"name":293,"url":294},"사이버 보안 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fcybersecurity-cybersecurity-interview-questions-and-answers-593676",{"name":296,"url":297},"Docker 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fdocker-docker-interview-questions-and-answers-593680",{"name":299,"url":300},"Linux 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Flinux-linux-interview-questions-and-answers-593689",{"name":302,"url":303},"MongoDB 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Fmongodb-mongodb-interview-questions-and-answers-593692",{"name":305,"url":306},"데이터베이스 면접 질문","https:\u002F\u002Flabex.io\u002Fko\u002Ftutorials\u002Flinux-database-interview-questions-and-answers-593677",{"paths":308},[309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,412,415,418,421],{"alias":310,"name":311},"linux","Linux",{"alias":313,"name":314},"devops","DevOps",{"alias":316,"name":317},"cybersecurity","사이버 보안",{"alias":319,"name":320},"kali","Kali Linux",{"alias":322,"name":323},"devops-engineer","DevOps Engineer",{"alias":325,"name":326},"cybersecurity-engineer","Cybersecurity Engineer",{"alias":328,"name":329},"database","데이터베이스",{"alias":331,"name":332},"datascience","데이터 과학",{"alias":334,"name":335},"rhel","Red Hat Enterprise Linux",{"alias":337,"name":338},"comptia","CompTIA",{"alias":340,"name":341},"docker","Docker",{"alias":343,"name":344},"kubernetes","Kubernetes",{"alias":346,"name":347},"python","Python",{"alias":349,"name":350},"git","Git",{"alias":352,"name":353},"shell","Shell",{"alias":355,"name":356},"nmap","Nmap",{"alias":358,"name":359},"wireshark","Wireshark",{"alias":361,"name":362},"hydra","Hydra",{"alias":364,"name":365},"java","Java",{"alias":367,"name":368},"sqlite","SQLite",{"alias":370,"name":371},"postgresql","PostgreSQL",{"alias":373,"name":374},"mysql","MySQL",{"alias":376,"name":377},"redis","Redis",{"alias":379,"name":380},"mongodb","MongoDB",{"alias":382,"name":383},"go","Golang",{"alias":385,"name":386},"cpp","C++",{"alias":388,"name":389},"c","C",{"alias":391,"name":392},"jenkins","Jenkins",{"alias":394,"name":395},"ansible","Ansible",{"alias":397,"name":398},"pandas","Pandas",{"alias":400,"name":401},"numpy","NumPy",{"alias":403,"name":404},"sklearn","scikit-learn",{"alias":406,"name":407},"matplotlib","Matplotlib",{"alias":409,"name":410},"webdev","웹 개발",{"alias":20,"name":21},{"alias":413,"name":414},"css","CSS",{"alias":416,"name":417},"javascript","JavaScript",{"alias":419,"name":420},"react","React",{"alias":422,"name":423},"devsecops","DevSecOps",{"courses":425},[426,434,441],{"id":427,"alias":428,"name":429,"cover":430,"user_count":431,"level":69,"fee_type":9,"lab_coins":9,"tags":432,"type":9,"status":69,"has_cert":42,"hidden":12},9428,"html-for-beginners","초보자를 위한 HTML","https:\u002F\u002Fcourse-cover.labex.io\u002Fhtml-for-beginners.png?lang=ko",4266,[20,433],"web-development",{"id":435,"alias":436,"name":437,"cover":438,"user_count":439,"level":69,"fee_type":9,"lab_coins":9,"tags":440,"type":77,"status":69,"has_cert":42,"hidden":12},1823,"project-build-a-tic-tac-toe-web-app","틱택토 웹 앱 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-tic-tac-toe-web-app.png?lang=ko",165,[416,433],{"id":442,"alias":443,"name":444,"cover":445,"user_count":446,"level":69,"fee_type":9,"lab_coins":9,"tags":447,"type":77,"status":69,"has_cert":42,"hidden":12},1827,"project-creating-a-whack-a-mole-web-game","두더지 잡기 웹 게임 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-whack-a-mole-web-game.png?lang=ko",45,[416,433],{"path":449,"team":832},{"id":450,"alias":20,"name":21,"img_url":451,"course_count":69,"hours":452,"enable_uid":12,"skills_count":453,"is_online":42,"is_followed":12,"has_cert":42,"cert_threshold":454,"skilltree":20,"project_count":455,"category":22,"followers_count":456,"tags":457,"url":22,"description":458,"icon":22,"authors":459,"labs_count":84,"levels":460,"learned_skills_count":9,"is_path_group":12,"groups":815,"meta_title":816,"meta_description":817,"meta_keywords":818,"parent_paths":819,"langs":830,"first_lab_alias":831,"first_course_alias":428},52,"https:\u002F\u002Ffile.labex.io\u002Fupload\u002Fu\u002F1991\u002FeGCPCGgBJ3WY.png",30,28,8000,57,13286,[],"웹 개발의 초석인 HTML 을 이 포괄적인 학습 경로를 통해 배우세요. 초보자를 위해 설계된 이 로드맵은 HTML 마스터를 위한 체계적인 접근 방식을 제공합니다. 대화형 HTML 강좌는 문서 구조, 태그 및 시맨틱 마크업을 다룹니다. 동적인 HTML 플레이그라운드에서 실습 위주의 비디오 없는 연습을 완료하여 잘 구성된 웹 페이지를 만들고 실제 경험을 쌓으세요.",[],[461,466],{"level":69,"name":462,"courses":463},"courses",[464],{"id":427,"alias":428,"name":429,"cover":430,"user_count":431,"level":69,"fee_type":9,"lab_coins":9,"tags":465,"type":9,"status":69,"has_cert":42,"hidden":12},[20,433],{"level":8,"name":467,"courses":468},"projects",[469,471,473,480,487,494,501,508,514,520,526,532,539,545,551,557,563,569,575,582,589,595,601,608,615,621,627,633,639,645,651,657,663,669,675,681,687,693,699,705,711,717,724,731,737,743,749,755,761,767,773,779,785,791,797,803,809],{"id":435,"alias":436,"name":437,"cover":438,"user_count":439,"level":69,"fee_type":9,"lab_coins":9,"tags":470,"type":77,"status":69,"has_cert":42,"hidden":12},[416,433],{"id":442,"alias":443,"name":444,"cover":445,"user_count":446,"level":69,"fee_type":9,"lab_coins":9,"tags":472,"type":77,"status":69,"has_cert":42,"hidden":12},[416,433],{"id":474,"alias":475,"name":476,"cover":477,"user_count":478,"level":69,"fee_type":9,"lab_coins":9,"tags":479,"type":77,"status":69,"has_cert":42,"hidden":12},2117,"project-create-a-notes-app-using-react","React 를 사용하여 메모 앱 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-create-a-notes-app-using-react.png?lang=ko",70,[419,416,433],{"id":481,"alias":482,"name":483,"cover":484,"user_count":485,"level":69,"fee_type":9,"lab_coins":9,"tags":486,"type":77,"status":69,"has_cert":42,"hidden":12},2120,"project-building-a-expense-splitter-web-app","모던 지출 분할 웹 앱 구축","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-building-a-expense-splitter-web-app.png?lang=ko",17,[416,433],{"id":488,"alias":489,"name":490,"cover":491,"user_count":492,"level":69,"fee_type":9,"lab_coins":9,"tags":493,"type":77,"status":69,"has_cert":42,"hidden":12},2121,"project-creating-a-drawing-board-web-app","드로잉 보드 웹 앱 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-drawing-board-web-app.png?lang=ko",12,[416,433],{"id":495,"alias":496,"name":497,"cover":498,"user_count":499,"level":69,"fee_type":9,"lab_coins":9,"tags":500,"type":77,"status":69,"has_cert":42,"hidden":12},2126,"project-creating-a-task-timer-web-app","Task 타이머 웹 앱 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-task-timer-web-app.png?lang=ko",21,[416,433],{"id":502,"alias":503,"name":504,"cover":505,"user_count":506,"level":69,"fee_type":9,"lab_coins":9,"tags":507,"type":77,"status":69,"has_cert":42,"hidden":12},2152,"project-create-a-swiper-carousel-web-app","Swiper 캐러셀 웹 앱 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-create-a-swiper-carousel-web-app.png?lang=ko",9,[416,433],{"id":509,"alias":510,"name":511,"cover":512,"user_count":8,"level":69,"fee_type":9,"lab_coins":9,"tags":513,"type":77,"status":69,"has_cert":42,"hidden":12},2205,"project-monty-hall-problem-simulation-web-app","몬티 홀 시뮬레이션 웹 앱","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-monty-hall-problem-simulation-web-app.png?lang=ko",[416,433],{"id":515,"alias":516,"name":517,"cover":518,"user_count":84,"level":8,"fee_type":9,"lab_coins":9,"tags":519,"type":77,"status":69,"has_cert":42,"hidden":12},2217,"project-building-a-web-avoiding-block-game","웹 기반 블록 회피 게임 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-building-a-web-avoiding-block-game.png?lang=ko",[416,433],{"id":521,"alias":522,"name":523,"cover":524,"user_count":84,"level":69,"fee_type":9,"lab_coins":9,"tags":525,"type":77,"status":69,"has_cert":42,"hidden":12},2243,"project-2048-web-game-using-jquery","jQuery 를 사용한 2048 웹 게임","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-2048-web-game-using-jquery.png?lang=ko",[416,433],{"id":527,"alias":528,"name":529,"cover":530,"user_count":485,"level":69,"fee_type":9,"lab_coins":9,"tags":531,"type":77,"status":69,"has_cert":42,"hidden":12},2250,"project-developing-a-simple-online-chat-room-using-flask","Flask 를 사용하여 간단한 온라인 채팅방 개발하기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-developing-a-simple-online-chat-room-using-flask.png?lang=ko",[346,433],{"id":533,"alias":534,"name":535,"cover":536,"user_count":537,"level":69,"fee_type":9,"lab_coins":9,"tags":538,"type":77,"status":69,"has_cert":42,"hidden":12},2260,"project-build-a-sliding-puzzle-game-with-javascript","JavaScript 로 슬라이딩 퍼즐 게임 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-sliding-puzzle-game-with-javascript.png?lang=ko",8,[416,433],{"id":540,"alias":541,"name":542,"cover":543,"user_count":84,"level":69,"fee_type":9,"lab_coins":9,"tags":544,"type":77,"status":69,"has_cert":42,"hidden":12},2261,"project-create-a-pixel-art-animator-with-react","React 로 픽셀 아트 애니메이터 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-create-a-pixel-art-animator-with-react.png?lang=ko",[419,416,433],{"id":546,"alias":547,"name":548,"cover":549,"user_count":47,"level":69,"fee_type":9,"lab_coins":9,"tags":550,"type":77,"status":69,"has_cert":42,"hidden":12},2262,"project-jquery-flip-puzzle-game","jQuery 플립 퍼즐 게임","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-jquery-flip-puzzle-game.png?lang=ko",[416,433],{"id":552,"alias":553,"name":554,"cover":555,"user_count":47,"level":69,"fee_type":9,"lab_coins":9,"tags":556,"type":77,"status":69,"has_cert":42,"hidden":12},2293,"project-creating-a-minesweeper-game-with-javascript","JavaScript 로 지뢰 찾기 게임 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-a-minesweeper-game-with-javascript.png?lang=ko",[416,433],{"id":558,"alias":559,"name":560,"cover":561,"user_count":47,"level":69,"fee_type":9,"lab_coins":9,"tags":562,"type":77,"status":69,"has_cert":42,"hidden":12},2320,"project-build-a-simple-markdown-editor-with-live-preview","실시간 미리보기가 있는 간단한 Markdown 에디터 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-simple-markdown-editor-with-live-preview.png?lang=ko",[416,433],{"id":564,"alias":565,"name":566,"cover":567,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":568,"type":77,"status":69,"has_cert":42,"hidden":12},2321,"project-implement-a-magnifying-glass-effect-using-canvas","Canvas 를 사용하여 확대경 효과 구현하기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-implement-a-magnifying-glass-effect-using-canvas.png?lang=ko",[416,433],{"id":570,"alias":571,"name":572,"cover":573,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":574,"type":77,"status":69,"has_cert":42,"hidden":12},2363,"project-build-an-image-cropping-tool-using-html5","HTML5 를 사용하여 이미지 자르기 도구 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-an-image-cropping-tool-using-html5.png?lang=ko",[416,433],{"id":576,"alias":577,"name":578,"cover":579,"user_count":580,"level":8,"fee_type":9,"lab_coins":9,"tags":581,"type":77,"status":69,"has_cert":42,"hidden":12},2826,"project-building-a-christmas-wish-list-builder-in-react","React 로 크리스마스 위시리스트 빌더 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-building-a-christmas-wish-list-builder-in-react.png?lang=ko",24,[419,416,433],{"id":583,"alias":584,"name":585,"cover":586,"user_count":492,"level":69,"fee_type":9,"lab_coins":9,"tags":587,"type":77,"status":69,"has_cert":42,"hidden":12},4544,"project-deploying-mobilenet-with-tensorflowjs-and-flask","TensorFlow.js 와 Flask 를 이용한 MobileNet 배포","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-deploying-mobilenet-with-tensorflowjs-and-flask.png?lang=ko",[346,588],"data-science",{"id":590,"alias":591,"name":592,"cover":593,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":594,"type":77,"status":69,"has_cert":42,"hidden":12},4573,"project-dont-step-on-the-white-tile","하얀 타일 밟지 마세요","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-dont-step-on-the-white-tile.png?lang=ko",[416,433],{"id":596,"alias":597,"name":598,"cover":599,"user_count":8,"level":69,"fee_type":9,"lab_coins":9,"tags":600,"type":77,"status":69,"has_cert":42,"hidden":12},4574,"project-scratch-card-game","스크래치 카드 웹 게임 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-scratch-card-game.png?lang=ko",[416,433],{"id":602,"alias":603,"name":604,"cover":605,"user_count":606,"level":77,"fee_type":9,"lab_coins":9,"tags":607,"type":77,"status":69,"has_cert":42,"hidden":12},4719,"project-build-a-simple-url-shortener-with-flask-and-mysql","Flask 와 MySQL 을 사용한 간단한 URL 단축기 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-simple-url-shortener-with-flask-and-mysql.png?lang=ko",31,[416,433],{"id":609,"alias":610,"name":611,"cover":612,"user_count":613,"level":69,"fee_type":9,"lab_coins":9,"tags":614,"type":77,"status":69,"has_cert":42,"hidden":12},4871,"project-build-a-web-based-tcp-port-scanner","웹 기반 TCP 포트 스캐너 구축","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-build-a-web-based-tcp-port-scanner.png?lang=ko",13,[316,355,310],{"id":616,"alias":617,"name":618,"cover":619,"user_count":47,"level":69,"fee_type":9,"lab_coins":9,"tags":620,"type":77,"status":69,"has_cert":42,"hidden":12},5455,"project-do-a-search","Vue.js 검색 기능 개발","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-do-a-search.png?lang=ko",[416,433],{"id":622,"alias":623,"name":624,"cover":625,"user_count":84,"level":69,"fee_type":9,"lab_coins":9,"tags":626,"type":77,"status":69,"has_cert":42,"hidden":12},5456,"project-dynamic-tab-bar","동적 고정 탭 바 구현","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-dynamic-tab-bar.png?lang=ko",[413,433],{"id":628,"alias":629,"name":630,"cover":631,"user_count":8,"level":69,"fee_type":9,"lab_coins":9,"tags":632,"type":77,"status":69,"has_cert":42,"hidden":12},5459,"project-a-good-review-for-the-takeout","배달 음식에 대한 훌륭한 리뷰","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-a-good-review-for-the-takeout.png?lang=ko",[416,433],{"id":634,"alias":635,"name":636,"cover":637,"user_count":77,"level":69,"fee_type":9,"lab_coins":9,"tags":638,"type":77,"status":69,"has_cert":42,"hidden":12},5460,"project-add-new-address","주소 관리 웹 애플리케이션","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-add-new-address.png?lang=ko",[416,433],{"id":640,"alias":641,"name":642,"cover":643,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":644,"type":77,"status":69,"has_cert":42,"hidden":12},5467,"project-holiday-greeting-card","랜덤 축하 카드 생성기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-holiday-greeting-card.png?lang=ko",[416,433],{"id":646,"alias":647,"name":648,"cover":649,"user_count":77,"level":69,"fee_type":9,"lab_coins":9,"tags":650,"type":77,"status":69,"has_cert":42,"hidden":12},5468,"project-movie-ticket-reservation","영화 티켓 예매 시스템","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-movie-ticket-reservation.png?lang=ko",[416,433],{"id":652,"alias":653,"name":654,"cover":655,"user_count":8,"level":69,"fee_type":9,"lab_coins":9,"tags":656,"type":77,"status":69,"has_cert":42,"hidden":12},5476,"project-web-ppt","웹 기반 HTML 프레젠테이션 빌더","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-web-ppt.png?lang=ko",[416,433],{"id":658,"alias":659,"name":660,"cover":661,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":662,"type":77,"status":69,"has_cert":42,"hidden":12},5479,"project-fun-shopping","Vue.js 드래그 앤 드롭 쇼핑 카트","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-fun-shopping.png?lang=ko",[416,433],{"id":664,"alias":665,"name":666,"cover":667,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":668,"type":77,"status":69,"has_cert":42,"hidden":12},5481,"project-layout-switch","레이아웃 전환 기능이 있는 제품 목록","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-layout-switch.png?lang=ko",[416,433],{"id":670,"alias":671,"name":672,"cover":673,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":674,"type":77,"status":69,"has_cert":42,"hidden":12},5485,"project-read-it","Vue.js 전자책 리더 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-read-it.png?lang=ko",[416,433],{"id":676,"alias":677,"name":678,"cover":679,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":680,"type":77,"status":69,"has_cert":42,"hidden":12},5488,"project-switch-business-status","Vue.js 스토어 상태 전환기 구축하기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-switch-business-status.png?lang=ko",[416,433],{"id":682,"alias":683,"name":684,"cover":685,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":686,"type":77,"status":69,"has_cert":42,"hidden":12},5537,"project-atomic-css","CSS 를 활용한 Atomic Flex 레이아웃 구현","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-atomic-css.png?lang=ko",[413,433],{"id":688,"alias":689,"name":690,"cover":691,"user_count":77,"level":69,"fee_type":9,"lab_coins":9,"tags":692,"type":77,"status":69,"has_cert":42,"hidden":12},5538,"project-creating-website-homepage","반응형 뉴스 웹사이트 홈페이지 구축","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creating-website-homepage.png?lang=ko",[413,433],{"id":694,"alias":695,"name":696,"cover":697,"user_count":77,"level":69,"fee_type":9,"lab_coins":9,"tags":698,"type":77,"status":69,"has_cert":42,"hidden":12},5539,"project-creative-billboard","나무 질감을 활용한 창의적인 광고판 디자인","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-creative-billboard.png?lang=ko",[413,433],{"id":700,"alias":701,"name":702,"cover":703,"user_count":47,"level":69,"fee_type":9,"lab_coins":9,"tags":704,"type":77,"status":69,"has_cert":42,"hidden":12},5543,"project-fix-website-display","웹사이트 디스플레이 문제 해결","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-fix-website-display.png?lang=ko",[413,433],{"id":706,"alias":707,"name":708,"cover":709,"user_count":84,"level":69,"fee_type":9,"lab_coins":9,"tags":710,"type":77,"status":69,"has_cert":42,"hidden":12},5544,"project-flex-dice-layout","Flexbox 를 사용한 반응형 주사위 레이아웃","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-flex-dice-layout.png?lang=ko",[413,433],{"id":712,"alias":713,"name":714,"cover":715,"user_count":77,"level":69,"fee_type":9,"lab_coins":9,"tags":716,"type":77,"status":69,"has_cert":42,"hidden":12},5549,"project-give-your-page-a-makeover","페이지를 새롭게 단장하기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-give-your-page-a-makeover.png?lang=ko",[413,433],{"id":718,"alias":719,"name":720,"cover":721,"user_count":722,"level":69,"fee_type":9,"lab_coins":9,"tags":723,"type":77,"status":69,"has_cert":42,"hidden":12},5550,"project-labex-knowledge-network","간결하고 아름다운 홈페이지 디자인","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-labex-knowledge-network.png?lang=ko",15,[413,433],{"id":725,"alias":726,"name":727,"cover":728,"user_count":729,"level":69,"fee_type":9,"lab_coins":9,"tags":730,"type":77,"status":69,"has_cert":42,"hidden":12},5551,"project-movie-theater-seat-arrangement","영화관 좌석 배치","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-movie-theater-seat-arrangement.png?lang=ko",6,[413,433],{"id":732,"alias":733,"name":734,"cover":735,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":736,"type":77,"status":69,"has_cert":42,"hidden":12},5552,"project-responsive-page-layout","Gulp 를 이용한 반응형 웹 디자인","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-responsive-page-layout.png?lang=ko",[413,433],{"id":738,"alias":739,"name":740,"cover":741,"user_count":84,"level":69,"fee_type":9,"lab_coins":9,"tags":742,"type":77,"status":69,"has_cert":42,"hidden":12},5553,"project-responsive-web-design","모든 화면을 위한 반응형 웹 디자인","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-responsive-web-design.png?lang=ko",[413,433],{"id":744,"alias":745,"name":746,"cover":747,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":748,"type":77,"status":69,"has_cert":42,"hidden":12},5594,"project-table-data-conversion","Vue.js 를 이용한 데이터 형식 변환 및 시각화","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-table-data-conversion.png?lang=ko",[416,433],{"id":750,"alias":751,"name":752,"cover":753,"user_count":47,"level":69,"fee_type":9,"lab_coins":9,"tags":754,"type":77,"status":69,"has_cert":42,"hidden":12},5595,"project-vanished-into-thin-air","허공으로 사라지다","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-vanished-into-thin-air.png?lang=ko",[416,433],{"id":756,"alias":757,"name":758,"cover":759,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":760,"type":77,"status":69,"has_cert":42,"hidden":12},5596,"project-wish-sticky-note","Vue.js 로 소원 메모 앱 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-wish-sticky-note.png?lang=ko",[416,433],{"id":762,"alias":763,"name":764,"cover":765,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":766,"type":77,"status":69,"has_cert":42,"hidden":12},5607,"project-dynamization-of-homepage-data","홈페이지 데이터 동적 처리","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-dynamization-of-homepage-data.png?lang=ko",[416,433],{"id":768,"alias":769,"name":770,"cover":771,"user_count":8,"level":69,"fee_type":9,"lab_coins":9,"tags":772,"type":77,"status":69,"has_cert":42,"hidden":12},5609,"project-food-protein-revealed","Echarts 와 JSON 을 활용한 데이터 시각화","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-food-protein-revealed.png?lang=ko",[416,433],{"id":774,"alias":775,"name":776,"cover":777,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":778,"type":77,"status":69,"has_cert":42,"hidden":12},5611,"project-lets-have-a-meeting-together","함께 회의해요","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-lets-have-a-meeting-together.png?lang=ko",[416,433],{"id":780,"alias":781,"name":782,"cover":783,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":784,"type":77,"status":69,"has_cert":42,"hidden":12},5612,"project-missing-token","Vue.js 및 Vuex 로 로그인 기능 구축하기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-missing-token.png?lang=ko",[416,433],{"id":786,"alias":787,"name":788,"cover":789,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":790,"type":77,"status":69,"has_cert":42,"hidden":12},5618,"project-time-management-master","Vue.js 작업 관리자 만들기","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-time-management-master.png?lang=ko",[416,433],{"id":792,"alias":793,"name":794,"cover":795,"user_count":9,"level":69,"fee_type":9,"lab_coins":9,"tags":796,"type":77,"status":69,"has_cert":42,"hidden":12},5695,"project-implement-user-login-function","사용자 로그인 기능 구현","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-implement-user-login-function.png?lang=ko",[416,433],{"id":798,"alias":799,"name":800,"cover":801,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":802,"type":77,"status":69,"has_cert":42,"hidden":12},5713,"project-time-with-your-phone","휴대폰 사용 시간","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-time-with-your-phone.png?lang=ko",[416,433],{"id":804,"alias":805,"name":806,"cover":807,"user_count":69,"level":69,"fee_type":9,"lab_coins":9,"tags":808,"type":77,"status":69,"has_cert":42,"hidden":12},5714,"project-weather-trend","Vue 와 Echarts 를 활용한 날씨 트렌드 차트","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-weather-trend.png?lang=ko",[416,433],{"id":810,"alias":811,"name":812,"cover":813,"user_count":613,"level":69,"fee_type":9,"lab_coins":9,"tags":814,"type":77,"status":69,"has_cert":42,"hidden":12},5720,"project-counting-access-times-by-ip","IP 주소별 방문 횟수 카운팅","https:\u002F\u002Fcourse-cover.labex.io\u002Fproject-counting-access-times-by-ip.png?lang=ko",[364],[],"HTML 배우기 | HTML 온라인 강좌","초보자를 위해 설계된 체계적인 학습 경로를 통해 HTML 을 배우세요. 이 대화형 HTML 강좌를 통해 동적인 HTML 플레이그라운드에서 웹 디자인을 연습하고 기초 기술을 구축할 수 있습니다.","HTML 배우기, HTML 강좌, 초보자를 위한 HTML, 온라인 HTML 학습, HTML 튜토리얼, 웹 기초, HTML 기본, HTML 연습",[820],{"id":821,"alias":433,"name":410,"img_url":822,"course_count":84,"hours":823,"enable_uid":12,"skills_count":824,"is_online":42,"is_followed":12,"has_cert":42,"cert_threshold":454,"skilltree":433,"project_count":825,"category":22,"followers_count":826,"tags":827,"url":22,"description":828,"icon":22,"authors":829,"labs_count":606},71,"https:\u002F\u002Ffile.labex.io\u002Fupload\u002Fu\u002F1991\u002FY5b0Qn21hQLI.png",300,99,130,13766,[],"초보자를 위해 설계된 포괄적인 학습 경로를 통해 웹 개발을 배우세요. 이 체계적인 웹 개발 강좌는 HTML, CSS, JavaScript 와 같은 기본부터 인기 있는 프레임워크에 이르기까지 프런트엔드 및 백엔드 기술을 마스터하기 위한 명확한 로드맵을 제공합니다. 비디오가 아닌 실습 모듈과 실제 코딩 연습을 통해 인터랙티브한 환경에서 실제 웹사이트와 웹 애플리케이션을 구축하게 됩니다.",[],[53,57,54,55,56,58,59,60,61],"html-html-document-structure-597898",[],["Reactive",834],{"$si18n:cached-locale-configs":835,"$si18n:resolved-locale":59,"$scolor-mode":854,"$suser":-1,"$scopywriting":856,"$sjoined_teams":1102,"$sowned_teams":1103,"$sjoined_skill_strees":1104,"$sget_joined_skill_strees_pending":42,"$suser_streaks":1105,"$stoday_get_streak":12,"$snext_skill_badge":1105,"$snext_streak_badge":1105,"$sis_pc":42,"$swindow_width":9,"$ssite-config":1106},{"en":836,"zh":838,"es":840,"ja":842,"fr":844,"de":846,"ru":848,"pt":850,"ko":852},{"fallbacks":837,"cacheable":42},[61],{"fallbacks":839,"cacheable":42},[61],{"fallbacks":841,"cacheable":42},[61,61],{"fallbacks":843,"cacheable":42},[61],{"fallbacks":845,"cacheable":42},[61,61],{"fallbacks":847,"cacheable":42},[61,61],{"fallbacks":849,"cacheable":42},[61,61],{"fallbacks":851,"cacheable":42},[61,61],{"fallbacks":853,"cacheable":42},[61],{"preference":855,"value":855,"unknown":42,"forced":12},"light",[857,897,974,1037,1042],{"key":858,"text":22,"tags":859,"data":861},"free_modal",[860],"free_user",{"close":862,"free_modal":863},{"hours":580},{"confirm_button":864,"sub_title":877,"title":887},{"label":865,"type":875,"url":876},{"de":866,"en":867,"es":868,"fr":869,"ja":870,"ko":871,"pt":872,"ru":873,"zh":874},"Level up mit LabEx Pro","Level Up With LabEx Pro","Sube de nivel con LabEx Pro","Montez de niveau avec LabEx Pro","LabEx Pro にレベルアップ","LabEx Pro로 레벨업","Suba de nível com LabEx Pro","Повысьте уровень с LabEx Pro","升级到 LabEx Pro","link","\u002Fpricing",{"de":878,"en":879,"es":880,"fr":881,"ja":882,"ko":883,"pt":884,"ru":885,"zh":886},"🚀 Seit 2017 · Vertraut von 1M+ Lernenden · 100% Praxisorientiert","🚀 Since 2017 · Trusted by 1M+ Learners · 100% Hands-On","🚀 Desde 2017 · Confiado por 1M+ Estudiantes · 100% Práctico","🚀 Depuis 2017 · Fait confiance par 1M+ Apprenants · 100% Pratique","🚀 2017年以来 · 100万人以上の学習者に信頼 · 100% ハンズオン","🚀 2017년부터 · 100만명+ 학습자가 신뢰 · 100% 실습","🚀 Desde 2017 · Confiado por 1M+ Aprendizes · 100% Prático","🚀 С 2017 года · Доверие 1M+ учащихся · 100% Практика","🚀 自2017年 · 100万+学习者信赖 · 100% 动手实践",{"de":888,"en":889,"es":890,"fr":891,"ja":892,"ko":893,"pt":894,"ru":895,"zh":896},"Kostenloser Plan auf 3 VM-Starts pro Tag begrenzt","Free Plan Limited to 3 VM Launches Per Day","Plan gratuito limitado a 3 lanzamientos de VM por día","Plan gratuit limité à 3 lancements de VM par jour","無料プランは1日3回のVM起動に制限されています","무료 플랜은 하루 3회 VM 실행으로 제한됩니다","Plano gratuito limitado a 3 inicializações de VM por dia","Бесплатный план ограничен 3 запусками ВМ в день","免费计划每天限制启动3个虚拟机",{"key":898,"text":22,"tags":899,"data":900},"country_codes",[860],{"codes":901},[902,905,908,911,914,917,920,923,926,929,932,935,938,941,944,947,950,953,956,959,962,965,968,971],{"code":903,"emoji":904},"IN","🇮🇳",{"code":906,"emoji":907},"ID","🇮🇩",{"code":909,"emoji":910},"EG","🇪🇬",{"code":912,"emoji":913},"PK","🇵🇰",{"code":915,"emoji":916},"MY","🇲🇾",{"code":918,"emoji":919},"VN","🇻🇳",{"code":921,"emoji":922},"UG","🇺🇬",{"code":924,"emoji":925},"PH","🇵🇭",{"code":927,"emoji":928},"BR","🇧🇷",{"code":930,"emoji":931},"ET","🇪🇹",{"code":933,"emoji":934},"BD","🇧🇩",{"code":936,"emoji":937},"NG","🇳🇬",{"code":939,"emoji":940},"KE","🇰🇪",{"code":942,"emoji":943},"IR","🇮🇷",{"code":945,"emoji":946},"MX","🇲🇽",{"code":948,"emoji":949},"TR","🇹🇷",{"code":951,"emoji":952},"DZ","🇩🇿",{"code":954,"emoji":955},"SD","🇸🇩",{"code":957,"emoji":958},"AO","🇦🇴",{"code":960,"emoji":961},"PE","🇵🇪",{"code":963,"emoji":964},"GH","🇬🇭",{"code":966,"emoji":967},"MZ","🇲🇿",{"code":969,"emoji":970},"IQ","🇮🇶",{"code":972,"emoji":973},"UZ","🇺🇿",{"key":975,"text":976,"tags":977,"data":981},"free_labs_page","free labs 页面 TDK",[860,978,979,980],"trial_user","pro_user","not_logged_in",{"free_labs_page":982},[983,989,995,1001,1007,1013,1019,1025,1031],{"description":984,"lang":61,"meta_description":985,"meta_keywords":986,"meta_title":987,"title":988},"1000+ Free Interactive Labs in 30+ Tech Fields for Developers and Students. Practice and enhance your skills with free hands-on exercises and real-world scenarios.\n","Discover LabEx's 1000+ free interactive labs across Linux, DevOps, Cybersecurity, Data Science, Web Development, Machine Learning, and more. Gain free access to expert-led training and hands-on practice in a dynamic environment.\n","Free Labs, LabEx, Interactive Labs, Free Tech Skills, Free Hands-On Practice, Online Learning\n","Free Labs | Interactive Practice in 30+ Tech Fields","Free Labs",{"description":990,"lang":53,"meta_description":991,"meta_keywords":992,"meta_title":993,"title":994},"为开发者和学生量身打造的 1000+ 免费互动实验，覆盖 30+ 技术领域。通过免费实践练习和真实场景，提升您的技能。\n","探索 LabEx 提供的 1000+ 免费互动实验，涵盖 Linux、DevOps、网络安全、数据科学、 Web 开发、机器学习等领域。在动态环境中免费获得专家指导的培训和实践机会。\n","免费实验, LabEx, 互动实验, 免费技术技能, 免费实践练习, 在线学习\n","免费实验 | 30+ 技术领域互动实践","免费实验",{"description":996,"lang":54,"meta_description":997,"meta_keywords":998,"meta_title":999,"title":1000},"Más de 1000 laboratorios interactivos gratuitos en más de 30 áreas tecnológicas para desarrolladores y estudiantes. Mejora tus habilidades con ejercicios prácticos gratuitos y escenarios del mundo real.\n","Explora más de 1000 laboratorios interactivos gratuitos de LabEx en Linux, DevOps, Ciberseguridad, Ciencia de Datos, Desarrollo Web, Machine Learning y más. Accede gratis a formación guiada por expertos y práctica en entornos dinámicos.\n","Laboratorios Gratuitos, LabEx, Laboratorios Interactivos, Habilidades Técnicas Gratis, Práctica Práctica Gratuita, Aprendizaje en Línea\n","Laboratorios Gratuitos | Práctica Interactiva en Más de 30 Áreas Tecnológicas","Laboratorios Gratuitos",{"description":1002,"lang":55,"meta_description":1003,"meta_keywords":1004,"meta_title":1005,"title":1006},"Plus de 1000 laboratoires interactifs gratuits dans plus de 30 domaines technologiques pour les développeurs et les étudiants. Améliorez vos compétences avec des exercices pratiques gratuits et des scénarios réels.\n","Découvrez plus de 1000 laboratoires interactifs gratuits de LabEx en Linux, DevOps, Cybersécurité, Science des Données, Développement Web, Machine Learning et plus encore. Accédez gratuitement à des formations dirigées par des experts et à des exercices pratiques dans un environnement dynamique.\n","Laboratoires Gratuits, LabEx, Laboratoires Interactifs, Compétences Techniques Gratuites, Pratique Pratique Gratuite, Apprentissage en Ligne\n","Laboratoires Gratuits | Pratique Interactive dans Plus de 30 Domaines Technologiques","Laboratoires Gratuits",{"description":1008,"lang":56,"meta_description":1009,"meta_keywords":1010,"meta_title":1011,"title":1012},"Über 1000 kostenlose interaktive Labs in über 30 Technologiebereichen für Entwickler und Studierende. Verbessere deine Fähigkeiten mit kostenlosen praktischen Übungen und realen Szenarien.\n","Entdecke über 1000 kostenlose interaktive Labs von LabEx in Bereichen wie Linux, DevOps, Cybersicherheit, Datenwissenschaft, Webentwicklung, maschinelles Lernen und mehr. Erhalte kostenlosen Zugang zu von Experten geleiteten Schulungen und praktischen Übungen in einer dynamischen Umgebung.\n","Kostenlose Labs, LabEx, Interaktive Labs, Kostenlose Technische Fähigkeiten, Kostenlose Praktische Übungen, Online-Lernen\n","Kostenlose Labs | Interaktive Übungen in Über 30 Technologiebereichen","Kostenlose Labs",{"description":1014,"lang":57,"meta_description":1015,"meta_keywords":1016,"meta_title":1017,"title":1018},"開発者や学生向けに、30以上の技術分野をカバーする1000以上の無料インタラクティブなラボ。無料の実践練習と現実のシナリオでスキルを向上させましょう。\n","LabExの1000以上の無料インタラクティブなラボを、Linux、DevOps、サイバーセキュリティ、データサイエンス、ウェブ開発、機械学習などで体験。専門家による指導とダイナミックな環境での無料実践練習を利用できます。\n","無料ラボ, LabEx, インタラクティブなラボ, 無料技術スキル, 無料実践練習, オンライン学習\n","無料ラボ | 30以上の技術分野でインタラクティブな実践","無料ラボ",{"description":1020,"lang":58,"meta_description":1021,"meta_keywords":1022,"meta_title":1023,"title":1024},"Более 1000 бесплатных интерактивных лабораторий в более чем 30 технических областях для разработчиков и студентов. Совершенствуйте свои навыки с бесплатными практическими упражнениями и реальными сценариями.\n","Ознакомьтесь с более чем 1000 бесплатных интерактивных лабораторий от LabEx по Linux, DevOps, кибербезопасности, науке о данных, веб-разработке, машинному обучению и многому другому. Получите бесплатный доступ к обучению под руководством экспертов и практическим упражнениям в динамичной среде.\n","Бесплатные Лаборатории, LabEx, Интерактивные Лаборатории, Бесплатные Технические Навыки, Бесплатная Практика, Онлайн-Обучение\n","Бесплатные Лаборатории | Интерактивная Практика в Более Чем 30 Технических Областях","Бесплатные Лаборатории",{"description":1026,"lang":59,"meta_description":1027,"meta_keywords":1028,"meta_title":1029,"title":1030},"개발자와 학생을 위해 30개 이상의 기술 분야를 다루는 1000개 이상의 무료 인터랙티브 랩. 무료 실습 연습과 실제 시나리오로 스킬을 향상하세요.\n","LabEx의 1000개 이상의 무료 인터랙티브 랩을 통해 Linux, DevOps, 사이버 보안, 데이터 사이언스, 웹 개발, 머신 러닝 등을 탐구하세요. 전문가가 이끄는 교육과 동적 환경에서의 무료 실습 기회를 누리세요.\n","무료 랩, LabEx, 인터랙티브 랩, 무료 기술 스킬, 무료 실습 연습, 온라인 학습\n","무료 랩 | 30개 이상의 기술 분야에서 인터랙티브 연습","무료 랩",{"description":1032,"lang":60,"meta_description":1033,"meta_keywords":1034,"meta_title":1035,"title":1036},"Mais de 1000 laboratórios interativos gratuitos em mais de 30 áreas tecnológicas para desenvolvedores e estudantes. Aprimore suas habilidades com exercícios práticos gratuitos e cenários do mundo real.\n","Explore mais de 1000 laboratórios interativos gratuitos da LabEx em Linux, DevOps, Cibersegurança, Ciência de Dados, Desenvolvimento Web, Machine Learning e mais. Obtenha acesso gratuito a treinamentos liderados por especialistas e prática em ambientes dinâmicos.\n","Laboratórios Gratuitos, LabEx, Laboratórios Interativos, Habilidades Técnicas Gratuitas, Prática Prática Gratuita, Aprendizado Online\n","Laboratórios Gratuitos | Prática Interativa em Mais de 30 Áreas Tecnológicas","Laboratórios Gratuitos",{"key":1038,"text":1039,"tags":1040,"data":1041},"ai_check","ai inspect 是否开启",[860,978,979],{"ai_check":42},{"key":1043,"text":1044,"tags":1045,"data":1046},"exercises_page","Exercises 页面 TDK",[860,978,979,980],{"exercises_page":1047},[1048,1054,1060,1066,1072,1078,1084,1090,1096],{"description":1049,"lang":61,"meta_description":1050,"meta_keywords":1051,"meta_title":1052,"title":1053},"Explore 2000+ hands-on exercises and real-world challenges across 30+ tech domains. Build your skills with guided practice and interactive scenarios.\n","Practice hands-on skills across Linux, Python, DevOps, Cybersecurity, and more. Level up through guided tasks, troubleshooting labs, and scenario-based exercises built for real-world learning.\n","Exercises, Challenges, LabEx, Hands-On Practice, Tech Skills, Interactive Learning, Online Exercises\n","Interactive Exercises & Real-World Challenges","Exercises",{"description":1055,"lang":53,"meta_description":1056,"meta_keywords":1057,"meta_title":1058,"title":1059},"探索覆盖 30+ 技术领域的 2000+ 动手练习和真实挑战，通过引导式练习提升实战能力。\n","覆盖 Linux、Python、DevOps、网络安全等领域的动手技能练习。通过引导任务、故障排查实验和基于场景的练习，提升实战能力。\n","技术练习, 挑战任务, LabEx, 动手实践, 技术技能提升, 在线练习, 互动学习\n","互动练习与真实挑战","技术练习",{"description":1061,"lang":54,"meta_description":1062,"meta_keywords":1063,"meta_title":1064,"title":1065},"Explora más de 2000 ejercicios prácticos y desafíos reales en más de 30 áreas tecnológicas. Mejora tus habilidades con práctica guiada e interactiva.\n","Practica habilidades prácticas en Linux, Python, DevOps, Ciberseguridad y más. Mejora con tareas guiadas, laboratorios de resolución de problemas y ejercicios basados en escenarios reales.\n","Ejercicios, Desafíos, LabEx, Práctica Práctica, Habilidades Técnicas, Aprendizaje Interactivo, Ejercicios en Línea\n","Ejercicios Interactivos y Desafíos Reales","Ejercicios",{"description":1067,"lang":55,"meta_description":1068,"meta_keywords":1069,"meta_title":1070,"title":1071},"Découvrez plus de 2000 exercices pratiques et défis concrets dans plus de 30 domaines technologiques. Renforcez vos compétences grâce à une pratique guidée et interactive.\n","Pratiquez des compétences pratiques en Linux, Python, DevOps, Cybersécurité et plus encore. Progressez grâce à des tâches guidées, des labs de dépannage et des exercices basés sur des scénarios réels.\n","Exercices, Défis, LabEx, Pratique Interactive, Compétences Techniques, Apprentissage en Ligne\n","Exercices Interactifs et Défis Concrets","Exercices",{"description":1073,"lang":56,"meta_description":1074,"meta_keywords":1075,"meta_title":1076,"title":1077},"Über 2000 praktische Übungen und reale Herausforderungen in über 30 Technologiebereichen. Stärke deine Fähigkeiten durch geführte und interaktive Praxis.\n","Trainiere praktische Fähigkeiten in Linux, Python, DevOps, Cybersicherheit und mehr. Steigere dein Können mit geführten Aufgaben, Fehlersuche-Labs und szenariobasierten Übungen für echtes Lernen.\n","Übungen, Herausforderungen, LabEx, Praktische Übung, Technische Fähigkeiten, Interaktives Lernen, Online-Übungen\n","Interaktive Übungen & Reale Herausforderungen","Übungen",{"description":1079,"lang":57,"meta_description":1080,"meta_keywords":1081,"meta_title":1082,"title":1083},"30以上の技術分野にわたる2000以上の実践的な練習問題やチャレンジを体験。ガイド付きの練習でスキルを磨きましょう。\n","Linux、Python、DevOps、サイバーセキュリティなどの実践スキルを習得しましょう。ガイド付きタスクやトラブルシューティングラボ、シナリオに基づいた演習でスキルを向上させましょう。\n","練習問題, チャレンジ, LabEx, 実践スキル, 技術力向上, インタラクティブラーニング, オンライン練習\n","インタラクティブな練習問題と現実的なチャレンジ","練習問題",{"description":1085,"lang":58,"meta_description":1086,"meta_keywords":1087,"meta_title":1088,"title":1089},"Более 2000 практических упражнений и реальных задач в более чем 30 технических областях. Развивайте свои навыки через интерактивную практику.\n","Отрабатывайте практические навыки в Linux, Python, DevOps, кибербезопасности и других областях. Повышайте уровень через пошаговые задания, лаборатории по устранению неполадок и упражнения, основанные на реальных сценариях.\n","Упражнения, Задачи, LabEx, Практика, Технические Навыки, Интерактивное Обучение, Онлайн Упражнения\n","Интерактивные Упражнения и Реальные Задачи","Упражнения",{"description":1091,"lang":59,"meta_description":1092,"meta_keywords":1093,"meta_title":1094,"title":1095},"30개 이상의 기술 분야에 걸친 2000개 이상의 실습 연습 및 실제 과제를 경험하세요. 가이드형 실습으로 기술 능력을 향상하세요。\n","Linux, Python, DevOps, 사이버 보안 등 다양한 분야의 실습 스킬을 연습하세요. 가이드 과제, 문제 해결 랩, 시나리오 기반 연습을 통해 실전 역량을 향상하세요.\n","연습문제, 도전과제, LabEx, 실습훈련, 기술역량 향상, 인터랙티브 학습, 온라인 연습\n","인터랙티브 연습 & 실전 도전 과제","연습문제",{"description":1097,"lang":60,"meta_description":1098,"meta_keywords":1099,"meta_title":1100,"title":1101},"Explore mais de 2000 exercícios práticos e desafios reais em mais de 30 áreas tecnológicas. Melhore suas habilidades com prática guiada e interativa.\n","Pratique habilidades práticas em Linux, Python, DevOps, Cibersegurança e mais. Evolua com tarefas guiadas, laboratórios de resolução de problemas e exercícios baseados em cenários reais.\n","Exercícios, Desafios, LabEx, Prática Interativa, Habilidades Técnicas, Exercícios Online, Aprendizado Prático\n","Exercícios Interativos e Desafios Reais","Exercícios",[],[],[],null,{"currentLocale":59,"defaultLocale":61,"env":1107,"name":1108,"url":1109},"production","LabEx","https:\u002F\u002Flabex.io",["Set"],["ShallowReactive",1112],{"tutorialDetail:html-html-embedded-html-page-70775:ko":1105,"footerData_ko":1105,"skillTreeDetailData:html:ko":1105,"skillTreeListData:basic:ko":1105,"tutorialRecommendCourseListData:html-html-embedded-html-page-70775:ko":1105},"\u002Fko\u002Ftutorials\u002Fhtml-html-embedded-html-page-70775"]</script></body></html>