이지웹 스쿨 EasyWeb School

만들기 전에 알아둘 내용 Things to know before making

웹페이지 기초 Web Basics

프로젝트 폴더 안의 파일이 어떤 일을 하는지 알아보세요. 시간표의 수업명은 어느 파일에 적혀 있는지, 퀴즈 점수는 브라우저가 언제 계산하는지, 날씨 값은 어느 인터넷 서비스에 요청해 받는지도 필요한 부분만 골라 살펴볼 수 있습니다.

Find out what the files in the project folder do. You can choose to explore specific parts, such as which file contains the class names for the timetable, when the browser calculates quiz scores, or which internet service is requested to get weather data.

index.html 내용과 구조 Content and structure
style.css 모양과 배치 Style and layout
script.js 데이터와 동작 Data and behavior

웹 프로젝트 폴더 이해하기 Understanding Web Project Folders

웹페이지에 필요한 파일을 한 폴더에 함께 둡니다 Keep all required web page files in one folder

프로젝트 폴더는 웹페이지의 글, 꾸미기, 동작, 이미지를 이루는 파일을 함께 보관하는 작업 폴더입니다. 브라우저는 먼저 index.html을 열고, 그 안에 적힌 위치를 따라 다른 파일을 찾아옵니다.

The project folder is a working directory where files containing the text, styling, interactions, and images of a web page are stored together. The browser opens index.html first and then fetches other files based on the paths written inside it.

  1. index.html부터 엽니다.웹페이지에 보여 줄 제목, 글, 버튼 같은 내용을 읽습니다.
    Starts with index.html.It reads contents to show on the page, like titles, text, and buttons.
  2. 연결된 파일을 찾아옵니다.style.css, script.js, images/cat.png처럼 index.html에 적힌 위치의 파일을 불러옵니다.
    Fetches linked files.It loads files at the locations specified in index.html, such as style.css, script.js, and images/cat.png.
  3. 파일 이름이나 위치가 바뀌면 연결도 고칩니다.예를 들어 cat.png를 다른 폴더로 옮겼다면 index.html에 적은 이미지 위치도 바꿔야 합니다.
    Updates links if file names or paths change.For example, if you move cat.png to another folder, you must also update the image path written in index.html.
내-웹사이트/
├─ index.html
├─ style.css        꾸미기를 나눌 때
├─ script.js        동작을 나눌 때
└─ images/          이미지를 쓸 때
   └─ cat.png
my-website/
├─ index.html
├─ style.css        For styling
├─ script.js        For behavior
└─ images/          For images
   └─ cat.png

기억하기 index.html 하나만으로도 시작할 수 있습니다. 새 프로젝트에서 만든 파일은 비어 있으며, 코드를 넣기 전에는 빈 화면이 보이는 것이 정상입니다.

Remember You can start with just index.html. Newly created files in a project are empty, and it is normal to see a blank screen before you add any code.

기본 역할 Basic Roles HTML·CSS·JavaScript는 어떤 일을 하나요? What do HTML, CSS, and JavaScript do? 세 파일의 역할과 연결 방법을 먼저 확인합니다. First, let's check the roles of the three files and how to connect them.

세 가지 기본 언어 Three basic languages

화면에서 하는 일을 역할별로 나누어요 Divide what happens on screen by role

파일 이름과 문법을 모두 외우기보다, 화면에서 바꾸고 싶은 부분이 내용인지, 모양인지, 동작인지 먼저 구분해 보세요.

Rather than memorizing all file names and syntax, try to first distinguish whether the part you want to change on the screen is content, style, or behavior.

HTML

내용과 순서를 만듭니다

Creates content and structure

HTML은 제목, 글, 이미지, 버튼처럼 화면에 보여 줄 내용을 정하고 순서대로 놓습니다. index.html 안에 CSS와 JavaScript를 함께 넣을 수도 있습니다.

HTML defines what content to display on the screen, such as headings, text, images, and buttons, and places them in order. You can also put CSS and JavaScript directly inside index.html.

CSS

모양과 배치를 정합니다

Defines style and layout

CSS는 HTML이 만든 제목, 버튼, 이미지의 글자 크기, 색, 간격과 위치를 바꿉니다. CSS를 별도 파일로 나눌 때는 HTML에서 style.css를 연결해야 합니다.

CSS changes the font size, color, spacing, and position of the headings, buttons, and images created by HTML. If you separate CSS into its own file, you must link style.css in your HTML.

JavaScript

데이터와 동작을 바꿉니다

Controls data and behavior

JavaScript는 버튼 클릭을 알아내고, 퀴즈 점수를 계산하고, 화면의 글이나 움직이는 대상의 위치를 바꿉니다. JavaScript를 별도 파일로 나눌 때는 HTML에서 script.js를 연결해야 합니다.

