레슨 4 / 9·20분

시맨틱 HTML과 폼

시맨틱 HTML이란?

시맨틱(Semantic) HTML은 태그 이름만으로 콘텐츠의 의미를 전달하는 작성 방식입니다.

와 대신

등을 사용하면 검색 엔진과 스크린 리더가 페이지 구조를 더 잘 이해할 수 있습니다.

html

<header>
  <nav>
    <a href="/">홈</a>
    <a href="/about">소개</a>
    <a href="/contact">연락처</a>
  </nav>
</header>

<main>
  <article>
    <h1>시맨틱 HTML의 중요성</h1>
    <p>시맨틱 태그는 접근성과 SEO를 동시에 개선합니다.</p>

    <section>
      <h2>접근성 향상</h2>
      <p>스크린 리더가 페이지 구조를 파악하여 사용자에게 안내합니다.</p>
    </section>

    <section>
      <h2>SEO 최적화</h2>
      <p>검색 엔진이 콘텐츠의 중요도와 관계를 이해합니다.</p>
    </section>
  </article>

  <aside>
    <h3>관련 글</h3>
    <ul>
      <li><a href="#">HTML5 새로운 태그</a></li>
      <li><a href="#">웹 접근성 가이드</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>

•
- 페이지나 섹션의 머리글 영역
•
- 내비게이션 링크 모음
•
- 페이지의 주요 콘텐츠 (문서당 하나)
•
- 독립적인 콘텐츠 단위 (블로그 글, 뉴스 기사)
•
- 주제별로 묶인 콘텐츠 그룹
•
- 주요 콘텐츠와 간접적으로 관련된 부가 정보
•
- 페이지나 섹션의 바닥글 영역

HTML 폼 만들기

태그는 사용자 입력을 수집하는 데 사용됩니다. 다양한 타입과 ,

</code> 등을 조합하여 로그인, 회원가입, 검색 등의 폼을 만들 수 있습니다.</p><div class="rounded-xl overflow-hidden border border-gray-200"><div class="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200"><span class="text-xs text-gray-500 font-mono">html</span></div><pre class="p-4 overflow-x-auto bg-gray-900 text-gray-100 text-sm leading-relaxed"><code><form action="/submit" method="POST">
  <!-- 텍스트 입력 -->
  <label for="username">이름</label>
  <input type="text" id="username" name="username"
         placeholder="이름을 입력하세요" required />

  <!-- 이메일 입력 (형식 자동 검증) -->
  <label for="email">이메일</label>
  <input type="email" id="email" name="email"
         placeholder="example@mail.com" required />

  <!-- 비밀번호 -->
  <label for="password">비밀번호</label>
  <input type="password" id="password" name="password"
         minlength="8" required />

  <!-- 셀렉트 박스 -->
  <label for="role">역할</label>
  <select id="role" name="role">
    <option value="">선택하세요</option>
    <option value="student">학생</option>
    <option value="developer">개발자</option>
    <option value="designer">디자이너</option>
  </select>

  <!-- 라디오 버튼 -->
  <fieldset>
    <legend>경험 수준</legend>
    <label>
      <input type="radio" name="level" value="beginner" /> 입문
    </label>
    <label>
      <input type="radio" name="level" value="intermediate" /> 중급
    </label>
    <label>
      <input type="radio" name="level" value="advanced" /> 고급
    </label>
  </fieldset>

  <!-- 체크박스 -->
  <label>
    <input type="checkbox" name="agree" required />
    이용약관에 동의합니다
  </label>

  <!-- 텍스트 영역 -->
  <label for="bio">자기소개</label>
  <textarea id="bio" name="bio" rows="4"
            placeholder="간단한 자기소개를 작성하세요"></textarea>

  <!-- 제출 버튼 -->
  <button type="submit">가입하기</button>
