이지웹 스쿨 EasyWeb School
이지웹 스쿨 아이콘

처음 쓰는 학생을 위한 안내 Guide for beginner students

웹 프로젝트를 만들고 테스트하는 방법 How to create and test web projects

처음에는 index.html 하나로 시작하고, 코드가 길어지면 style.css와 script.js로 나누면 됩니다. You can start with just index.html at first, and separate it into style.css and script.js when your code gets longer.

처음부터 완성까지 From start to finish

프로젝트 작업 순서 Project Workflow

  1. 1
    새 프로젝트 또는 기존 프로젝트를 선택합니다. Select a new or existing project.

    처음 만드는 작업이면 새 프로젝트 시작, 전에 만든 작업을 계속하려면 기존 프로젝트 열기를 누릅니다. 기존 폴더를 선택하면 이지웹 스쿨이 폴더 이름과 안에 있는 파일 목록을 다시 보여 줍니다. Click Start New Project if it's your first time, or Open Existing Project to continue your previous work. If you select an existing folder, EasyWeb School will show the folder name and its files again.

  2. 2
    빈 시작 파일을 선택합니다. Select an empty starting file.

    처음에는 index.html 하나를 추천합니다. 역할별로 연습하려면 index.html, style.css, script.js를 고릅니다. 새 파일 안에는 예제 코드가 자동으로 들어가지 않습니다. We recommend starting with just index.html. To practice by roles, choose index.html, style.css, and script.js. Example codes are not automatically included in new files.

  3. 3
    현재 파일을 확인하고 코드를 저장합니다. Check the current file and save your code.

    파일 메뉴에서 수정할 파일을 고른 뒤 코드 수정 시작을 누릅니다. 코드를 붙여넣거나 고친 다음 저장을 누르고, 화면 위 저장 상태가 완료로 바뀌었는지 확인합니다. Select a file to edit from the file menu, then click Start Editing Code. Paste or modify the code, click Save, and check if the save status at the top says Complete.

  4. 4
    미리보기로 빠르게 확인합니다. Quickly check with preview.

    모바일·태블릿·웹창 크기를 고르거나 가장자리를 조절할 수 있습니다. 스마트폰·태블릿에서는 파일 고르기, 코드 쓰기, 결과 보기를 한 화면씩 사용합니다. You can select mobile, tablet, or web window sizes or adjust the edges. On smartphones and tablets, you switch between selecting files, writing code, and viewing results one screen at a time.

  5. 5
    필요하면 localhost로 실제 테스트합니다. Test properly with localhost if needed.

    데스크톱 앱의 브라우저로 열기는 현재 선택한 프로젝트 폴더를 새 브라우저의 실제 localhost 주소로 엽니다. Open in Browser on the desktop app opens the currently selected project folder at a real localhost address in a new browser window.

새 프로젝트 위치 New Project Location

Chrome·Edge 컴퓨터 웹에서는 프로젝트 이름과 빈 파일을 고른 뒤 저장 위치 선택을 누릅니다. 운영체제의 폴더 선택 창이 열리면 바탕화면처럼 찾기 쉬운 상위 폴더를 고르고 선택 또는 허용을 누르세요. 이지웹 스쿨이 선택한 위치 안에 프로젝트 이름으로 새 폴더를 만듭니다. 데스크톱 앱은 바탕화면의 이지웹 스쿨 프로젝트 폴더 안에 새 프로젝트를 자동으로 만듭니다. 폴더 기능을 지원하지 않는 브라우저와 모바일에서는 프로젝트를 현재 브라우저 안에 저장하므로 작업을 ZIP으로 내려받아 따로 보관해야 합니다. On Chrome/Edge computer web, choose a project name and empty files, then click Select Save Location. When your OS folder selection window opens, pick an easy-to-find parent folder like Desktop, and click Select or Allow. EasyWeb School will create a new folder with your project name there. The Desktop App automatically creates new projects inside the EasyWeb School Projects folder on your Desktop. For browsers and mobile devices that don't support folder selection, projects are saved inside the current browser, so you must download your work as a ZIP file to keep it safe.

작업 화면 읽기 Reading the workspace

작업할 곳과 조작할 버튼을 함께 확인합니다 Check where to work and which buttons to use

버튼은 그 버튼이 바꾸는 영역 가까이에 있습니다. 화면 위에서 현재 프로젝트와 저장 방식을 확인한 뒤 파일 메뉴, 에디터, 미리보기를 왼쪽부터 차례로 사용합니다. Buttons are close to the areas they change. Check the current project and save method at the top, then use the file menu, editor, and preview from left to right.

파일 메뉴 File Menu

파일 이름을 누르면 그 파일의 코드가 에디터에 열립니다. 현재 선택한 파일 이름은 이름 바꾸기와 삭제 버튼 바로 위에도 표시됩니다. 파일 추가, 이름 바꾸기, 삭제는 모두 이 메뉴에서 합니다. Clicking a file name opens its code in the editor. The currently selected file name is also displayed just above the rename and delete buttons. You can add, rename, and delete files from this menu.

에디터와 저장 Editor & Save