JavaScript detects button clicks, calculates quiz scores, and changes text on the screen or the position of moving targets. If you separate JavaScript into its own file, you must link script.js in your HTML.

세 파일은 자동으로 연결되지 않습니다. HTML 안에서 CSS 파일과 JavaScript 파일의 위치를 정확하게 적어야 함께 작동합니다.

The three files are not connected automatically. You must write the exact paths for the CSS and JavaScript files inside the HTML for them to work together.

코드 기능 Code Features 예시 웹페이지에 사용된 기능 이름 알아보기 Learn feature names used in example web pages 시간표의 표, 모바일 배치, 버튼 동작을 어떤 기능으로 만들었는지 화면과 연결해 확인합니다. Connect what you see on the screen to how the timetable table, mobile layout, and button behaviors were created.

화면의 기능과 코드 용어 연결하기 Connecting Screen Features to Code Terms

화면에서 구현된 기능을 찾고, 그 기능의 코드 이름을 함께 알아봅니다 Find features on the screen and learn their code names together

예를 들어 시간표를 행과 열로 보여 주는 기능에는 HTML의 <table>을 사용할 수 있습니다. 컴퓨터에서 세 칸인 화면을 휴대폰에서 한 칸으로 바꾸는 기능에는 CSS의 @media를, 여러 퀴즈 문제를 순서대로 보관하는 기능에는 JavaScript의 배열을 사용할 수 있습니다.

For instance, to show a timetable with rows and columns, you can use HTML's <table>. To change a three-column screen on a computer to a single column on a phone, you can use CSS's @media. To store multiple quiz questions in order, you can use JavaScript arrays.

  1. 1. 화면에서 바꾸고 싶은 부분을 찾습니다.예: 휴대폰에서 카드가 너무 좁게 보입니다.
    1. Find the part of the screen you want to change.Ex: Cards look too narrow on a mobile phone.
  2. 2. 원하는 결과를 구체적으로 말합니다.예: 휴대폰에서는 카드를 세로로 한 장씩 보여 주세요.
    2. Describe the desired result specifically.Ex: Please show cards vertically one by one on a mobile phone.
  3. 3. 알게 된 기능 이름을 요청에 덧붙일 수 있습니다.예: @media를 사용해 모바일 배치를 바꿔 주세요. 이름을 기억하지 못해도 2번처럼 화면의 변화를 정확히 설명하면 됩니다.
    3. You can add the feature name you learned to your request.Ex: Please use @media to change the mobile layout. Even if you don't remember the name, just describing the visual change accurately like in step 2 is fine.

HTML

화면 내용의 역할 나타내기

Indicating the role of screen content

HTML 태그는 제목, 메뉴, 버튼처럼 각 내용이 맡은 역할을 브라우저에 알려 줍니다.

HTML tags tell the browser the role of each piece of content, like headings, menus, and buttons.

<input>
사용자가 “수학 숙제” 같은 글을 키보드로 입력하는 칸을 만듭니다.
<input>
Creates a field where the user can type text like "Math homework" on the keyboard.
<form>
입력 칸과 제출 버튼을 한 묶음으로 만듭니다. 오늘 할 일 예시처럼 입력한 글을 화면 목록에 추가하거나 브라우저에 저장하려면 JavaScript가 필요합니다.
<form>
Groups an input field and a submit button together. Like the to-do list example, you'll need JavaScript to add typed text to the screen list or save it to the browser.
<table>
시간표처럼 가로줄과 세로줄이 있는 표의 내용을 만듭니다.
<table>
Creates table content with rows and columns, like a timetable.
링크·이미지
<a>는 사용자가 링크를 누르면 href에 적힌 주소로 이동하게 합니다. <img>는 src에 적힌 파일 경로나 인터넷 주소에서 이미지 한 장을 불러와 보여 줍니다.
Links & Images
<a> makes the browser go to the address in href when a user clicks the link. <img> loads and displays an image from a file path or URL written in src.

CSS

한 줄과 여러 칸 배치하기

Laying out single lines and multiple cells

Flexbox는 메뉴 항목처럼 여러 요소를 가로 한 줄이나 세로 한 줄에 놓습니다. Grid는 시간표처럼 화면을 여러 행과 열로 나누고 각 요소를 원하는 칸에 놓습니다.

Flexbox places multiple elements in a single horizontal or vertical line, like menu items. Grid divides the screen into multiple rows and columns like a timetable, placing each element in a desired cell.

반응형
@media로 화면 너비에 따라 배치를 바꿉니다. 컴퓨터의 세 칸을 휴대폰에서는 한 칸씩 보여 줄 수 있습니다.
Responsive
Use @media to change layouts based on screen width. You can show three columns from a PC as a single column on a phone.
전환
transition은 버튼 배경색이 기존 색에서 새 색으로 바뀌는 과정을 지정한 시간 동안 이어서 보여 줍니다.
Transitions
transition smoothly animates a change, like a button's background color changing from an old color to a new one over a specified duration.
애니메이션
@keyframes로 시작 모습과 끝 모습을 정해 이미지가 움직이는 것처럼 보이게 합니다.
Animations
Use @keyframes to define starting and ending states, making images appear to move.

