---
theme: default
layout: center
class: text-center
---

# 🌐 HTML/CSS/JS 웹 코딩 실습
실시간 에디터와 함께 배우는 나만의 웹사이트 만들기

---
layout: default
---

## 📋 전체 커리큘럼 안내

<div class="mt-4 border border-slate-300 rounded-2xl overflow-hidden shadow-md bg-white">
  <table class="w-full text-center border-collapse text-[14px]">
    <thead class="bg-blue-600 text-white font-bold">
      <tr>
        <th class="py-2.5 px-3 border-r border-blue-500 w-[20%]">주차</th>
        <th class="py-2.5 px-3 w-[80%]">학습 주제 (오늘 배울 태그들)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-blue-700 bg-blue-50/50">1주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          <span class="inline-block bg-slate-100 px-2 py-0.5 rounded text-xs mr-2 border border-slate-200">기본 태그</span>
          Heading(h1~h6), 문단(p), 링크(a), 이미지(img)
        </td>
      </tr>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-blue-700 bg-blue-50/50">2주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          <span class="inline-block bg-slate-100 px-2 py-0.5 rounded text-xs mr-2 border border-slate-200">구조 태그</span>
          리스트(ul, ol, li), 테이블(table), 아이프레임(iframe), div
        </td>
      </tr>
      <tr class="border-b border-slate-200 hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-blue-700 bg-blue-50/50">3주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          <span class="inline-block bg-slate-100 px-2 py-0.5 rounded text-xs mr-2 border border-slate-200">스타일(CSS)</span>
          인라인 스타일, class와 id, FontAwesome 이모지
        </td>
      </tr>
      <tr class="hover:bg-slate-50 transition-colors">
        <td class="py-2.5 px-3 border-r border-slate-200 font-black text-blue-700 bg-blue-50/50">4주차</td>
        <td class="py-2.5 px-3 text-left font-bold text-slate-700">
          <span class="inline-block bg-slate-100 px-2 py-0.5 rounded text-xs mr-2 border border-slate-200">심화(JS/미디어)</span>
          비디오/오디오, JS 기초 연동, SVG 그리기 및 이벤트
        </td>
      </tr>
    </tbody>
  </table>
</div>

---
layout: two-cols
---

## 🏷️ Heading 태그 (h1 ~ h6)
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-basics" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">강의보기</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;h1&gt;</code> ~ <code>&lt;h6&gt;</code>는 제목을 나타냅니다.</li>
    <li>숫자가 커질수록 중요도는 낮아지고 글자 크기도 작아집니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h1>가장 중요한 제목</h1>\n<h2>두 번째 제목</h2>\n<h3>세 번째 제목</h3>\n<h4>네 번째 제목</h4>\n<h5>다섯 번째 제목</h5>\n<h6>여섯 번째 제목</h6>`,
  css: `h1 { color: red; }`,
  js: `console.log('heading js');`
}
</script>

---
layout: two-cols
---

## 📝 HTML p 태그
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-basics" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">강의보기</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;p&gt;</code> 태그는 문단(paragraph)을 나타냅니다.</li>
    <li>기본적으로 위아래 여백이 있으며, 텍스트를 구분할 때 사용됩니다.</li>
    <li>여러 개의 <code>&lt;p&gt;</code> 태그를 사용하면 문단을 나눌 수 있습니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<p>이것은 첫 번째 문단입니다.</p>\n<p>이것은 두 번째 문단입니다.</p>`,
  css: `p {\n  color: #333;\n  font-size: 16px;\n  line-height: 1.6;\n}`,
  js: `// JavaScript는 필요하지 않습니다.`
}
</script>

---
layout: two-cols
---