에디터 위의 현재 파일 이름을 확인하고 코드 수정 시작을 누른 뒤 코드를 고칩니다. 되돌리기는 가장 최근 수정을 취소하고, 다시 실행은 방금 취소한 수정을 되살립니다. 저장을 누르면 지금 보고 있는 파일의 최신 코드가 현재 프로젝트의 저장 위치에 기록됩니다. Check the current file name above the editor, click Start Editing Code, and modify the code. Undo cancels the most recent edit, and Redo restores it. Clicking Save writes the latest code of the file you are viewing to the project's save location.

미리보기와 실제 테스트 Preview & Real Test

코드를 바꾸면 잠시 뒤 미리보기에 자동 반영됩니다. 모바일·태블릿·웹창 크기를 선택하거나 가장자리를 끌어 크기를 바꿀 수 있습니다. 미리보기는 localhost가 아니며, 실제 localhost 테스트는 데스크톱 앱의 브라우저로 열기를 사용합니다. Changes to the code are automatically reflected in the preview shortly after. You can select mobile, tablet, or web window sizes or drag the edges to resize. The preview is not localhost; use Open in Browser in the desktop app for actual localhost testing.

화면 숨기기와 보기 Hide & Show Screens

파일 메뉴 숨기기, 에디터 숨기기, 미리보기 숨기기를 누르면 같은 자리에 보기 버튼이 남습니다. 다시 열 때 다른 곳에서 버튼을 찾지 말고 그 자리에 있는 파일 메뉴 보기, 에디터 보이기, 미리보기 보기를 누릅니다. Clicking Hide File Menu, Hide Editor, or Hide Preview leaves a Show button in the same place. To reopen, don't look for the button elsewhere; click Show File Menu, Show Editor, or Show Preview right there.

콘솔(오류·상태 확인) Console (Errors & Status)

미리보기에서 발생한 오류와 상태 메시지를 확인합니다. 전체 내용 복사 또는 최근 오류를 AI 질문으로 복사를 누르면 필요한 내용을 바로 붙여넣을 수 있습니다. 이지웹 스쿨은 오류 내용을 보여 주며 코드를 자동으로 고치지 않습니다. Check errors and status messages that occurred in the preview. Click Copy All or Copy Recent Error for AI to easily paste what you need. EasyWeb School shows the error details but does not automatically fix your code.

저장 방식과 백업 Save Methods & Backup

실제 폴더 모드에서 저장하면 컴퓨터의 프로젝트 파일 내용이 바뀝니다. 브라우저 저장 모드에서는 프로젝트를 지금 사용하는 브라우저의 저장 공간에 보관합니다. 백업 슬롯에는 HTML·CSS·JavaScript 파일의 현재 내용을 중간 저장할 수 있습니다. 이미지까지 포함한 프로젝트 전체를 제출하거나 다른 기기로 옮기려면 ZIP 압축을 사용합니다. Saving in real folder mode changes the project files on your computer. In browser save mode, the project is kept in your current browser's storage. You can temporarily save the current contents of HTML, CSS, and JavaScript files in backup slots. To submit the whole project including images or move it to another device, use ZIP compression.

저장지금 파일의 최신 코드를 남겨요
백업 슬롯저장해 둔 텍스트 파일 내용으로 되돌려요
ZIP 압축프로젝트 전체를 제출·이동해요

웹페이지 공부하기 Studying Web Pages

기초를 익힌 뒤 예시 화면과 코드를 연결합니다 Learn the basics, then connect example screens to code

웹페이지 기초에서는 프로젝트 폴더와 파일 역할을 살펴봅니다. 예시 웹페이지 살펴보기에서는 시간표, 랜덤 뽑기, OX 퀴즈, 소개 페이지, 저장, API, 게임 예시를 직접 확인합니다. In Web Basics, we look at the roles of project folders and files. In Examples, you can directly check examples like a timetable, random draw, OX quiz, introduction page, save features, APIs, and games.

  1. 1. 기초 확인 1. Check Basics 프로젝트 폴더와 세 파일의 역할이 헷갈리면 웹페이지 기초에서 필요한 항목만 펼쳐 봅니다. If you are confused about the roles of project folders and the three files, check only the items you need from Web Basics.
  2. 2. 예시 선택 2. Select Example 예시 웹페이지 살펴보기에서 배우고 싶은 웹페이지 하나를 고릅니다. 선택한 예시만 아래에 표시됩니다. Choose one web page you want to learn from Examples. Only the selected example will be shown below.
  3. 3. 파일 구성 선택 3. Select File Structure index.html 하나에 모두 넣은 코드와 세 파일로 나눈 코드를 비교합니다. Compare the code all in one index.html with the code split into three files.
  4. 4. 코드 찾기 4. Find Code 화면의 버튼이나 글을 눌러도 기능은 실행되지 않고, 그 부분을 만든 HTML·CSS·JavaScript 설명이 뜹니다. Clicking buttons or text on the screen does not execute features, but instead shows the HTML, CSS, and JavaScript explanations that created them.
  5. 5. 기능 실행 5. Run Feature 실제 버튼, 퀴즈, 움직임을 작동시켜 결과가 어떻게 바뀌는지 확인합니다. Run actual buttons, quizzes, and movements to see how the results change.
  6. 6. 핵심 확인 6. Check Key Points 처음에는 핵심 코드만 보고, 필요할 때 전체 코드로 넓힙니다. 마지막 점검 문제와 AI 복사용 요청문도 사용할 수 있습니다. Look at the core code first, then expand to the full code when needed. You can also use the final check questions and AI copy prompts.