JavaScript

값을 확인하고 화면 바꾸기

Checking values and changing the screen

조건문, 배열, 반복, 이벤트는 서로 다른 개념이며, 필요한 기능에 따라 함께 연결해 쓰기도 합니다.

Conditionals, arrays, loops, and events are distinct concepts. They are often combined together depending on the needed functionality.

조건문
공이 게임판 아래로 떨어졌는지처럼 조건을 확인하고, 결과에 따라 시작 위치로 돌려보낼지 결정합니다.
Conditionals
Check a condition, such as whether a ball fell off a game board, and decide whether to send it back to the start based on the result.
배열
OX 퀴즈 문제나 시간표 과목처럼 관련된 값을 순서대로 모아 둡니다.
Arrays
Store related values in order, like True/False quiz questions or timetable subjects.
반복
배열의 할 일 다섯 개를 차례로 읽어 화면에 목록 다섯 줄을 만드는 것처럼 같은 일을 여러 번 실행합니다.
Loops
Execute the same action multiple times, like reading five to-do items from an array to create a five-line list on the screen.
이벤트
사용자가 버튼이나 방향키를 누른 순간을 알아내고 정해진 동작을 실행합니다.
Events
Detect the exact moment a user presses a button or arrow key, and execute a predefined action.
정보 출처 Information Sources 웹페이지에 표시되는 글과 값은 어디에서 만들어질까요? Where are the texts and values shown on the web page created? 시간표 수업명, 퀴즈 점수, 할 일 글, 날씨 값을 예로 들어 비교합니다. Let's compare using timetable subjects, quiz scores, to-do texts, and weather values as examples.
화면에 글이나 숫자가 표시되는 방법은 서로 다릅니다 How text or numbers are displayed on screen differs 코드에 미리 적은 정보, 브라우저가 계산하거나 저장한 정보, 인터넷 서비스에서 받은 정보를 구분해 볼게요 Let's distinguish between information hard-coded, calculated/saved by the browser, and received from internet services
소개 글과 시간표 수업명은 코드 파일에 미리 작성

소개 글이나 시간표 수업명을 HTML 또는 JavaScript 파일에 적습니다. 파일을 고쳐 다시 배포하기 전까지 방문자는 같은 글과 수업명을 봅니다.

Introduction text and timetable classes are pre-written in code files

You write intro texts or timetable classes in HTML or JavaScript files. Visitors will see the same text and classes until you edit the files and redeploy.

퀴즈 점수는 JavaScript로 계산하고 할 일 글은 localStorage에 저장

사용자가 답을 누르면 JavaScript가 정답과 비교해 점수를 계산합니다. 할 일 글은 localStorage에 저장하므로 같은 기기와 브라우저에서 새로고침한 뒤에도 남습니다.

Quiz scores are calculated by JavaScript, and to-do lists are saved in localStorage

When a user clicks an answer, JavaScript checks it against the correct answer to calculate the score. To-dos are saved in localStorage, so they remain even after refreshing on the same device and browser.

서울 날씨 값은 버튼을 누를 때 인터넷 서비스에서 받음

날씨 가져오기 버튼을 누르면 JavaScript가 Open-Meteo에 요청합니다. 온도와 날씨 상태는 프로젝트 파일에 미리 적은 값이 아니라 요청할 때 받은 값입니다.

Seoul weather data is fetched from an internet service when a button is clicked

When you press the Get Weather button, JavaScript sends a request to Open-Meteo. The temperature and weather conditions are not pre-written in project files, but retrieved upon request.

기억하기 웹페이지의 글이나 숫자가 바뀌어도 모두 인터넷에서 받은 실시간 정보는 아닙니다. JavaScript가 브라우저 안에서 계산한 값일 수도 있습니다. 인터넷 서비스에서 받은 값도 그 서비스가 마지막으로 기록한 정보이므로, 사용자가 요청한 시각의 상태와 조금 다를 수 있습니다.

Remember Just because text or numbers change on a webpage doesn't mean they are real-time internet data. It might be calculated by JavaScript locally in the browser. Values retrieved from internet services are also based on when they were last recorded, so they might slightly differ from the exact state when requested.

다음 단계 Next Step

실제 예시 화면에서 확인해 보세요 Check it out on actual example screens

시간표, 번호 뽑기, 퀴즈, 저장 기능, 인터넷 날씨와 게임 예시를 보면서 방금 살펴본 역할이 어느 코드에 들어 있는지 확인할 수 있습니다.

By looking at examples like timetables, random number generators, quizzes, save features, internet weather, and games, you can see which code implements the roles we just covered.

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