## ✍️ 실습: 삼행시를 지어보세요!
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pc/challenge-write-a-poem" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 미션</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>HTML의 <code>h</code>, <code>p</code>, <code>br</code> 태그만 사용합니다.</li>
    <li>삼행시의 각 줄은 <code>&lt;p&gt;</code> 태그로 나눠 작성합니다.</li>
    <li><code>&lt;br&gt;</code> 태그로 줄바꿈을 추가로 넣을 수 있습니다.</li>
    <li>삼행시 형식에 따라 각 줄 앞 글자를 강조(<code>&lt;strong&gt;</code>)해봅니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3>엔트리</h3>\n<p><strong>엔</strong> : 엔지니어가 되고 싶다면</p>\n<p><strong>트</strong> : 트레이닝을 시작하자</p>\n<p><strong>리</strong> : 리드하는 코더가 될 거야</p>`,
  css: `p {\n  font-size: 1.1em;\n  margin-bottom: 0.6em;\n}\nstrong {\n  color: #2a7ae2;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 🔗 &lt;a&gt; 태그
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pt/html-links" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">강의보기</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>하이퍼링크를 생성합니다.</li>
    <li><code>href</code>는 목적지 주소, <code>target</code>은 새창 여부 등을 설정합니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<a href="https://naver.com" target="_blank">Visit Example</a>`,
  css: ``,
  js: ``
}
</script>

---
layout: two-cols
---

## 🖼️ &lt;img&gt; 태그
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-images" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">강의보기</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>이미지를 문서에 삽입합니다.</li>
    <li><code>src</code>는 이미지 경로, <code>alt</code>는 대체 텍스트를 지정합니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<img src="https://swhcoding.com/app/assets/img/logo.png" alt="예시 이미지">`,
  css: ``,
  js: ``
}
</script>

---
layout: two-cols
---