웹페이지 기초 보기 View Web Basics 예시 웹페이지 살펴보기 View Examples 코드 찾기는 원리 공부, 기능 실행은 실제 작동 확인입니다. Find Code is for studying principles, Run Feature is for checking actual operation.

AI에게 코드 부탁하기 Asking AI for Code

AI가 준 코드를 내 프로젝트로 가져오는 순서 Steps to bring AI code to your project

AI는 코드를 시작하는 데 도움을 줄 수 있습니다. 세세한 문법을 모두 외우기보다 화면에 어떤 기능이 생겼는지 알아보고, 관련 코드를 찾고, 원하는 변화를 다시 설명하는 것이 먼저입니다. 받은 코드는 직접 파일에 넣고 실행해 본 뒤 내가 원하는 모습으로 고쳐야 내 웹페이지가 됩니다. AI can help you get started with code. Rather than memorizing every grammar rule, it's better to understand what features appeared on screen, find related code, and re-explain desired changes. The received code must be tested and modified into what you want to truly make it your own web page.

  1. 예시와 파일 구성을 먼저 고릅니다. First choose an example and file structure. 예시 웹페이지 살펴보기에서 만들고 싶은 예시를 고르고, index.html 하나 또는 세 파일로 나누기를 결정합니다. Select the example you want to build from Examples, and decide whether to use just index.html or split into three files.
  2. 간단한 요청이나 자세한 요청을 고릅니다. Choose between a simple or detailed prompt. 가볍게 시작하고 싶으면 간단한 요청문, 기능과 조건을 처음부터 분명하게 말하고 싶으면 자세한 요청문을 사용합니다. 두 요청문 모두 맨 앞에 웹 개발 전문가 역할이 들어갑니다. Use a simple prompt for a light start, or a detailed prompt to clarify features and conditions from the beginning. Both prompts assign the AI an expert web developer role at the top.
  3. 복사용 요청문을 AI에 붙여넣습니다. Paste the copyable prompt to AI. 요청문 복사를 누른 뒤 Gemini, ChatGPT, Claude 중 하나에 붙여넣습니다. Click Copy Prompt and paste it into Gemini, ChatGPT, or Claude.
  4. 파일 이름에 맞춰 코드를 붙여넣습니다. Paste code matching the file names. AI가 준 index.html, style.css, script.js 코드를 같은 이름의 파일에 각각 넣습니다. Put the index.html, style.css, and script.js codes provided by AI into their respective files.
  5. 직접 실행하고 짧게 다시 부탁합니다. Run it yourself and ask for short revisions. 결과를 확인한 뒤 “제목을 더 크게 바꿔 줘”처럼 아쉬운 점 한 가지를 같은 AI 대화창에 말합니다. 한 번의 요청으로 끝내지 않고 실행과 대화를 반복해 완성합니다. After checking results, ask for one improvement in the same AI chat window, like "Make the title bigger". Repeat running and conversing until it's complete instead of finishing with just one request.
  6. 오류가 나면 사실 그대로 AI에 전달합니다. Report errors to AI exactly as they are. 콘솔(오류·상태 확인)에서 최근 오류를 AI 질문으로 복사하면 오류 원문, 파일과 줄, 관련 코드 일부가 함께 복사됩니다. Copying a recent error from the console will include the original error message, file/line info, and related code snippets to easily paste for AI.
예시를 고르고 복사용 요청문 보기 Choose example & View prompt

어떤 것을 쓸까요? Which one should I use?

기기에 따라 사용할 수 있는 기능 Features available by device

웹 버전 Web Version

설치 없이 바로 시작 Start directly without installing

Chrome·Edge 같은 지원 브라우저에서는 폴더 권한을 허용해 실제 파일에 저장할 수 있습니다. 지원하지 않는 환경에서는 브라우저 안 프로젝트와 ZIP을 사용합니다. 웹 버전은 localhost 서버를 실행하지 않습니다. In supported browsers like Chrome/Edge, you can grant folder permissions to save to actual files. In unsupported environments, use in-browser projects and ZIPs. The web version does not run a localhost server.

내 웹페이지 만들기 Make Web Page

데스크톱 앱 Desktop App

localhost에서 제대로 테스트 Test properly on localhost

프로젝트 폴더를 직접 다루고 실제 localhost 주소를 새 브라우저로 열 수 있습니다. USB 기기 연결처럼 보안에 영향을 받는 기능을 확인할 때 사용합니다. Handle project folders directly and open a real localhost address in a new browser. Use this when checking security-affected features like USB device connections.

데스크톱 앱 다운로드 Download Desktop App

스마트폰·태블릿 웹 Phone/Tablet Web

한 화면씩 코드 작성과 결과 확인 Write code and view results screen by screen

파일 고르기, 코드 쓰기, 결과 보기를 구분해서 사용합니다. 홈 화면에 추가할 수 있고, 한 번 준비된 기본 화면과 브라우저 프로젝트는 오프라인에서도 이어서 사용할 수 있습니다. Switch between selecting files, writing code, and viewing results. You can add it to your home screen, and once prepared, basic screens and browser projects can be used offline.

