Your first web page · 첫 번째 웹 페이지 만들기
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 이 페이지는 최신 브라우저(SharedArrayBuffer 지원)가 필요합니다. Chrome, Edge, Firefox 또는 Safari를 최신 버전으로 업데이트해 주세요.
English
Welcome to the web
- A web page is made with HTML.
- HTML is just text with tags around it.
- You write HTML here and watch it appear — nothing to install.
한국어
웹에 오신 것을 환영합니다
- 웹 페이지는 HTML로 만들어집니다.
- HTML은 태그로 둘러싸인 단순한 텍스트일 뿐입니다.
- 여기서 HTML을 작성하면 화면에 나타납니다 — 설치가 필요 없습니다.
English
How this page works
- Type in the box, then press ▶ to see your page.
- Press ✓ Check to see if your task is correct.
- Stuck? Press 💡 for a hint. Press ↻ to start over.
- Read each step, then press Continue.
한국어
이 페이지 작동 방식
- 상자에 입력한 후 **▶**를 눌러 페이지를 확인하세요.
- ✓ 확인(Check) 을 눌러 작업이 올바른지 확인하세요.
- 막히셨다면 **💡**를 눌러 힌트를 얻으세요. **↻**를 눌러 처음부터 다시 하세요.
- 각 단계를 읽고 계속하기를 누르세요.
English
Tags wrap your words
- A tag is a word inside angle brackets, like
<p>. - Most tags come as a pair: an opening
<p>and a closing</p>. - A
<p>makes a paragraph — a block of text.
한국어
태그가 단어를 감쌉니다
- 태그(tag) 는 각괄호 안의 단어입니다. 예:
<p>. - 대부분의 태그는 쌍(pair) 으로 존재합니다: 여는
<p>와 닫는</p>입니다. - A
<p>는 段落 — 텍스트 블록을 생성합니다.
<p>Hello! This is my first web page.</p>
English
More than one paragraph
- Put each paragraph in its own pair of
<p>tags. - The browser shows them one after another, top to bottom.
한국어
段落가 여러 개일 경우
- 각 段落를 별도의
<p>태그 쌍에 넣으세요. - 브라우저는 위에서 아래로 순서대로 보여줍니다.
<p>I am learning HTML.</p>
<p>This is fun.</p>
English
Common mistakes
- Tags go in angle brackets; the text you see goes between them.
- Most tags come in pairs, like
<p>...</p>.
한국어
흔한 실수
- 태그는 각괄호 안에, 보이는 텍스트는 그 사이에 배치됩니다.
- 대부분의 태그는 쌍으로 존재하며, 예를 들어
<p>...</p>처럼요.
English
Now you try
- Below are two small tasks. Type your HTML and press ▶ to see it.
- Press ✓ Check when you think it is right. You can try as many times as you like.
한국어
이제 직접 해보기
- 아래에는 두 가지 작은 작업이 있습니다. HTML을 입력하고 **▶**를 눌러 확인하세요.
- 맞다고 생각하면 ✓ Check를 누르세요. 원하는 만큼 여러 번 시도할 수 있습니다.
Explore · 탐색하기
HTML is a tree of nodes · HTML은 노드의 나무입니다
Tags nest inside tags — the browser builds a tree (the DOM). · 태그는 태그 안에 중첩됩니다 — 브라우저는 나무 구조(DOM)를 만듭니다.
Write a paragraph that says Hello, world! — type your text between the <p> and </p> tags. · **Hello, world!**라고 말하는 문단을 작성하십시오 — 텍스트를 <p>과 </p> 태그 사이에 입력하십시오.
Add a second paragraph below the first one. Make it say I made this. (Use a new pair of <p> … </p> tags.) · 첫 번째 문단 아래에 두 번째 문단을 추가하십시오. **I made this.**라고 쓰게 하십시오. (새로운 <p> … </p> 태그 쌍을 사용하십시오.)