화면과 코드를 함께 보기 View Screen and Code Together

예시 웹페이지 살펴보기 Explore Example Webpages

살펴볼 예시를 먼저 고른 뒤, 화면의 글자와 버튼이 HTML, CSS, JavaScript 코드와 어떻게 연결되는지 확인하세요. First choose an example to explore, then check how the text and buttons on the screen connect with the HTML, CSS, and JavaScript code.

예시를 보기 전에 기초가 필요하다면 If you need the basics before exploring examples 프로젝트 폴더 구성과 index.html, style.css, script.js의 역할을 알아보세요. 시간표의 수업명, 퀴즈 점수, 날씨 값이 코드 파일, 내 브라우저, 인터넷 서비스 중 어디에서 만들어지는지도 설명합니다. Learn about the project folder structure and the roles of index.html, style.css, and script.js. It also explains whether the class names in the timetable, quiz scores, and weather values are created in the code files, your browser, or an internet service. 웹페이지 기초 보기 View Webpage Basics

예시 선택 Select Example

어떤 웹페이지를 살펴볼까요? Which webpage shall we explore?

처음이라면 우리 반 시간표부터 차례로 살펴보세요. 각 카드의 마지막 줄에는 수업명, 뽑힌 번호, 퀴즈 점수처럼 화면에 표시되는 값이 언제 만들어지고 어디에 저장되는지 적었습니다. If it is your first time, look at our class timetable first and proceed in order. The last line of each card notes when values displayed on the screen, like class names, drawn numbers, and quiz scores, are created and where they are stored.

선택한 예시 Selected Example 우리 반 시간표 자세히 살펴보기 Take a closer look at our class timetable 예시 화면의 요소를 누르고 그 요소를 만든 코드를 확인합니다. Click an element on the example screen and check the code that created that element.

심화 3 · 파일 구성과 이미지 비교 Advanced 3 · File Structure and Image Comparison

어떤 프로젝트 구조로 살펴볼까요? Which project structure shall we explore?

코드 파일을 나누는 방법과 움직이는 대상을 따로 골라 보세요. 네 조합 모두 게임 규칙은 같습니다.

1. 코드 파일은 어떻게 나눌까요? 1. How should we divide the code files?

2. 무엇이 튀어 오르게 할까요? 2. What should bounce?

현재 파일 구성 Current File Structure index.html 한 파일 안에 세 가지 코드 역할이 함께 있어요. Three code roles are together in one file, index.html.

bounce-ball/

index.htmlHTML + CSS + JavaScript

실행 결과 Execution Result 파일 구성과 공 모양이 달라도 움직이는 원리는 같아요 Even if the file structure and ball shape are different, the principle of movement is the same

index.html 하나로 실행 중 Running with one index.html

공이나 캐릭터는 자동으로 점프합니다. The ball or character jumps automatically. 화면의 ← → 버튼을 누르거나 키보드 방향키로 목표까지 이동해 보세요. Press the ← → buttons on the screen or use the keyboard arrow keys to move to the goal.

실제 파일과 코드 Actual File and Code 파일과 궁금한 코드 줄을 눌러 보세요 Click on the file and the line of code you are curious about

파일 1개 · 코드 역할 3개 1 File · 3 Code Roles

index.html의 기본 HTML 안에 <style>로 CSS, <script>로 JavaScript를 함께 넣었습니다.

화면에서 고른 부분이나 위 메뉴에서 선택한 원리와 직접 관련된 코드만 표시합니다. Only the code directly related to the selected part on the screen or the principle selected from the menu above is displayed.

HTML · 내용과 구조 HTML · Content and Structure 화면에 제목, 무대, 공, 버튼을 만들어요 Create a title, stage, ball, and buttons on the screen

HTML 태그로 게임에 필요한 화면 요소와 읽는 순서를 정합니다. Use HTML tags to define the screen elements needed for the game and the reading order.

index.html 하나 One index.htmlHTML 안의 Inside HTML <style>과 and <script>에 꾸미기와 움직임을 함께 적습니다. Write styling and movement together in .

세 파일로 나누기 Split into Three Filesindex.html이 style.css와 script.js를 연결합니다. 코드가 길어질 때 찾고 고치기 쉽습니다. index.html connects style.css and script.js. It is easy to find and fix when the code gets long.

images 폴더 images Folder캐릭터 이미지를 선택한 예시만 Only for the example where a character image is selected images/bounce-monster.png를 사용합니다. HTML이 이미지를 불러오고 JavaScript가 이미지 요소의 is used. HTML loads the image and JavaScript changes the image element's left와 and top 값을 바꿉니다. 충돌을 계산할 때는 기존 공과 같은 위치값과 30×30 크기를 사용합니다.