모바일에서 시작하기 Start on Mobile
분명한 제한 Clear Limitations

스마트폰·태블릿에서도 코드 작성과 전체 화면 미리보기는 사용할 수 있지만, 이 미리보기는 localhost가 아닙니다. 오프라인에서는 인터넷 이미지와 API가 작동하지 않을 수 있습니다. 실제 프로젝트 폴더 직접 저장은 브라우저마다 다르며, localhost 실제 테스트는 Windows·Mac 데스크톱 앱에서만 지원합니다. 브라우저 안에 저장한 프로젝트는 기기 변경이나 브라우저 데이터 삭제 전에 ZIP으로 보관하세요. While you can write code and use full-screen preview on smartphones/tablets, this preview is not localhost. Internet images and APIs may not work offline. Direct project folder saving varies by browser, and real localhost testing is only supported on Windows/Mac desktop apps. Keep projects saved in the browser backed up as ZIPs before changing devices or clearing browser data.

파일 역할 File Roles

웹 파일의 역할 Roles of web files

index.html 글, 버튼, 사진처럼 웹페이지에 보이는 내용을 적어요. Write visible contents of a webpage, like text, buttons, and photos.
style.css 색, 글씨 크기, 위치처럼 웹페이지를 꾸며요. Decorate the webpage with colors, font sizes, and layouts.
script.js 버튼 클릭을 알아내고, 값을 계산하고, 화면 내용이나 움직임을 바꾸는 코드를 적어요. Write code to detect button clicks, calculate values, or change screen contents and movements.
images/ 프로젝트에서 직접 사용할 사진을 모아요. 사진을 사용하지 않으면 없어도 됩니다. Collect photos used directly in the project. You don't need this if not using photos.

이미지 넣기 Adding Images

내 웹페이지에 이미지가 보이는 세 가지 방법 Three ways to show images on your webpage

사진 파일을 프로젝트에 넣거나 인터넷 주소로 불러올 수 있습니다. 간단한 그림은 이미지 파일 없이 HTML과 CSS로 만들 수도 있습니다. You can put photo files in your project or load them from internet URLs. Simple shapes can also be made with HTML and CSS without image files.

수업과 완성 프로젝트에 추천 Recommended for classes & finished projects

1. 프로젝트 폴더의 이미지 사용 1. Use images in the project folder

내 컴퓨터의 이미지 파일을 프로젝트 안에 넣고, 그 위치를 HTML에 적습니다. Put image files from your computer into the project, and write their location in HTML.

내-웹사이트/
index.html
style.css
script.js
images/ 이미지를 사용할 때만 Only when using images
cat.png
<img src="images/cat.png" alt="고양이">
  • 인터넷이 없어도 이미지가 보입니다. Images show up even without the internet.
  • 제출하거나 배포할 때 images 폴더도 함께 보냅니다. Send the images folder together when submitting or deploying.
빠른 실습에 사용 Use for quick practice

2. 인터넷 이미지 주소 사용 2. Use internet image URLs

사용할 이미지를 마우스 오른쪽 버튼으로 누르고(우클릭) 이미지 주소 복사를 선택한 뒤 src에 붙여넣습니다. Right-click the image you want to use, select Copy image address, and paste it into src.

웹페이지 주소는 사용하지 않아요 Do not use the webpage URL https://example.com/gallery 선택한 이미지 한 장의 주소를 사용해요 Use the URL of one selected image https://example.com/images/cat.png 
<img src="https://example.com/images/cat.png" alt="고양이">
  • 인터넷이 있어야 이미지가 보입니다. Internet is required to see the images.
  • 주소가 바뀌거나 외부 사용이 막히면 보이지 않을 수 있습니다. They may not show if the address changes or external use is blocked.
  • 사용해도 되는 이미지인지 먼저 확인합니다. Check if it is an image you are allowed to use first.
간단한 모양과 아이콘에 사용 Use for simple shapes and icons

3. 이미지 파일 없이 만들기 3. Create without image files

이모지와 글자, CSS 도형은 이미지처럼 보이지만 실제 이미지 파일은 아닙니다. Emojis, text, and CSS shapes look like images, but they are not actual image files.

★ HELLO 
<span>★</span>
<div class="circle"></div>

.circle {
  background: teal;
  border-radius: 50%;
}
  • 별도의 이미지 파일이나 인터넷 주소가 필요하지 않습니다. No separate image file or internet URL is needed.
  • 이모지, 배지, 단순한 도형에 알맞습니다. Suitable for emojis, badges, and simple shapes.
  • 사진이나 복잡한 그림을 대신하기에는 어렵습니다. Hard to replace photos or complex drawings.
어떤 방법을 고를까요? Which method should I choose?

사진은 images 폴더에 넣는 방법을 추천합니다. 인터넷 이미지 주소는 빠른 실습에, HTML 글자와 CSS 도형은 간단한 아이콘과 모양에 사용하세요. We recommend putting photos in the images folder. Use internet image URLs for quick practice, and HTML text or CSS shapes for simple icons and shapes.

완성 후 After Completion

제출과 배포 Submit and Deploy