## 🎯 실습: 이미지로 유튜브 열기
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pc/challenge-a-picture-perfect-trip" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 미션</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;a&gt;</code> 태그를 사용하여 링크를 만듭니다.</li>
    <li><code>&lt;img&gt;</code> 태그를 <code>&lt;a&gt;</code> 태그 안에 사용해 이미지를 보여줍니다.</li>
    <li>이미지 클릭 시 링크가 새 창에서 열리도록 <code>target="_blank"</code>를 사용합니다.</li>
    <li>자바스크립트 없이도 하이퍼링크 기능을 구현할 수 있습니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3>🎯 좋아하는 유튜브 영상 공유하기</h3>\n<p>아래 이미지를 클릭하면 유튜브 링크가 새 창에서 열립니다.</p>\n<a href="https://youtube.com" target="_blank">\n  <img src="https://via.placeholder.com/150" alt="유튜브 썸네일">\n</a>`,
  css: `img {\n  border: 2px solid #ccc;\n  border-radius: 8px;\n  transition: transform 0.2s;\n}\nimg:hover {\n  transform: scale(1.05);\n  border-color: #f00;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 📋 HTML 리스트 문법
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pt/html-lists" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">강의보기</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;ul&gt;</code>은 순서 없는 리스트를 생성합니다.</li>
    <li><code>&lt;ol&gt;</code>은 순서 있는 리스트를 생성합니다.</li>
    <li><code>&lt;li&gt;</code>는 리스트 항목을 나타냅니다.</li>
    <li>리스트는 중첩하여 만들 수도 있습니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3>비순차 리스트 (ul)</h3>\n<ul>\n  <li>사과</li>\n  <li>바나나</li>\n  <li>포도</li>\n</ul>\n\n<h3>순차 리스트 (ol)</h3>\n<ol>\n  <li>준비</li>\n  <li>시작</li>\n  <li>완료</li>\n</ol>\n\n<h3>중첩 리스트</h3>\n<ul>\n  <li>Frontend\n    <ul>\n      <li>HTML</li>\n      <li>CSS</li>\n      <li>JavaScript</li>\n    </ul>\n  </li>\n  <li>Backend</li>\n</ul>`,
  css: `ul, ol {\n  margin: 10px 0;\n  padding-left: 20px;\n}\nul ul {\n  list-style-type: circle;\n}\nol {\n  list-style-type: decimal;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 📅 실습: 일과표 + 음식 리스트
<div class="flex gap-2">
  <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-html/pc/challenge-your-learning-list" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 미션 1</a>
  <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pc/challenge-links-you-love" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 미션 2</a>
</div>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>오늘 하루 일과를 <code>&lt;ol&gt;</code> 태그로 앞에 숫자를 붙여 정리해보세요.</li>
    <li>한 줄 띄우고, <code>&lt;ul&gt;</code> 태그를 사용하여 먹고 싶은 음식 리스트를 작성합니다.</li>
    <li>각 음식 이름은 <code>&lt;li&gt;</code> 태그안에 <code>&lt;a&gt;</code> 태그로 감싸서, 클릭 시 열리도록 합니다.</li>
    <li>자바스크립트는 사용하지 않습니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3>📅 오늘의 일과표</h3>\n<ol>\n  <li>기상하기</li>\n  <li>학교가기</li>\n</ol>\n<br>\n<h3>🍽️ 먹고 싶은 음식 리스트</h3>\n<ul>\n  <li><a href="https://google.com" target="_blank">치킨</a></li>\n</ul>`,
  css: `ol, ul {\n  padding-left: 20px;\n}\na {\n  color: #3366cc;\n  text-decoration: none;\n}\na:hover {\n  text-decoration: underline;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 📊 HTML 테이블 (표)
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pt/html-tables" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">강의보기</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;table&gt;</code> 태그는 표(table)를 만듭니다.</li>
    <li><code>&lt;tr&gt;</code> (table row)는 행(row)을 나타냅니다.</li>
    <li><code>&lt;th&gt;</code> (table header)는 제목 셀을 나타내며 기본적으로 굵고 가운데 정렬됩니다.</li>
    <li><code>&lt;td&gt;</code> (table data)는 일반 셀을 나타냅니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3>HTML 테이블 예시</h3>\n<table border="1" cellpadding="8">\n  <tr>\n    <th>이름</th>\n    <th>나이</th>\n    <th>직업</th>\n  </tr>\n  <tr>\n    <td>홍길동</td>\n    <td>30</td>\n    <td>개발자</td>\n  </tr>\n  <tr>\n    <td>김유신</td>\n    <td>28</td>\n    <td>디자이너</td>\n  </tr>\n</table>`,
  css: `table {\n  border-collapse: collapse;\n  width: 100%;\n}\nth {\n  background-color: #f2f2f2;\n}\nth, td {\n  border: 1px solid #ccc;\n  text-align: center;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 📐 HTML 테이블 고급 문법

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;thead&gt;</code>는 표의 헤더(제목) 영역을, <code>&lt;tbody&gt;</code>는 본문 데이터를 묶습니다.</li>
    <li><code>colspan</code>은 셀이 가로 방향으로 여러 칸을 병합합니다.</li>
    <li><code>rowspan</code>은 셀이 세로 방향으로 여러 행을 병합합니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3>고급 HTML 테이블 예시</h3>\n<table>\n  <thead>\n    <tr>\n      <th rowspan="2">이름</th>\n      <th colspan="2">연락처</th>\n    </tr>\n    <tr>\n      <th>이메일</th>\n      <th>전화번호</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>홍길동</td>\n      <td>hong@example.com</td>\n      <td>010-1234-5678</td>\n    </tr>\n    <tr>\n      <td>김유신</td>\n      <td>kim@example.com</td>\n      <td>010-8765-4321</td>\n    </tr>\n  </tbody>\n</table>`,
  css: `table {\n  border-collapse: collapse;\n  width: 100%;\n  margin-top: 10px;\n}\nth, td {\n  border: 1px solid #666;\n  padding: 8px;\n  text-align: center;\n}\nthead {\n  background-color: #f0f0f0;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 👨‍👩‍👧 퀴즈: 우리 가족 표 만들기
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/html-tags-continued/pc/challenge-the-dinner-table" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 미션</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>아빠, 엄마, 나의 나이, 생일, 좋아하는 음식을 표로 표현해보세요.</li>
    <li>테이블 태그만 사용하세요 (JS 사용 금지)</li>
  </ul>
</div>
<img src="https://e000.bond/coding/html/table.png" class="mt-4 rounded-lg shadow-sm border border-slate-200 w-full max-h-[120px] object-contain">

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<table border="1" cellpadding="8" cellspacing="0">\n  <tr>\n    <th>가족</th>\n    <th>나이</th>\n    <th>음식</th>\n  </tr>\n</table>`,
  css: `table {\n  border-collapse: collapse;\n  width: 100%;\n}\nth {\n  background-color: #f0f0f0;\n  vertical-align: middle;\n  width: 100px;\n}\ntd {\n  padding: 6px 12px;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 📺 HTML iframe 문법

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;iframe&gt;</code>은 다른 웹 페이지나 문서를 현재 페이지에 삽입할 때 사용됩니다.</li>
    <li><code>src</code> 속성으로 삽입할 문서의 URL을 지정합니다.</li>
    <li><code>width</code>, <code>height</code> 속성으로 크기를 조정할 수 있습니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3>기본 iframe 예시</h3>\n<iframe src="https://www.example.com" width="100%" height="150" title="예제 사이트"></iframe>\n\n<h3>YouTube 동영상 포함</h3>\n<iframe width="100%" height="150"\n  src="https://www.youtube.com/embed/dQw4w9WgXcQ"\n  title="YouTube video player"\n  frameborder="0"\n  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"\n  allowfullscreen>\n</iframe>`,
  css: `iframe {\n  border: 2px solid #ccc;\n  border-radius: 6px;\n  margin-bottom: 20px;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 🌐 퀴즈: 구글, 유튜브 띄우기!

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>테이블의 첫 열에는 사이트 이름을 적습니다.</li>
    <li>두 번째 열에는 각 사이트를 iframe으로 띄웁니다.</li>
    <li>iframe 크기는 적당히 조절해서 보이게 하세요.</li>
    <li>자바스크립트 없이, 테이블과 iframe 태그만 사용하세요.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<table border="1" cellpadding="8" cellspacing="0" style="width: 100%; table-layout: fixed;">\n  <tr>\n    <th>사이트</th>\n    <th>사이트 보기</th>\n  </tr>\n  <tr>\n    <td>네이버</td>\n    <td><iframe src="https://www.naver.com" width="100%" height="150" style="border:none;"></iframe></td>\n  </tr>\n</table>`,
  css: `table {\n  border-collapse: collapse;\n}\nth, td {\n  text-align: center;\n  vertical-align: middle;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 📦 &lt;div&gt; 태그

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>가장 대표적인 블록 요소이며, 레이아웃 구성이나 그룹화에 사용됩니다.</li>
    <li>스타일이나 스크립트를 적용할 때 구역을 나누는 용도로 많이 사용됩니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<div class="box">\n  <p>내용이 들어가는 첫 번째 영역입니다.</p>\n</div>\n<div class="box">\n  <p>두 번째 영역입니다.</p>\n</div>`,
  css: `.box {\n  padding: 1em;\n  background: #eee;\n  margin-bottom: 10px;\n  border-radius: 8px;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 🎨 CSS: 글자 크기, 색상, 배경색
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-basics" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">강의보기</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>font-size</code>: 글자의 크기를 설정합니다. (예: <code>18px</code>)</li>
    <li><code>color</code>: 글자의 색상을 지정합니다. (예: <code>red</code>)</li>
    <li><code>background-color</code>: 요소의 배경색을 설정합니다.</li>
    <li><code>style</code> 속성을 이용하면 태그마다 직접 지정할 수 있습니다.</li>
    <li><code>&lt;span&gt;</code> 태그를 이용해 특정 부분에만 적용할 수 있어요.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<p style="font-size: 24px;">이 문장은 큰 글꼴 크기로 표시됩니다.</p>\n<p style="color: green;">이 문장은 <span style="font-size: 24px; color: red;">빨간색</span>으로 표시됩니다.</p>\n<p style="background-color: lightgray;">이 문장은 밝은 회색 배경을 가집니다.</p>`,
  css: ``,
  js: ``
}
</script>

---
layout: two-cols
---

## 🎯 실습: 특정 글자 스타일링
<a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pc/challenge-colorful-creature" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 미션</a>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>본문 전체는 초록색, 그중 '초록색' 글자만 글자 크기 24px로 키워봅시다.</li>
    <li>배경색은 하늘색(skyblue), 제목은 빨간색으로 유지해요.</li>
    <li><code>style</code> 속성으로 개별 스타일을 지정합니다.</li>
  </ul>
</div>
<img src="https://e000.bond/coding/html/style-quiz.png" class="mt-4 rounded-lg shadow-sm border border-slate-200 w-full max-h-[120px] object-contain">

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<!DOCTYPE html>\n<html>\n  <head><title>부분 스타일 연습</title></head>\n  <body style="background-color: skyblue;">\n    <h1 style="color: red;">제목입니다</h1>\n    <p style="color: green;">\n      이것은 <span style="font-size: 24px;">초록색</span>이고 글자 크기가 다릅니다.\n    </p>\n  </body>\n</html>`,
  css: ``,
  js: ``
}
</script>

---
layout: two-cols
---

## 🏷️ HTML class 와 id 속성
<div class="flex gap-2">
  <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-selecting-by-id" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">ID 강의</a>
  <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pt/css-selecting-by-class" target="_blank" class="bg-blue-100 hover:bg-blue-200 text-blue-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">Class 강의</a>
</div>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>class</code>는 <b>여러 요소</b>에 공통 스타일을 적용할 때 사용합니다.</li>
    <li><code>id</code>는 문서 내에서 <b>유일한</b> 요소를 식별할 때 사용합니다.</li>
    <li>CSS에서는 <code>.클래스명</code>으로 class를, <code>#아이디명</code>으로 id를 지정합니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<h3 class="section-title">class 예제</h3>\n<p class="highlight">이 문장은 class 스타일이 적용된 문장입니다.</p>\n\n<h3 id="main-title">id 예제</h3>\n<p id="main-text">이 문장은 고유한 id 스타일을 따릅니다.</p>`,
  css: `.section-title {\n  color: navy;\n  font-weight: bold;\n  margin-bottom: 10px;\n}\n\n.highlight {\n  background-color: #f9f9a9;\n  padding: 8px;\n  border-left: 5px solid gold;\n}\n\n#main-title {\n  color: darkred;\n  font-size: 1.5rem;\n}\n\n#main-text {\n  color: #444;\n  font-style: italic;\n  border-bottom: 1px dotted #999;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 😄 FontAwesome 이모지 사용법

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>FontAwesome은 웹에서 다양한 아이콘과 이모지를 쉽게 쓸 수 있는 라이브러리입니다.</li>
    <li>이 클래스를 <code>&lt;i&gt;</code> 태그 안에 넣으면 아이콘이 나타납니다.</li>
    <li>페이지 <code>&lt;head&gt;</code> 안에 FontAwesome CDN 링크를 꼭 추가해야 합니다.</li>
    <li>직접 이모지를 검색한 다음 복사해 HTML에 붙여넣을 수도 있습니다. (윈도우 키 + .)</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />\n\n<p>FontAwesome 아이콘 예시:</p>\n<p>기본 웃는 얼굴: <i class="fa-regular fa-face-smile"></i></p>\n<p>빨간 하트: <i class="fa-solid fa-heart" style="color:red;"></i></p>\n<p>큰 웃는 얼굴: <i class="fa-regular fa-face-smile fa-3x"></i></p>\n\n<hr>\n\n<p>직접 이모지 복사 붙여넣기 예시:</p>\n<p>😊 😍 🎉 👍 🚀</p>\n<p><small>윈도우: <kbd>윈도우 키 + . (점)</kbd></small></p>`,
  css: ``,
  js: ``
}
</script>

---
layout: two-cols
---

## 🐶 퀴즈: 좋아하는 동물 소개
<div class="flex gap-2">
  <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pc/challenge-seasonal-ids" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 1</a>
  <a href="https://ko.khanacademy.org/computing/computer-programming/html-css/intro-to-css/pc/challenge-apples-and-bananas-classes" target="_blank" class="bg-amber-100 hover:bg-amber-200 text-amber-700 px-2 py-1 rounded text-[12px] font-bold transition-colors">실습 2</a>
</div>

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>class</code>를 사용해 동물 이름을 분홍색으로 스타일링합니다.</li>
    <li>특별히 좋아하는 동물은 <code>id</code>를 사용해 파란색으로 스타일링합니다.</li>
    <li>자바스크립트 없이 HTML과 CSS만 사용하세요.</li>
  </ul>
</div>
<img src="https://e000.bond/coding/html/imozi.png" class="mt-4 rounded-lg shadow-sm border border-slate-200 w-full max-h-[120px] object-contain">

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<div>\n  <h2 class="animal-name" id="favorite-animal">🐱고양이</h2>\n  <p>고양이는 귀여운 반려동물로, 독립적인 성격을 가지고 있습니다.</p>\n</div>\n<div>\n  <h2 class="animal-name">🐶강아지</h2>\n  <p>충성심이 강합니다.</p>\n</div>`,
  css: `.animal-name {\n  color: pink;\n}\n\n#favorite-animal {\n  color: blue;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## 🎥 HTML5 Video와 Audio 태그

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>비디오를 삽입하려면 <code>&lt;video&gt;</code> 태그를 사용합니다.</li>
    <li><code>controls</code> 속성으로 재생 컨트롤을 표시할 수 있습니다.</li>
    <li>오디오를 삽입하려면 <code>&lt;audio&gt;</code> 태그를 사용합니다.</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<video controls width="100%" poster="https://via.placeholder.com/320x240?text=Video+Placeholder">\n  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">\n  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">\n  브라우저가 video 태그를 지원하지 않습니다.\n</video>\n\n<audio controls>\n  <source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">\n  브라우저가 audio 태그를 지원하지 않습니다.\n</audio>`,
  css: `video, audio {\n  display: block;\n  margin-bottom: 1em;\n  max-width: 100%;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## ⚡ HTML에서 JavaScript 적용

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li><code>&lt;script&gt;</code> 태그를 이용해 자바스크립트를 작성합니다.</li>
    <li>HTML 요소를 JS에서 선택한 뒤 <code>addEventListener</code>로 이벤트를 연결합니다.</li>
    <li>버튼을 클릭하면 무슨 일이 일어날까요?</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<button id="changeBtn">클릭해 보세요</button>\n<p id="message">안녕하세요!</p>`,
  css: `button {\n  padding: 8px 16px;\n  font-size: 16px;\n  cursor: pointer;\n}\n#message {\n  margin-top: 10px;\n  color: green;\n  font-weight: bold;\n}`,
  js: `// 버튼과 메시지 요소 선택\nconst btn = document.getElementById('changeBtn');\nconst msg = document.getElementById('message');\n\n// 클릭 이벤트 연결\nbtn.addEventListener('click', () => {\n  msg.textContent = 'JavaScript가 작동했어요!';\n  msg.style.color = 'red';\n});`
}
</script>

---
layout: two-cols
---

## 🎨 HTML5 SVG 기초

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>SVG는 벡터 그래픽을 표현하는 기반 이미지 형식입니다.</li>
    <li><code>&lt;svg&gt;</code> 태그 안에 도형, 경로 등을 정의합니다.</li>
    <li>벡터라 크기를 조절해도 해상도가 전혀 깨지지 않습니다.</li>
    <li>주요 도형: <code>&lt;circle&gt;</code>, <code>&lt;rect&gt;</code>, <code>&lt;line&gt;</code></li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<svg width="200" height="150" style="border:1px solid #ccc; background:white;">\n  <circle cx="50" cy="75" r="40" stroke="blue" stroke-width="3" fill="lightblue" />\n  <rect x="110" y="30" width="70" height="90" stroke="green" stroke-width="3" fill="lightgreen" />\n  <line x1="0" y1="0" x2="200" y2="150" stroke="red" stroke-width="2" />\n</svg>`,
  css: `svg {\n  display: block;\n  margin: 1em auto;\n}`,
  js: ``
}
</script>

---
layout: two-cols
---

## ✨ HTML5 SVG 고급 (이벤트)

<div class="mt-4 text-[14px] leading-relaxed text-slate-700">
  <ul class="list-disc pl-5">
    <li>자바스크립트를 이용해 SVG 도형을 클릭할 때마다 반응하게 만듭니다.</li>
    <li>오른쪽 화면에서 까만 도형을 클릭해 보세요. 색상이 검정에서 하얀색으로 변경됩니다!</li>
  </ul>
</div>

::right::

<CodeEditor :html="code.html" :css="code.css" :js="code.js" />

<script setup>
const code = {
  html: `<svg id="mySvg" width="250" height="150" style="border:1px solid #ccc; cursor:pointer; background:white;">\n  <circle cx="50" cy="75" r="40" stroke="black" stroke-width="3" fill="black" />\n  <rect x="110" y="30" width="70" height="90" stroke="black" stroke-width="3" fill="black" />\n  <line x1="0" y1="0" x2="200" y2="150" stroke="black" stroke-width="2" />\n</svg>\n<div id="result" style="margin-top:1em; font-weight:bold;"></div>`,
  css: `svg {\n  display: block;\n  margin: 1em auto;\n}`,
  js: `const svg = document.getElementById('mySvg');\n\nsvg.addEventListener('click', (event) => {\n  const target = event.target;\n  if (target.tagName === 'circle' || target.tagName === 'rect') {\n    const currentFill = target.getAttribute('fill');\n    if (currentFill === 'black') {\n      target.setAttribute('fill', 'white');\n      document.getElementById('result').textContent = target.tagName + ' 색상이 하얀색으로 변경되었습니다.';\n    } else {\n      target.setAttribute('fill', 'black');\n      document.getElementById('result').textContent = target.tagName + ' 색상이 검정색으로 변경되었습니다.';\n    }\n  }\n});`
}
</script>

---
layout: center
class: text-center
---

<h1 class="text-7xl mb-6">👏🏽</h1>

<h2 class="font-black text-5xl leading-tight mb-8 text-slate-800">
  수고하셨어요 ^o^
</h2>
<p class="text-slate-500 text-xl font-bold">이제 나만의 웹사이트를 자유롭게 코딩할 수 있게 되었습니다!</p>