기초 예시 · HTML 표와 요일 선택 Basic Example · HTML Table and Day Selection

우리 반 시간표 살펴보기 Explore Our Class Timetable

HTML이 요일과 교시를 표의 행과 열에 어떻게 놓는지 먼저 살펴보세요. 기능 실행에서 요일 버튼을 누르면 JavaScript가 선택한 요일의 열과 수업 요약을 어떻게 바꾸는지도 확인할 수 있습니다. First see how HTML places days and periods in the rows and columns of the table. In Function Execution, when you click a day button, you can check how JavaScript changes the column of the selected day and the class summary.

현재 프로젝트 구성 Current Project Structure 코드 파일 1개 1 Code File

HTML, CSS, JavaScript 코드를 index.html 안에 함께 넣습니다.

class-schedule/

index.htmlHTML + CSS + JavaScript

이 코드가 하는 일 What This Code Does

index.html HTML · 웹페이지 준비 HTML · Webpage Preparation

시간표 웹페이지를 시작해요 Start the Timetable Webpage

HTML 문서임을 선언하고 한국어, 글자 인코딩, 화면 너비와 페이지 제목을 정한 뒤 시간표 내용을 시작합니다.

한 파일 방식에서는 꾸미기와 기능 코드도 index.html 안에 함께 들어갑니다.

결과 화면 Result Screen

무엇을 해 볼까요? What shall we do?코드를 찾거나, 직접 실행해 볼 수 있어요. You can find the code or run it directly.

우리 반 시간표 · class-schedule Our Class Timetable · class-schedule

코드 찾기 중 Finding Code

5학년 2반 Grade 5 Class 2

우리 반 시간표 Our Class Timetable

월요일 Monday 국어 · 수학 · 과학 · 체육 · 음악 Korean · Math · Science · PE · Music 요일 버튼을 누르면 선택한 요일의 수업을 강조합니다. Clicking a day button highlights the classes for the selected day.

월요일부터 금요일까지 1~5교시 시간표 Timetable for periods 1~5 from Monday to Friday
교시 Period	월 Mon	화 Tue	수 Wed	목 Thu	금 Fri
1	국어 Korean	수학 Math	영어 English	과학 Science	국어 Korean
2	수학 Math	국어 Korean	체육 PE	영어 English	수학 Math
3	과학 Science	사회 Social Studies	국어 Korean	수학 Math	음악 Music
4	체육 PE	미술 Art	사회 Social Studies	국어 Korean	과학 Science
5	음악 Music	창체 Creative Activities	수학 Math	실과 Practical Arts	미술 Art

화면에서 고른 부분 The Part Selected on the Screen 요일 선택 버튼 Day Selection Button

코드 찾기에서는 요일이 바뀌지 않습니다. 대신 요일 버튼을 만든 HTML, 선택한 버튼의 색을 정한 CSS, 버튼 클릭을 요일 선택 함수와 연결한 JavaScript를 보여 줍니다. In Find Code, the day does not change. Instead, it shows the HTML that created the day button, the CSS that set the color of the selected button, and the JavaScript that connected the button click to the day selection function.

응용 1 · 배열과 무작위 선택 Application 1 · Array and Random Selection

랜덤 발표자 번호 뽑기 살펴보기 Explore Random Presenter Number Draw

학생 수만큼 번호 배열을 만들고 하나씩 꺼내, 같은 번호가 두 번 나오지 않게 하는 과정을 살펴봅니다.

현재 프로젝트 구성 Current Project Structure 코드 파일 1개 1 Code File

HTML, CSS, JavaScript 코드를 index.html 안에 함께 넣습니다.

random-picker/

index.htmlHTML + CSS + JavaScript

이 코드가 하는 일 What This Code Does

index.html HTML · 웹페이지 준비 HTML · Webpage Preparation

번호 뽑기 웹페이지를 시작해요 Start the Number Draw Webpage

HTML 문서임을 선언하고 한국어, 글자 인코딩, 화면 너비와 페이지 제목을 정한 뒤 번호 뽑기 화면을 시작합니다. After declaring it as an HTML document and setting Korean, text encoding, screen width, and page title, it starts the number draw screen.

한 파일 방식에서는 꾸미기와 기능 코드도 index.html 안에 함께 들어갑니다.

결과 화면 Result Screen

무엇을 해 볼까요? What shall we do?코드를 찾거나, 직접 실행해 볼 수 있어요. You can find the code or run it directly.

랜덤 발표자 번호 뽑기 · random-picker Random Presenter Number Draw · random-picker

