lesson1Title

lesson2Title

webIntroOtChapter1Title

lesson3Title

lesson4Title

webIntroOtChapter2Title

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
      <header>
          <h1>빈칸을 입력하세요 🙂</h1>
          <p>머리말</p>
      </header>
      <nav>
          <ul>
              <li>홈</li>
              <li>소개</li>
              <li>연락처</li>
          </ul>
      </nav>
      <section>
          <h2>환영합니다!</h2>
          <p>웹사이트 기본 구조를 확인해 보세요.</p>
      </section>
      <footer>
          <p>&copy; 꼬리말</p>
          <a href="https://example.com/">외부 페이지로 이동</a>
      </footer>
  </body>
</html>

# 학습 도구 튜토리얼

화면 왼쪽 하단에서 `가이드라인`, `AI 튜터`, `디자인`, `업로드`, `수업 노트`, `즐겨찾기`, `도움말`, `나가기`로 구성된 학습 도구 메뉴를 확인하실 수 있습니다.

먼저 아래의 **도움말** 아이콘(ℹ️)을 클릭하고, 주요 기능에 대한 설명을 확인해 보세요 🙂

<br />

## 가이드라인

가이드라인은 코딩 학습 및 나만의 웹사이트를 만들기 위한 단계별 가이드라인을 제공합니다.

<br />

## AI 튜터

24시간 함께 하는 AI 튜터에게 궁금한 내용을 언제든지 질문할 수 있습니다. AI 튜터 메뉴의 **FAQ** 버튼을 누르면, 수업별 자주 묻는 질문을 확인할 수 있습니다.

<br />

## 디자인

디자인 메뉴는 웹사이트를 다채롭게 꾸미기 위한 아이콘들을 제공합니다. 원하는 아이콘을 클릭하면 아이콘을 사용하기 위한 코드가 클립보드에 자동으로 저장됩니다.

<br />

## 업로드

이미지, 영상, 오디오 등 코딩 교육 및 웹사이트 만들기에 필요한 파일을 업로드할 수 있습니다. 업로드한 파일은 URL을 복사해 언제든지 사용할 수 있습니다.

<br />

## 수업 노트

학습 중 언제든지 필기 노트를 작성할 수 있습니다. 노트는 수업별로 저장됩니다.

<br />

## 즐겨찾기

자주 학습하는 수업을 즐겨찾기로 저장하고, 언제든지 해당 수업으로 이동할 수 있습니다.

<br />

## 도움말

코드프렌즈 학습 도구의 주요 기능을 언제든지 다시 확인할 수 있습니다.

<br />

## 나가기

학습 도구를 종료하고, 강의 홈 화면으로 돌아갑니다.

<br />

_한 가지 더!_

코드프렌즈는 작성한 코드를 바탕으로 웹사이트를 배포하고, URL을 만들어 친구에게 공유할 수 있는 **배포** 기능을 제공합니다.

배포 기능은 [웹 코딩 데모](https://www.codefriends.net/demo/web) 또는 [프로젝트](https://www.codefriends.net/projects)에서 체험하거나, 실습 강의(자기소개 홈페이지 만들기, 포트폴리오 만들기, 홍보 웹사이트 만들기, 갤러리 만들기)의 Chapter 3에서 사용할 수 있습니다.

코드프렌즈는 배포한 코드 이력을 버전별로 관리합니다. 이전에 배포한 코드를 불러와 이어서 작업하거나, 버전별 HTML, CSS, JS 코드를 원본 그대로 다운로드 할 수 있습니다.

<br />

## 실습

_코드의 별표로 강조된 부분을 따라 입력해 보세요._