선생님께 제출할 때는 ZIP 압축 파일을 사용합니다. GitHub Pages나 Netlify에 웹사이트를 공개할 때는 ZIP 파일이 아니라 index.html, CSS 파일, JavaScript 파일과 이미지가 든 프로젝트 폴더의 내용을 올립니다. Use ZIP compression files when submitting to a teacher. When publishing a website to GitHub Pages or Netlify, do not upload a ZIP file, but the contents of the project folder containing index.html, CSS files, JavaScript files, and images.

자주 묻는 질문

질문을 누르면 답이 열립니다. 먼저 프로젝트와 저장 방식을 확인한 뒤, 필요한 웹 개념을 찾아보세요. Click a question to open its answer. Check the project and saving methods first, then look for necessary web concepts.

프로젝트와 파일 Project & Files

새 프로젝트의 파일은 왜 비어 있나요? Why are the files in a new project empty?

학생이 직접 작성하거나 AI에서 받은 코드를 정확히 구분해 넣을 수 있도록 파일 이름만 만들고 내용은 비워 둡니다. index.html 하나로 시작해도 되고, 처음부터 세 파일로 나누어도 됩니다. Only the file names are created and contents are left empty so students can clearly distinguish between their own code and code from AI. You can start with just index.html, or split it into three files from the start.

폴더 선택 화면에서 안의 파일이 보이지 않아요. 빈 폴더인가요? I can't see the files inside the folder selection screen. Is it empty?

운영체제의 폴더 선택 창은 파일을 숨기고 폴더만 보여 줄 수 있습니다. 폴더를 선택하면 이지웹 스쿨의 확인 화면과 왼쪽 파일 목록에서 사용할 수 있는 파일 이름과 확장자를 다시 보여 줍니다. 그래도 index.html이 없다면 빈 index.html을 만들 수 있습니다. The OS folder selection window may hide files and only show folders. If you select a folder, EasyWeb School's confirmation screen and left file list will show available file names and extensions again. If index.html is still missing, you can create a blank one.

style.css와 script.js가 없어도 작동하나요? Does it work without style.css and script.js?

네. index.html 하나만으로도 꾸미기와 움직임을 넣을 수 있습니다. 코드가 길어지면 파일을 나누면 찾고 고치기 쉬워집니다. Yes. You can add styling and interactions with just index.html. Splitting files when the code gets long makes it easier to find and fix things.

index.html의 이름을 바꾸면 안 되나요? Can I rename index.html?

이름을 바꿀 수는 있지만 처음 만드는 웹페이지에는 index.html을 추천합니다. 로컬 서버나 배포된 웹사이트는 폴더 주소로 들어왔을 때 보통 index.html을 첫 화면으로 찾습니다. home.html처럼 이름을 바꾸면 주소에 파일 이름을 직접 적거나 다른 페이지에서 연결해야 합니다. You can change it, but index.html is recommended for your first webpage. Local servers and deployed websites usually look for index.html as the first screen when accessing a folder address. If you change it to home.html, you must type the file name directly in the URL or link to it from another page.

style.css와 script.js의 이름을 바꾸면 안 되나요? Can I rename style.css and script.js?

두 파일의 이름은 바꿔도 됩니다. 다만 style.css를 game.css로 바꾸었다면 HTML의 href="game.css"도 바꾸고, script.js를 quiz.js로 바꾸었다면 src="quiz.js"도 똑같이 바꿔야 합니다. 대문자와 소문자, 폴더 위치까지 정확히 맞아야 합니다. You can change both file names. However, if you change style.css to game.css, you must also change href="game.css" in HTML, and if you change script.js to quiz.js, you must change src="quiz.js". Uppercase, lowercase, and folder locations must match exactly.

HTML, CSS, JavaScript 파일은 폴더에 하나씩만 있어야 하나요? Should there be only one HTML, CSS, JavaScript file per folder?

아니요. 한 프로젝트에 같은 종류의 파일을 여러 개 둘 수 있습니다. 예를 들어 index.html과 game.html, style.css와 game.css, main.js와 quiz.js처럼 페이지나 기능에 따라 나눌 수 있습니다. 같은 폴더 안에서는 파일 이름을 서로 다르게 정하고, HTML에서 사용할 CSS와 JavaScript 파일을 정확히 연결해야 합니다. 처음에는 적은 파일로 시작하고 코드가 길어졌을 때 나누는 것을 추천합니다. No. You can have multiple files of the same type in one project. For example, index.html and game.html, style.css and game.css, main.js and quiz.js based on pages or features. Ensure file names are unique within the same folder, and link the CSS and JavaScript files correctly in HTML. We recommend starting with a few files and dividing them when the code gets long.

HTML, CSS, JavaScript 말고도 다른 언어나 파일 형식이 있나요? Are there other languages or file formats besides HTML, CSS, and JavaScript?