코드 찾기 중 Finding Code

발표 순서를 공정하게 Make the Presentation Order Fair

랜덤 발표자 번호 뽑기 Random Presenter Number Draw

한 번 뽑힌 번호는 다시 나오지 않아요. A number drawn once will not appear again.

학생 수 Number of Students

뽑힌 번호 Drawn Number ?

번호 뽑기 버튼을 눌러 보세요. Try clicking the draw number button.

뽑힌 번호 기록 Drawn Number History

남은 번호 Remaining Numbers 24개 ea

아직 뽑힌 번호가 없습니다. No number has been drawn yet.

화면에서 고른 부분 The Part Selected on the Screen 번호 뽑기 버튼 Number Draw Button

코드 찾기에서는 번호를 뽑지 않습니다. 대신 번호 뽑기 버튼을 만든 HTML과 남은 번호 배열에서 한 번호를 무작위로 고르는 JavaScript를 보여 줍니다. In Find Code, numbers are not drawn. Instead, it shows the HTML that created the draw number button and the JavaScript that randomly selects a number from the remaining numbers array.

응용 2 · 조건문과 점수 Application 2 · Conditionals and Score

웹 코딩 OX 퀴즈 살펴보기 Explore Web Coding OX Quiz

O 또는 X를 고르면 조건문이 정답을 비교하고, 안내 문장과 점수를 바꾸는 과정을 살펴봅니다.

현재 프로젝트 구성 Current Project Structure 코드 파일 1개 1 Code File

HTML, CSS, JavaScript 코드를 index.html 안에 함께 넣습니다.

ox-quiz/

index.htmlHTML + CSS + JavaScript

이 코드가 하는 일 What This Code Does

index.html HTML · 웹페이지 준비 HTML · Webpage Preparation

OX 퀴즈 웹페이지를 시작해요 Start the OX Quiz Webpage

HTML 문서임을 선언하고 한국어, 글자 인코딩, 화면 너비와 페이지 제목을 정한 뒤 OX 퀴즈 화면을 시작합니다. After declaring it as an HTML document and setting Korean, text encoding, screen width, and page title, it starts the OX quiz screen.

한 파일 방식에서는 꾸미기와 기능 코드도 index.html 안에 함께 들어갑니다.

결과 화면 Result Screen

무엇을 해 볼까요? What shall we do?코드를 찾거나, 직접 실행해 볼 수 있어요. You can find the code or run it directly.

웹 코딩 OX 퀴즈 · ox-quiz Web Coding OX Quiz · ox-quiz

코드 찾기 중 Finding Code

웹 코딩 기본 개념 Basic Web Coding Concepts

OX 퀴즈 OX Quiz

문장을 읽고 맞으면 O, 틀리면 X를 선택하세요. Read the sentence and choose O if correct, X if incorrect.

1 / 5 0점 0 Points

HTML은 웹페이지의 내용과 구조를 만드는 역할을 합니다. HTML plays the role of creating the content and structure of a webpage.

O 또는 X를 선택해 보세요. Please select O or X.

화면에서 고른 부분 The Part Selected on the Screen O·X 정답 버튼 O·X Answer Buttons

코드 찾기에서는 답을 제출하지 않습니다. 대신 O·X 버튼을 만든 HTML과 사용자가 고른 답을 현재 문제의 정답과 비교하는 JavaScript를 보여 줍니다. In Find Code, answers are not submitted. Instead, it shows the HTML that created the O·X buttons and the JavaScript that compares the answer chosen by the user with the correct answer to the current question.

심화 1 · 입력과 브라우저 저장 Advanced 1 · Input and Browser Storage

오늘 할 일 보드 살펴보기 Explore Today's To-Do Board

입력한 할 일을 배열에 담고 완료·삭제한 뒤, localStorage로 이 브라우저에 저장하는 과정을 살펴봅니다. We will look at the process of putting the entered task into an array, completing/deleting it, and then saving it to this browser using localStorage.

정보 출처 · 내 브라우저 Info Source · My Browser

localStorage는 로그인 없이 이 브라우저에 글자를 저장해요 localStorage saves text in this browser without logging in

서버로 보내는 기능이 아니므로 다른 컴퓨터나 다른 브라우저에는 자동으로 나타나지 않습니다. 브라우저 데이터를 지우면 함께 사라질 수 있습니다. Since it is not a function that sends to a server, it does not automatically appear on other computers or other browsers. It may disappear along with it when browser data is cleared.

현재 프로젝트 구성 Current Project Structure 코드 파일 1개 1 Code File

HTML, CSS, JavaScript 코드를 index.html 안에 함께 넣습니다.