</form></code></pre></div><div class="flex gap-3 p-4 bg-blue-50 border border-blue-200 rounded-xl"><span class="text-blue-500 shrink-0 mt-0.5">💡</span><p class="text-sm text-blue-700"><code class="px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800"><label></code>의 <code class="px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800">for</code> 속성과 <code class="px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800"><input></code>의 <code class="px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800">id</code>를 일치시키면 라벨 클릭 시 해당 입력 필드에 포커스됩니다. <code class="px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800">required</code>, <code class="px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800">minlength</code>, <code class="px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800">pattern</code> 등의 속성으로 브라우저 내장 유효성 검사를 활용하세요. JavaScript 없이도 기본적인 폼 검증이 가능합니다.</p></div></div></div><div class="flex items-center justify-between py-6 border-t border-gray-200"><a class="flex items-center gap-2 text-sm text-gray-500 hover:text-green-600 transition-colors" href="/courses/html-css/layout-flexbox"><span>←</span><span>레이아웃과 Flexbox</span></a><a class="flex items-center gap-2 text-sm font-medium text-green-600 hover:text-green-700 transition-colors" href="/courses/html-css/css-grid"><span>다음: <!-- -->CSS Grid 레이아웃</span><span>→</span></a></div></div><!--$--><!--/$--><div class="flex justify-center mt-8"><div class="w-full max-w-full overflow-hidden py-2 "><div class="ad-container overflow-hidden max-w-full " style="contain:layout inline-size"><ins class="adsbygoogle" style="display:block;max-width:100%;width:100%" data-ad-client="ca-pub-4828862970866548" data-ad-slot="9727264203" data-ad-format="auto" data-full-width-responsive="true"></ins></div></div></div></div></main></div><script src="/_next/static/chunks/3c272650d82471ba.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[56558,[\"/_next/static/chunks/b3e99afba4e435e4.js\"],\"default\"]\n3:I[72776,[\"/_next/static/chunks/b3e99afba4e435e4.js\"],\"default\"]\n4:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"default\"]\n5:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"default\"]\n6:I[71472,[\"/_next/static/chunks/b3e99afba4e435e4.js\"],\"AdBannerBottom\"]\n8:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"OutletBoundary\"]\n9:\"$Sreact.suspense\"\nb:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"ViewportBoundary\"]\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"MetadataBoundary\"]\nf:I[68027,[],\"default\"]\n10:I[22016,[\"/_next/static/chunks/b3e99afba4e435e4.js\"],\"\"]\n1c:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/d2be314c3ece3fbe.js\"],\"IconMark\"]\n:HL[\"/_next/static/chunks/b7b1bf40cda4d556.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"TOjvSegD27OdCmndAiT-o\",\"c\":[\"\",\"courses\",\"html-css\",\"semantic-forms\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"courses\",{\"children\":[[\"slug\",\"html-css\",\"d\"],{\"children\":[[\"lesson\",\"semantic-forms\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/b7b1bf40cda4d556.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/b3e99afba4e435e4.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"ko\",\"children\":[[\"$\",\"head\",null,{\"children\":[null,[\"$\",\"$L2\",null,{}],[\"$undefined\",\"$undefined\"]]}],[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex min-h-screen\",\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1 min-w-0 w-0 p-6 lg:p-8 pt-20 lg:pt-8 bg-gray-50 overflow-x-hidden\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-full\",\"children\":[[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],[\"$\",\"div\",null,{\"className\":\"flex justify-center mt-8\",\"children\":[\"$\",\"$L6\",null,{\"slot\":\"9727264203\"}]}]]}]}]]}]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L7\",null,[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@a\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Le\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"div\",null,{\"className\":\"max-w-3xl mx-auto\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"text-sm text-gray-400 mb-6\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/\",\"className\":\"hover:text-gray-600 transition-colors\",\"children\":\"학습 과정\"}],[\"$\",\"span\",null,{\"className\":\"mx-2\",\"children\":\"/\"}],[\"$\",\"$L10\",null,{\"href\":\"/courses/html-css\",\"className\":\"hover:text-gray-600 transition-colors\",\"children\":\"HTML \u0026 CSS 기초\"}],[\"$\",\"span\",null,{\"className\":\"mx-2\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"className\":\"text-gray-600\",\"children\":\"시맨틱 HTML과 폼\"}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-2 text-sm text-gray-400\",\"children\":[[\"$\",\"span\",null,{\"className\":\"w-2 h-2 rounded-full bg-orange-500\"}],[\"$\",\"span\",null,{\"children\":[\"레슨 \",4,\" / \",9]}],[\"$\",\"span\",null,{\"children\":\"·\"}],[\"$\",\"span\",null,{\"children\":\"20분\"}]]}],[\"$\",\"h1\",null,{\"className\":\"text-2xl font-bold text-gray-900\",\"children\":\"시맨틱 HTML과 폼\"}]]}],[\"$\",\"div\",null,{\"className\":\"mb-12\",\"children\":[\"$\",\"div\",null,{\"className\":\"space-y-5\",\"children\":[[\"$\",\"h2\",\"0\",{\"className\":\"text-lg font-semibold text-gray-900 mt-8 mb-3 first:mt-0\",\"children\":\"시맨틱 HTML이란?\"}],[\"$\",\"p\",\"1\",{\"className\":\"text-gray-600 leading-relaxed\",\"dangerouslySetInnerHTML\":{\"__html\":\"시맨틱(Semantic) HTML은 태그 이름만으로 콘텐츠의 의미를 전달하는 작성 방식입니다. \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cdiv\u003e\u003c/code\u003e와 \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cspan\u003e\u003c/code\u003e 대신 \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cheader\u003e\u003c/code\u003e, \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cnav\u003e\u003c/code\u003e, \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cmain\u003e\u003c/code\u003e, \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003carticle\u003e\u003c/code\u003e, \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003csection\u003e\u003c/code\u003e, \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cfooter\u003e\u003c/code\u003e 등을 사용하면 검색 엔진과 스크린 리더가 페이지 구조를 더 잘 이해할 수 있습니다.\"}}],[\"$\",\"div\",\"2\",{\"className\":\"rounded-xl overflow-hidden border border-gray-200\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-500 font-mono\",\"children\":\"html\"}]}],[\"$\",\"pre\",null,{\"className\":\"p-4 overflow-x-auto bg-gray-900 text-gray-100 text-sm leading-relaxed\",\"children\":[\"$\",\"code\",null,{\"children\":\"\u003cheader\u003e\\n  \u003cnav\u003e\\n    \u003ca href=\\\"/\\\"\u003e홈\u003c/a\u003e\\n    \u003ca href=\\\"/about\\\"\u003e소개\u003c/a\u003e\\n    \u003ca href=\\\"/contact\\\"\u003e연락처\u003c/a\u003e\\n  \u003c/nav\u003e\\n\u003c/header\u003e\\n\\n\u003cmain\u003e\\n  \u003carticle\u003e\\n    \u003ch1\u003e시맨틱 HTML의 중요성\u003c/h1\u003e\\n    \u003cp\u003e시맨틱 태그는 접근성과 SEO를 동시에 개선합니다.\u003c/p\u003e\\n\\n    \u003csection\u003e\\n      \u003ch2\u003e접근성 향상\u003c/h2\u003e\\n      \u003cp\u003e스크린 리더가 페이지 구조를 파악하여 사용자에게 안내합니다.\u003c/p\u003e\\n    \u003c/section\u003e\\n\\n    \u003csection\u003e\\n      \u003ch2\u003eSEO 최적화\u003c/h2\u003e\\n      \u003cp\u003e검색 엔진이 콘텐츠의 중요도와 관계를 이해합니다.\u003c/p\u003e\\n    \u003c/section\u003e\\n  \u003c/article\u003e\\n\\n  \u003caside\u003e\\n    \u003ch3\u003e관련 글\u003c/h3\u003e\\n    \u003cul\u003e\\n      \u003cli\u003e\u003ca href=\\\"#\\\"\u003eHTML5 새로운 태그\u003c/a\u003e\u003c/li\u003e\\n      \u003cli\u003e\u003ca href=\\\"#\\\"\u003e웹 접근성 가이드\u003c/a\u003e\u003c/li\u003e\\n    \u003c/ul\u003e\\n  \u003c/aside\u003e\\n\u003c/main\u003e\\n\\n\u003cfooter\u003e\\n  \u003cp\u003e\u0026copy; 2024 My Website\u003c/p\u003e\\n\u003c/footer\u003e\"}]}]]}],[\"$\",\"ul\",\"3\",{\"className\":\"space-y-1.5 pl-1\",\"children\":[[\"$\",\"li\",\"0\",{\"className\":\"flex items-start gap-2 text-gray-600 text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cspan class=\\\"text-gray-400 mt-1 shrink-0\\\"\u003e•\u003c/span\u003e\u003cspan\u003e\u003ccode class=\\\"px-1 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-800\\\"\u003e\u003cheader\u003e\u003c/code\u003e - 페이지나 섹션의 머리글 영역\u003c/span\u003e\"}}],[\"$\",\"li\",\"1\",{\"className\":\"flex items-start gap-2 text-gray-600 text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cspan class=\\\"text-gray-400 mt-1 shrink-0\\\"\u003e•\u003c/span\u003e\u003cspan\u003e\u003ccode class=\\\"px-1 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-800\\\"\u003e\u003cnav\u003e\u003c/code\u003e - 내비게이션 링크 모음\u003c/span\u003e\"}}],\"$L11\",\"$L12\",\"$L13\",\"$L14\",\"$L15\"]}],\"$L16\",\"$L17\",\"$L18\",\"$L19\"]}]}],\"$L1a\"]}]\n"])</script><script>self.__next_f.push([1,"11:[\"$\",\"li\",\"2\",{\"className\":\"flex items-start gap-2 text-gray-600 text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cspan class=\\\"text-gray-400 mt-1 shrink-0\\\"\u003e•\u003c/span\u003e\u003cspan\u003e\u003ccode class=\\\"px-1 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-800\\\"\u003e\u003cmain\u003e\u003c/code\u003e - 페이지의 주요 콘텐츠 (문서당 하나)\u003c/span\u003e\"}}]\n12:[\"$\",\"li\",\"3\",{\"className\":\"flex items-start gap-2 text-gray-600 text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cspan class=\\\"text-gray-400 mt-1 shrink-0\\\"\u003e•\u003c/span\u003e\u003cspan\u003e\u003ccode class=\\\"px-1 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-800\\\"\u003e\u003carticle\u003e\u003c/code\u003e - 독립적인 콘텐츠 단위 (블로그 글, 뉴스 기사)\u003c/span\u003e\"}}]\n13:[\"$\",\"li\",\"4\",{\"className\":\"flex items-start gap-2 text-gray-600 text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cspan class=\\\"text-gray-400 mt-1 shrink-0\\\"\u003e•\u003c/span\u003e\u003cspan\u003e\u003ccode class=\\\"px-1 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-800\\\"\u003e\u003csection\u003e\u003c/code\u003e - 주제별로 묶인 콘텐츠 그룹\u003c/span\u003e\"}}]\n14:[\"$\",\"li\",\"5\",{\"className\":\"flex items-start gap-2 text-gray-600 text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cspan class=\\\"text-gray-400 mt-1 shrink-0\\\"\u003e•\u003c/span\u003e\u003cspan\u003e\u003ccode class=\\\"px-1 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-800\\\"\u003e\u003caside\u003e\u003c/code\u003e - 주요 콘텐츠와 간접적으로 관련된 부가 정보\u003c/span\u003e\"}}]\n15:[\"$\",\"li\",\"6\",{\"className\":\"flex items-start gap-2 text-gray-600 text-sm\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003cspan class=\\\"text-gray-400 mt-1 shrink-0\\\"\u003e•\u003c/span\u003e\u003cspan\u003e\u003ccode class=\\\"px-1 py-0.5 bg-gray-100 rounded text-xs font-mono text-gray-800\\\"\u003e\u003cfooter\u003e\u003c/code\u003e - 페이지나 섹션의 바닥글 영역\u003c/span\u003e\"}}]\n16:[\"$\",\"h2\",\"4\",{\"className\":\"text-lg font-semibold text-gray-900 mt-8 mb-3 first:mt-0\",\"children\":\"HTML 폼 만들기\"}]\n17:[\"$\",\"p\",\"5\",{\"className\":\"text-gray-600 leading-relaxed\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cform\u003e\u003c/code\u003e 태그는 사용자 입력을 수집하는 데 사용됩니다. 다양한 \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cinput\u003e\u003c/code\u003e 타입과 \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003clabel\u003e\u003c/code\u003e, \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003cselect\u003e\u003c/code\u003e, \u003ccode class=\\\"px-1.5 py-0.5 bg-gray-100 rounded text-sm font-mono text-gray-800\\\"\u003e\u003ctextarea\u003e\u003c/code\u003e 등을 조합하여 로그인, 회원가입, 검색 등의 폼을 만들 수 있습니다.\"}}]\n1b:T664,"])</script><script>self.__next_f.push([1,"\u003cform action=\"/submit\" method=\"POST\"\u003e\n  \u003c!-- 텍스트 입력 --\u003e\n  \u003clabel for=\"username\"\u003e이름\u003c/label\u003e\n  \u003cinput type=\"text\" id=\"username\" name=\"username\"\n         placeholder=\"이름을 입력하세요\" required /\u003e\n\n  \u003c!-- 이메일 입력 (형식 자동 검증) --\u003e\n  \u003clabel for=\"email\"\u003e이메일\u003c/label\u003e\n  \u003cinput type=\"email\" id=\"email\" name=\"email\"\n         placeholder=\"example@mail.com\" required /\u003e\n\n  \u003c!-- 비밀번호 --\u003e\n  \u003clabel for=\"password\"\u003e비밀번호\u003c/label\u003e\n  \u003cinput type=\"password\" id=\"password\" name=\"password\"\n         minlength=\"8\" required /\u003e\n\n  \u003c!-- 셀렉트 박스 --\u003e\n  \u003clabel for=\"role\"\u003e역할\u003c/label\u003e\n  \u003cselect id=\"role\" name=\"role\"\u003e\n    \u003coption value=\"\"\u003e선택하세요\u003c/option\u003e\n    \u003coption value=\"student\"\u003e학생\u003c/option\u003e\n    \u003coption value=\"developer\"\u003e개발자\u003c/option\u003e\n    \u003coption value=\"designer\"\u003e디자이너\u003c/option\u003e\n  \u003c/select\u003e\n\n  \u003c!-- 라디오 버튼 --\u003e\n  \u003cfieldset\u003e\n    \u003clegend\u003e경험 수준\u003c/legend\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"radio\" name=\"level\" value=\"beginner\" /\u003e 입문\n    \u003c/label\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"radio\" name=\"level\" value=\"intermediate\" /\u003e 중급\n    \u003c/label\u003e\n    \u003clabel\u003e\n      \u003cinput type=\"radio\" name=\"level\" value=\"advanced\" /\u003e 고급\n    \u003c/label\u003e\n  \u003c/fieldset\u003e\n\n  \u003c!-- 체크박스 --\u003e\n  \u003clabel\u003e\n    \u003cinput type=\"checkbox\" name=\"agree\" required /\u003e\n    이용약관에 동의합니다\n  \u003c/label\u003e\n\n  \u003c!-- 텍스트 영역 --\u003e\n  \u003clabel for=\"bio\"\u003e자기소개\u003c/label\u003e\n  \u003ctextarea id=\"bio\" name=\"bio\" rows=\"4\"\n            placeholder=\"간단한 자기소개를 작성하세요\"\u003e\u003c/textarea\u003e\n\n  \u003c!-- 제출 버튼 --\u003e\n  \u003cbutton type=\"submit\"\u003e가입하기\u003c/button\u003e\n\u003c/form\u003e"])</script><script>self.__next_f.push([1,"18:[\"$\",\"div\",\"6\",{\"className\":\"rounded-xl overflow-hidden border border-gray-200\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-200\",\"children\":[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-500 font-mono\",\"children\":\"html\"}]}],[\"$\",\"pre\",null,{\"className\":\"p-4 overflow-x-auto bg-gray-900 text-gray-100 text-sm leading-relaxed\",\"children\":[\"$\",\"code\",null,{\"children\":\"$1b\"}]}]]}]\n19:[\"$\",\"div\",\"7\",{\"className\":\"flex gap-3 p-4 bg-blue-50 border border-blue-200 rounded-xl\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-blue-500 shrink-0 mt-0.5\",\"children\":\"💡\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-blue-700\",\"dangerouslySetInnerHTML\":{\"__html\":\"\u003ccode class=\\\"px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800\\\"\u003e\u003clabel\u003e\u003c/code\u003e의 \u003ccode class=\\\"px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800\\\"\u003efor\u003c/code\u003e 속성과 \u003ccode class=\\\"px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800\\\"\u003e\u003cinput\u003e\u003c/code\u003e의 \u003ccode class=\\\"px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800\\\"\u003eid\u003c/code\u003e를 일치시키면 라벨 클릭 시 해당 입력 필드에 포커스됩니다. \u003ccode class=\\\"px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800\\\"\u003erequired\u003c/code\u003e, \u003ccode class=\\\"px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800\\\"\u003eminlength\u003c/code\u003e, \u003ccode class=\\\"px-1 py-0.5 bg-blue-100 rounded text-xs font-mono text-blue-800\\\"\u003epattern\u003c/code\u003e 등의 속성으로 브라우저 내장 유효성 검사를 활용하세요. JavaScript 없이도 기본적인 폼 검증이 가능합니다.\"}}]]}]\n1a:[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between py-6 border-t border-gray-200\",\"children\":[[\"$\",\"$L10\",null,{\"href\":\"/courses/html-css/layout-flexbox\",\"className\":\"flex items-center gap-2 text-sm text-gray-500 hover:text-green-600 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"children\":\"←\"}],[\"$\",\"span\",null,{\"children\":\"레이아웃과 Flexbox\"}]]}],[\"$\",\"$L10\",null,{\"href\":\"/courses/html-css/css-grid\",\"className\":\"flex items-center gap-2 text-sm font-medium text-green-600 hover:text-green-700 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"다음: \",\"CSS Grid 레이아웃\"]}],[\"$\",\"span\",null,{\"children\":\"→\"}]]}]]}]\nc:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\na:null\ne:[[\"$\",\"title\",\"0\",{\"children\":\"Learning - 기술 학습 플랫폼\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"프로그래밍, 웹개발 기술을 단계별 튜토리얼로 학습하세요. JavaScript, Python, React, SQL 등\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"JackerLab\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"학습,프로그래밍,웹개발,튜토리얼,코딩,교육,JavaScript,Python,React\"}],[\"$\",\"meta\",\"4\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"Learning - 학습 플랫폼\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"프로그래밍과 웹개발 학습 자료\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:site_name\",\"content\":\"JackerLab Learning\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:locale\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Learning - 학습 플랫폼\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"프로그래밍과 웹개발 학습 자료\"}],[\"$\",\"link\",\"13\",{\"rel\":\"icon\",\"href\":\"/icon.png?icon.d3a2eb94.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"14\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.d3a2eb94.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"$L1c\",\"15\",{}]]\n"])</script></body></html>