네. 정확히 말하면 HTML은 내용을 놓는 마크업 언어, CSS는 모양을 정하는 스타일 언어, JavaScript는 기능을 만드는 프로그래밍 언어입니다. 웹 프로젝트에는 .png·.jpg 이미지, .mp3 소리, .mp4 영상, .woff2 글꼴, .json 데이터 파일도 들어갈 수 있습니다. 더 깊이 공부하면 TypeScript, Python, Java, PHP 같은 언어도 만나지만, 현재 이지웹 스쿨은 HTML·CSS·JavaScript로 만드는 정적 웹페이지를 중심으로 하며 Python 서버 실행 기능은 지원하지 않습니다. Yes. Technically, HTML is a markup language for placing content, CSS is a style language for appearance, and JavaScript is a programming language for features. Web projects can also include .png/.jpg images, .mp3 sound, .mp4 video, .woff2 fonts, and .json data files. In deeper studies, you will encounter languages like TypeScript, Python, Java, and PHP, but EasyWeb School currently focuses on static webpages made with HTML/CSS/JavaScript and does not support running Python servers.

저장과 실행 Save & Execute

코드를 바꾸면 미리보기에 자동으로 적용되나요? Are changes automatically applied to the preview?

네. 코드를 수정하면 잠시 뒤 미리보기가 자동으로 바뀝니다. 하지만 미리보기에 보이는 것과 실제 파일 저장은 다른 일입니다. 작업을 마치기 전 저장 상태가 완료인지 확인하세요. Yes. The preview updates automatically shortly after you modify the code. However, what shows in the preview is separate from actually saving the files. Check that the save status is complete before finishing your work.

실제 폴더 저장과 브라우저 안 저장은 무엇이 다른가요? What is the difference between real folder save and browser save?

실제 폴더 저장은 컴퓨터의 프로젝트 파일을 직접 바꿉니다. 브라우저 안 저장은 원본 파일을 직접 바꾸지 않고 현재 브라우저의 저장 공간에 별도 프로젝트로 보관합니다. 브라우저 프로젝트는 다른 기기로 자동 이동하지 않으므로 ZIP으로 내려받아 보관하세요. Real folder save directly modifies the project files on your computer. Browser save keeps a separate project in the current browser's storage without directly modifying original files. Browser projects do not automatically move to other devices, so download and store them as a ZIP.

저장, 백업 슬롯, ZIP 압축은 무엇이 다른가요? What is the difference between Save, Backup Slot, and ZIP compression?

저장은 지금 보고 있는 파일의 최신 코드를 프로젝트에 기록합니다. 백업 슬롯은 HTML·CSS·JavaScript 파일의 현재 내용을 중간에 저장했다가 그 내용으로 되돌릴 때 사용하며 이미지 파일은 포함하지 않습니다. ZIP 압축은 이미지까지 포함한 프로젝트 전체를 제출하거나 다른 기기로 옮길 때 사용합니다. Save writes the latest code of the file you are viewing to the project. Backup slots are used to temporarily save and restore HTML, CSS, and JavaScript files without images. ZIP compression is used to submit or move the entire project, including images, to another device.

숨긴 파일 메뉴, 에디터, 미리보기는 어디에서 다시 여나요? Where do I reopen hidden file menus, editors, and previews?

컴퓨터의 넓은 화면에서는 숨기기를 눌렀던 같은 자리에 보기 버튼이 남습니다. 파일 메뉴 보기, 에디터 보이기, 미리보기 보기 중 필요한 버튼을 누르세요. 스마트폰과 태블릿에서는 화면 위의 파일 고르기, 코드 쓰기, 결과 보기 버튼이 항상 같은 자리에 있으며 한 화면씩 전환합니다. On large computer screens, a Show button is left where you clicked hide. Click Show File Menu, Show Editor, or Show Preview as needed. On smartphones and tablets, the Select File, Write Code, and View Results buttons are always at the top, switching one screen at a time.

미리보기와 브라우저로 열기는 무엇이 다른가요? What's the difference between Preview and Open in Browser?

미리보기는 이지웹 스쿨 안에서 화면과 크기를 빠르게 확인하는 기능이며 localhost가 아닙니다. 데스크톱 앱의 브라우저로 열기는 현재 프로젝트 폴더를 실제 http://localhost 주소로 새 브라우저에서 실행해 더 제대로 테스트합니다. Preview is for quickly checking the screen and size within EasyWeb School and is not localhost. Open in Browser on the desktop app opens the current project folder at a real http://localhost address in a new browser for proper testing.

스마트폰이나 태블릿에서도 localhost를 열 수 있나요? Can I open localhost on a smartphone or tablet?

이지웹 스쿨 모바일 웹에서는 코드 작성과 전체 화면 미리보기를 사용할 수 있지만, 프로젝트용 localhost 서버 실행은 지원하지 않습니다. 실제 폴더 저장도 브라우저와 기기에 따라 다르므로 브라우저 안 저장과 ZIP 보관을 기준으로 사용하세요. On the EasyWeb School mobile web, you can use code writing and full-screen previews, but running a localhost server for projects is not supported. Since real folder saving varies by browser and device, rely on browser save and ZIP backups.

인터넷이 없어도 이지웹 스쿨을 사용할 수 있나요? Can I use EasyWeb School without the internet?

온라인에서 한 번 준비된 기본 화면과 브라우저 프로젝트는 오프라인에서도 이어서 사용할 수 있습니다. 다만 처음 여는 화면, 인터넷 이미지, 외부 API, AI 서비스 링크는 인터넷이 필요합니다. 중요한 프로젝트는 오프라인 사용 여부와 관계없이 ZIP으로 따로 보관하세요. Once prepared online, the basic screen and browser projects can continue being used offline. However, the first load, internet images, external APIs, and AI service links require internet access. Keep important projects safely backed up as ZIP files regardless of offline use.