today-board/

index.htmlHTML + CSS + JavaScript

이 코드가 하는 일 What This Code Does

index.html HTML · 화면 구조 HTML · Screen Structure

오늘 할 일 보드를 시작해요 Start the Today's To-Do Board

HTML 문서임을 선언하고, 페이지 제목과 할 일 입력 칸·추가 버튼·목록을 화면에 놓습니다.

한 파일 방식에서는 꾸미기와 저장 기능도 index.html 안에 함께 들어갑니다.

결과 화면 Result Screen

무엇을 해 볼까요? What shall we do?코드를 찾거나, 직접 실행해 볼 수 있어요. You can find the code or run it directly.

오늘 할 일 보드 · today-board Today's To-Do Board · today-board

코드 찾기 중 Finding Code

하루를 차근차근 Step by step through the day

오늘 할 일 Today's To-Dos

이 브라우저에 자동 저장 Auto Save to this Browser

0개 남음 0 Remaining 완료 0개 0 Completed

기능 실행을 누르면 할 일을 직접 적어 볼 수 있습니다. Click Function Execution to try writing a task yourself.

화면에서 고른 부분 The Part Selected on the Screen 할 일 입력과 추가 버튼 Task Input and Add Button

코드 찾기에서는 할 일을 추가하지 않습니다. 대신 글을 받는 입력 칸과 추가 버튼을 만든 HTML, 입력한 글을 할 일 배열과 localStorage에 저장하는 JavaScript를 보여 줍니다. In Find Code, tasks are not added. Instead, it shows the HTML that created the input field receiving text and the add button, and the JavaScript that saves the entered text in a to-do array and localStorage.

심화 2 · 인터넷 API와 최신 정보 Advanced 2 · Internet API and Latest Info

서울 날씨 API 살펴보기 Explore Seoul Weather API

fetch()로 Open-Meteo API에 요청을 보내고, JSON으로 받은 최신 날씨를 화면에 표시하는 과정을 살펴봅니다. We will look at the process of sending a request to the Open-Meteo API using and displaying the latest weather received in JSON on the screen.

정보 출처 · 인터넷 Info Source · Internet

API는 다른 서비스의 정보를 정해진 주소로 요청하는 방법이에요 API is a way to request information from other services to a specified address

이 교육 예시는 가입이나 인증 키 없이 호출할 수 있지만 인터넷 연결과 제공처의 이용 조건이 필요합니다. 서울의 미리 정한 좌표를 사용하므로 위치 권한은 묻지 않습니다. 날씨는 계속 흐르는 실시간 값이 아니라 API가 마지막으로 갱신한 최신 값입니다. This educational example can be called without sign-up or an authentication key, but requires an internet connection and the provider's terms of use. Since it uses preset coordinates for Seoul, it does not ask for location permissions. The weather is not a continuously flowing real-time value, but the latest value last updated by the API.

현재 프로젝트 구성 Current Project Structure 코드 파일 1개 1 Code File

HTML, CSS, JavaScript 코드를 index.html 안에 함께 넣습니다.

seoul-weather/

index.htmlHTML + CSS + JavaScript

이 코드가 하는 일 What This Code Does

index.html HTML · 결과 화면 구조 HTML · Result Screen Structure

날씨를 표시할 자리를 만들어요 Create a space to display the weather

HTML이 온도, 날씨 설명과 시각을 표시할 빈 칸을 준비합니다. HTML prepares empty spaces to display the temperature, weather description, and time.

JavaScript가 API 응답을 받은 뒤 온도, 날씨 설명, 바람과 기준 시각 칸에 받은 값을 넣습니다.

결과 화면 Result Screen

무엇을 해 볼까요? What shall we do?코드를 찾거나, 직접 실행해 볼 수 있어요. You can find the code or run it directly.

서울 날씨 확인 · seoul-weather Check Seoul Weather · seoul-weather

코드 찾기 중 Finding Code

버튼을 누를 때 인터넷에서 받는 정보 Information received from the internet when the button is clicked

서울 날씨 확인 Check Seoul Weather

Open-Meteo API · 인증 키 없이 실습 Open-Meteo API · Practice without an authentication key

아직 날씨를 가져오지 않았어요 The weather hasn't been fetched yet --°C

기능 실행을 누르고 최신 날씨를 요청해 보세요. Click Function Execution and request the latest weather.

체감 Feels Like: --°C
바람 Wind: -- km/h

코드 찾기는 버튼 기능을 실행하지 않습니다. 대신 날씨 요청과 관련된 코드를 보여 줍니다.

Weather data by Open-Meteo.com