데스크톱 앱은 자동으로 최신 상태가 되나요? Does the desktop app update automatically?

현재 데스크톱 앱은 자동 업데이트를 지원하지 않습니다. 웹 버전은 새로고침하면 배포된 최신 화면을 받지만, 데스크톱 앱의 새 기능은 앱 다운로드 페이지에서 새 버전을 받아 다시 설치해야 합니다. The current desktop app does not support automatic updates. The web version gets the latest deployed screen upon refresh, but for new desktop app features, you must download and reinstall the new version from the app download page.

웹 기능과 정보 Web Features & Info

localStorage에 저장하면 다른 컴퓨터에서도 보이나요? If I save to localStorage, will it show on other computers?

아니요. localStorage는 로그인 계정이나 인터넷 서버가 아니라 지금 사용하는 브라우저에 정보를 저장합니다. 같은 웹 주소를 열어도 다른 컴퓨터나 다른 브라우저에서는 저장한 내용이 자동으로 나타나지 않습니다. 브라우저 데이터를 지우면 저장한 내용도 사라질 수 있습니다. No. localStorage saves info in your current browser, not a login account or internet server. Even if you open the same web address, saved contents do not automatically appear on other computers or browsers. If you clear browser data, saved contents may be deleted.

localStorage와 API도 JavaScript 자체인가요? Are localStorage and APIs part of JavaScript itself?

아니요. localStorage는 브라우저가 제공하는 저장 기능이고, API는 다른 서비스에 정보를 요청하고 받는 방법입니다. 웹페이지에서는 JavaScript로 localStorage를 사용하고 fetch()로 API에 요청하는 경우가 많습니다. JavaScript는 클릭 반응, 계산, 조건 판단, 배열, 화면 내용과 움직임 변경처럼 이 밖에도 많은 기본 동작을 만듭니다. No. localStorage is a storage feature provided by the browser, and an API is a way to request and receive info from other services. Web pages often use JavaScript for localStorage and request APIs using fetch(). JavaScript handles many basic behaviors like click responses, calculations, conditions, arrays, and changing screen contents and movements.

JavaScript로 바뀌는 정보는 모두 실시간 정보인가요? Is all info changed by JavaScript real-time?

아니요. 랜덤 번호는 뽑기 버튼을 누를 때 JavaScript가 남은 번호 중 하나를 선택하고, 퀴즈 점수는 답을 누를 때 JavaScript가 정답과 비교해 계산합니다. 할 일 글은 localStorage에 저장되므로 같은 기기와 브라우저에서 새로고침한 뒤에도 남습니다. 날씨 값은 버튼을 누를 때 인터넷 서비스에서 받지만, 제공처가 마지막으로 갱신한 값일 수 있습니다. 화면이 바뀌는 것과 인터넷에서 값을 받는 것은 서로 다른 일입니다. No. When you press draw, JavaScript picks one from remaining numbers, and quiz scores are calculated by comparing your answer to the correct one. To-do items are saved in localStorage, remaining after a refresh on the same device and browser. Weather values are fetched from the internet when you press the button, but might be the provider's last updated value. Changing the screen and receiving values from the internet are different.

API는 모두 가입하거나 인증 키를 받아야 하나요? Do I need to sign up or get an auth key for all APIs?

아니요. 가입과 인증 키가 필요한 API도 있고, 교육·비상업 용도로 인증 키 없이 쓸 수 있는 API도 있습니다. 예시 웹페이지 살펴보기의 날씨 예시는 Open-Meteo를 사용합니다. 인터넷 연결이 필요하며, 무료 사용 범위·요청 횟수·출처 표시 같은 제공처의 이용 조건을 먼저 확인해야 합니다. No. Some APIs require signup and auth keys, while others can be used without keys for educational/non-commercial purposes. The weather example in Examples uses Open-Meteo. It requires internet access, and you must first check the provider's terms of use, such as free limits, request counts, and attribution.

index.html을 그냥 열 때와 localhost는 무엇이 다른가요? What is the difference between opening index.html directly and localhost?

index.html 파일을 직접 열면 주소가 file://로 시작하고, 브라우저는 컴퓨터 파일을 바로 읽습니다. localhost로 열면 데스크톱 앱의 로컬 서버가 프로젝트 파일을 http://localhost 주소로 제공합니다. 브라우저가 보안상 안전한 환경에서만 허용하는 USB 기기 연결 같은 기능은 file://에서 막힐 수 있으므로 localhost 또는 HTTPS로 배포한 웹사이트에서 확인해야 합니다. Opening index.html directly starts the address with file://, and the browser reads computer files directly. Opening with localhost means the desktop app's local server provides project files at a http://localhost address. Features like USB device connections that require secure environments may be blocked in file://, so test them on localhost or a deployed HTTPS website.

Python으로 만든 기능도 이지웹 스쿨에서 실행할 수 있나요? Can I run Python features in EasyWeb School?

현재는 지원하지 않습니다. Python은 파일 계산 같은 컴퓨터 프로그램에도 쓰이지만, 웹페이지가 Python 기능을 사용하려면 보통 Python 백엔드 서버를 따로 실행하고 JavaScript가 그 서버에 요청을 보내야 합니다. 이지웹 스쿨은 먼저 HTML·CSS·JavaScript 정적 웹페이지와 외부 API 요청까지 다루며, Python 서버와 데이터베이스는 별도의 심화 과정에 해당합니다. Not currently supported. Python is used for computer programs like file calculation, but for a web page to use Python features, you usually need to run a separate Python backend server and send requests to it via JavaScript. EasyWeb School focuses on static HTML/CSS/JavaScript webpages and external API requests; Python servers and databases belong to an advanced course.

학습과 AI Learning & AI

HTML 태그와 JavaScript 문법을 모두 외워야 하나요? Do I have to memorize all HTML tags and JavaScript grammar?

아니요. 처음에는 화면에 어떤 내용과 기능이 있는지 설명하고, 그 기능과 관련된 파일이나 코드 부분을 찾으며, AI에게 원하는 변화를 구체적으로 말할 수 있으면 충분합니다. <table>, 배열, fetch() 같은 이름은 시험처럼 외워야 하는 답이 아니라 코드 검색과 AI 대화에 도움이 되는 참고 용어입니다. 라이브러리도 “다른 사람이 미리 만들어 둔 기능 모음”이라는 정도부터 알면 됩니다. 이지웹 스쿨의 기본 예시는 라이브러리 없이 시작하며, 필요한 이름은 예시를 반복해서 살펴보다 자연스럽게 익히면 됩니다. No. At first, it is enough to describe what content and features are on the screen, find related files or code parts, and specifically ask AI for desired changes. Terms like <table>, arrays, and fetch() are not exam answers to memorize, but reference terms to help with code search and AI conversations. You just need to know libraries are 'collections of features made by others'. EasyWeb School examples start without libraries, and you will naturally learn necessary names by repeatedly reviewing them.

코드 찾기와 기능 실행은 무엇이 다른가요? What is the difference between Find Code and Run Feature?

코드 찾기에서는 예시 화면의 버튼과 링크가 실제로 작동하지 않고 관련 코드 설명만 보여 줍니다. 기능 실행으로 바꾸면 같은 버튼과 링크가 실제로 작동합니다. 원리를 찾을 때는 코드 찾기, 결과를 시험할 때는 기능 실행을 사용하세요. In Find Code, buttons and links on example screens do not actually work but only show code explanations. Switching to Run Feature makes them work. Use Find Code to understand principles, and Run Feature to test results.

핵심 코드와 전체 코드는 무엇이 다른가요? What is the difference between Core Code and Full Code?

핵심 코드는 지금 고른 화면 부분이나 원리를 이해하는 데 필요한 줄만 보여 줍니다. 전체 코드는 예시 웹페이지를 완성하는 모든 줄을 보여 줍니다. 처음에는 핵심 코드로 관계를 찾고, 복사하거나 더 깊이 살펴볼 때 전체 코드를 사용하세요. Core Code shows only the lines needed to understand the selected screen part or principle. Full Code shows all lines completing the example webpage. First use Core Code to find relations, then use Full Code when copying or looking deeper.

AI 요청문은 꼭 길고 자세하게 써야 하나요? Do I have to write long and detailed AI prompts?

아니요. 만들고 싶은 웹페이지와 핵심 기능만 짧게 말해도 시작할 수 있습니다. 결과를 이지웹 스쿨에서 실행한 뒤 “색을 바꿔 줘”, “버튼을 하나 추가해 줘”처럼 같은 AI 대화창에서 한 가지씩 다시 부탁하세요. 빠뜨리면 안 되는 조건이 많을 때만 자세한 요청문을 사용하면 됩니다. No. You can start by briefly stating the webpage and core features you want. After running the results in EasyWeb School, ask for things one by one in the same AI chat, like 'Change the color' or 'Add a button'. Only use detailed prompts when there are many conditions you shouldn't miss.

실행 오류를 AI에 어떻게 물어보나요? How do I ask AI about execution errors?

내 웹페이지 만들기의 콘솔(오류·상태 확인)에서 최근 오류를 AI 질문으로 복사를 누르세요. 프로젝트 전체가 아니라 오류 원문과 확인된 파일·줄, 그 주변 코드만 복사됩니다. 옆에 열어 둔 Gemini, ChatGPT 또는 Claude에 붙여넣고 설명을 받은 뒤, 바꿀 내용을 직접 확인해 적용하세요. Click Copy Recent Error for AI in the Make Web Page console (Errors/Status). Only the original error, file/line info, and surrounding code will be copied, not the whole project. Paste it into your opened Gemini, ChatGPT, or Claude, get an explanation, and manually apply the changes.

Gemini Canvas나 Canva AI와 함께 써도 되나요? Can I use Gemini Canvas or Canva AI together?

가벼운 공유와 빠른 미리보기에는 편합니다. 프로젝트가 커지면 파일을 나누어 프로젝트 폴더에 저장하고 이지웹 스쿨에서 확인하면 수정하기 쉽습니다. They are convenient for light sharing and quick previews. As the project grows, it is easier to modify if you split files into a project folder and check them in EasyWeb School.