화면에서 고른 부분 The Part Selected on the Screen 현재 날씨 가져오기 버튼 Fetch Current Weather Button

코드 찾기에서는 인터넷 요청을 보내지 않습니다. 대신 날씨 버튼을 만든 HTML과 버튼 클릭 때 fetch()로 Open-Meteo에 요청하는 JavaScript를 보여 줍니다. shows the JavaScript requesting Open-Meteo using .

응용 3 · 이미지와 코드 연결 Application 3 · Connect Image and Code

놀퀴즈 소개 웹페이지 살펴보기 Explore Nolquiz Intro Webpage

코드 찾기에서 결과 화면의 글자, 이미지, 링크 또는 버튼을 누르면 관련 코드가 바로 나타납니다.

현재 프로젝트 구성 Current Project Structure 코드 파일 1개 + 이미지 파일 4개 1 Code File + 4 Image Files

HTML, CSS, JavaScript 코드는 index.html에 모으고 이미지는 images 폴더에 따로 둡니다. HTML, CSS, and JavaScript codes are gathered in index.html, and images are kept separately in the images folder.

knolquiz-intro/

index.html

images/이미지 4장 4 Images

knolquiz-jumpmap.png

knolquiz-defence.png

knolquiz-battle.png

knolquiz-make10.png

내 웹페이지에 이미지가 보이는 세 가지 방법 보기 View three ways images appear on my webpage

1. 관련 코드 1. Related Code index.html HTML · 소개 내용과 파일 연결 HTML · Connect Intro Content and Files

2. 코드가 하는 일 2. What the Code Does 놀퀴즈 소개 내용을 화면에 만들어요 Create the Nolquiz intro content on the screen HTML이 제목, 이미지, 설명과 버튼의 순서를 정합니다. HTML determines the order of the title, image, description, and button.

3. 화면에서 확인 3. Check on the Screen 소개 페이지 전체 Full Intro Page

결과 화면 Result Screen

무엇을 해 볼까요? What shall we do?코드를 찾거나, 직접 실행해 볼 수 있어요. You can find the code or run it directly.

놀퀴즈 소개 · pinky-ne.com Nolquiz Introduction · pinky-ne.com

실행: 4초 자동 전환 Execution: 4-sec Auto Switch

pinky-ne.com 놀퀴즈 Nolquiz

재밌게 공부합시다. Let's study for fun.

1 / 4

4초마다 자동으로 바뀌는 중입니다. 이미지를 누르면 크게 볼 수 있습니다. It changes automatically every 4 seconds. Click the image to view it larger.

pinky-ne.com에서 놀퀴즈 보기 View Nolquiz at pinky-ne.com

기능 실행 중 Running Function 4초 자동 이미지 슬라이드 4-Second Auto Image Slide

JavaScript가 4초마다 현재 이미지 번호를 1씩 바꾸어 다음 이미지를 표시합니다. 기능 실행에서는 이전·일시정지·다음 버튼과 이미지 확대를 직접 시험해 보세요. JavaScript changes the current image number by 1 every 4 seconds to display the next image. In Function Execution, try testing the previous, pause, next buttons, and image enlargement yourself.

더 자세히 알아보기 Learn More in Detail

index.html HTML · 페이지 내용 HTML · Page Content

놀퀴즈 소개 화면의 내용을 만들어요 Create the content for the Nolquiz intro screen

HTML이 제목, 설명, 이미지와 링크를 읽는 순서대로 놓습니다. HTML places the title, description, image, and link in reading order.

HTML은 src에 적힌 경로를 따라 images 폴더의 이미지 파일을 불러옵니다.

확인하기 Check 기능 이해 점검 Function Understanding Check 화면에서 본 기능과 작동 원리를 세 가지 질문으로 확인합니다. Check the functions seen on the screen and their operating principles with three questions.

직접 만들기 Make It Yourself AI와 예시 웹페이지 만들어 보기 Try creating an example webpage with AI 간단한 요청문이나 자세한 요청문을 골라서 복사합니다. Choose and copy a simple or detailed request.

직접 만들어 보기 Try Making It Yourself

이해한 기능을 내 웹페이지에 하나씩 더해요 Add the understood features to my webpage one by one

예시와 똑같이 시작해도 되고, 필요한 기능만 AI에게 부탁해 내 프로젝트에 넣어도 됩니다. 코드를 붙여넣은 뒤에는 미리보기와 오류 내용을 직접 확인하세요. You can start exactly like the example, or ask the AI for only the necessary features and put them into your project. After pasting the code, directly check the preview and error contents.

새 프로젝트 시작 Start a New Project