쉐도잉 연습: HTML Links and Navigation Explained | HTML for Beginners #5 - 영상으로 영어 말하기 배우기
연습 모드 선택
각 모드는 전체 화면 연습실로 열립니다.
86 문장
문장이 너무 짧거나 길면 Edit를 눌러 조정하세요.
1
Welcome back to TechAura!
2
Imagine visiting a website and finding absolutely no clickable links.
3
You couldn't visit another page, open an article, or navigate to another website.
4
That would make browsing the internet pretty difficult, right?
5
Luckily, HTML gives us something called hyperlinks.
6
They're what make it possible to connect web pages together.
7
Today, you'll learn how to create clickable links, navigate between pages, and even build your first navigation menu.
8
Let's get started.
9
Let's start with the basics.
10
A HTML link, also called a hyperlink, connects one web page to another resource.
11
That resource could be another web page, a website, a document, or even a specific section of the current page.
12
When you click a link, your browser follows its destination.
13
This is one of the most important features of the World Wide Web.
14
But how do we create one?
15
Let's find out!
16
To create a link in HTML, we use the A element.
17
A stands for anchor.
18
Here's a simple example.
19
We start with the opening A tag.
20
Inside it, we have something called an attribute.
21
It's called href.
22
href specifies where the link should take the user.
23
In this example, the destination is Google's website.
24
Then, between the opening and closing tags, we write the text that users can click.
25
Here, it's visit Google.
26
Finally, we close the A element.
27
Now, let's see the result.
28
And that's it, you've just created your first HTML hyperlink.
29
Let's take a closer look at href.
30
href is short for hypertext reference.
31
It tells the browser the destination of the link.
32
There are different ways to use it.
33
First, we have external links links.
34
These take users to another website.
35
For example, when someone clicks this link, the browser navigates to YouTube.
36
Next, we have internal links.
37
These take users to another page within your own website.
38
For example, this link points to a page called About HTML.
39
Notice that we don't need to write the complete website address when linking to a page in the same website.
40
The browser uses the relative path to find the destination.
41
Now, what if you want a link to open in a new browser tab instead of replacing the current page?
42
HTML provides an attribute called target.
43
When we use target with the value blank, the browser opens the destination in a new tab or window.
44
Here's an example.
45
We add target equals blank inside our anchor tag.
46
And that's all.
47
But there's one more detail worth knowing.
48
For external links that open in a new tab, adding rel equals no opener is a good security practice.
49
It prevents the newly opened page from accessing the original page through the browser's opener property.
50
So remember, href defines the destination, target controls where the link opens, and no opener adds an important security protection.
51
Now, let's use everything we've learned to create something practical.
52
A navigation menu.
53
Most websites have a navigation menu at the top.
54
It helps visitors move between different sections or pages.
55
To create one, we use the nav element.
56
Nav represents a section of a web page containing navigation links.
57
Inside it, we add our anchor elements.
58
Let's create four links.
59
The home link, the about link, the services link, and the contact link.
60
Each link has its own destination.
61
And just like that, we've created a simple HTML navigation menu.
62
Now, you might be wondering why the menu doesn't look very beautiful.
63
That's because we're only using HTML.
64
We'll learn how to style navigation menus using CSS in a future lesson.
65
Here's another useful trick.
66
You can create a link that takes visitors directly to a specific section of the same web page.
67
We call this an anchor link.
68
First, we give an element a unique ID.
69
In this example, our heading has an ID called contact.
70
Then, we create a link using href with a hashtag followed by that ID.
71
When someone clicks the link, the browser navigates to the element with the matching ID.
72
This is especially useful for long articles, frequently asked questions, and table of contents sections.
73
Now it's your turn, let's test what you learned.
74
Your challenge is to create a simple navigation menu for your own website.
75
It must contain a home link, an about link, a contact link, one external link to Google,
76
and one link that takes visitors to a specific section of your web page.
77
Pause the video and try writing the code yourself.
78
Excellent!
79
You've just created your first navigation menu and learned how to connect different pages and sections.
80
You're making great progress!
81
And that's everything for Episode 5!
82
Today, you learned how to create hyperlinks, use the href attribute, open links in new tabs, and build a simple navigation menu.
83
In our next episode, we'll discover how to add images to web pages using HTML.
84
Don't forget to subscribe to TechHora.
85
Keep learning, keep building, and stay curious.
86
See you in episode 6!
앱 다운로드
유창하게 말하는 데 필요한 모든 것
AI 발음 평가문장마다 점수 확인
IPA 발음 연습모든 소리 마스터
단어 학습나만의 단어장 만들기
단어 게임놀면서 외우기
FOR YOU
추천 영상
B12
291 문장
HTML Tag Text Basics | HTML5 Element Text Tutorial
Daily ConversationUniversity Students
A28
103 문장
English Podcast - Level A1 - A2 | Your Future With English
Travel EnglishTeensDaily Conversation
B21
103 문장
you will never ask about pointers again after watching this video
Daily ConversationUniversity Students
B11
347 문장
React Native for Beginners tutorial
Daily ConversationUniversity Students
B11
92 문장
Understanding the Elements of Design | Graphic Design Basic
Daily ConversationUniversity Students
B11
371 문장
Learn 97% of Harvard's CS50 in 25 minutes
Daily ConversationUniversity Students
B26
24 문장
Usability Heuristic 3: User Control & Freedom
Daily ConversationUniversity StudentsWorking Adults
B21
22 문장
Introduction To Networking - Different Types Of Networks | Networking Fundamentals Part 2 (revised)
Daily ConversationUniversity Students
B2120 문장
LINUX isn't Hard Once You Understand This (File Directories)
Daily ConversationUniversity Students
C11
466 문장
DejaVue #E001 - The Need for Server-Side Rendering (SSR)
Daily ConversationUniversity Students
B1119 문장
Links | HTML | Tutorial 8
Daily ConversationUniversity Students
B114 문장
The Internet and Us
Daily ConversationUniversity Students
이 레슨의 어휘와 말하기 포인트
이 말하기 레슨은 영상 “HTML Links and Navigation Explained”을(를) 바탕으로 합니다. 가장 자주 반복되는 단어는 다음과 같습니다: link, page, create, website, Html. 이 영상에는 섀도잉할 문장 86개와 단어 824개가 있습니다. 말하는 구간의 길이는 5:20입니다. 화자는 분당 약 154단어로, 일상 대화에 가까운 자연스러운 속도로 말합니다. 영어에서 가장 많이 쓰이는 3,000단어에 속하는 단어가 79%뿐이라 어휘가 어려운 편입니다.
이 영상의 핵심 어휘
영상에 나오는 익혀 둘 만한 단어 15개를 발음, 뜻과 함께 정리했습니다.
| 단어 | 발음 | 뜻 |
|---|---|---|
| menu 명사 | /ˈmɛn.juː/ | 메뉴, 메뉴판 |
| navigation 명사 | /nævɪˈɡeɪʃən/ | 내비게이션, 항법 |
| destination 명사 | /dɛstɪˈneɪʃən/ | 목적지 |
| element 명사 | /ˈɛləmənt/ | 요소 |
| anchor 명사 | /ˈæŋ.kəː/ | 닻, 정 |
| connect 동사 | /kəˈnɛkt/ | 잇다, 연결하다 |
| visitor 명사 | /ˈvɪzɪtɚ/ | 방문객, 손님 |
| attribute 명사 | /ˈæt.ɹɪˌbjut/ | 속성, 특질 |
| resource 명사 | /ɹɪˈzɔːs/ | 자원 |
| practical 형용사 | /ˈpɹæk.tɪ.kəl/ | 실질적인 |
| relative 명사 | /ˈɹɛl.ə.tɪv/ | 친척 |
| lesson 명사 | /ˈlɛs.ən/ | 수업, 과 |
| curious 형용사 | /ˈkjʊɹ.i.əs/ | 호기심이 많은, 궁금하다 |
| discover 동사 | /dɪˈskʌvə/ | 발견하다 |
| subscribe 동사 | /səbˈskɹaɪb/ | 구독하다 |
이 영상의 문법
화자가 가장 많이 쓰는 문형을 영상 속 실제 표현과 함께 정리했습니다.
| 문형 | 영상 속 표현 |
|---|---|
| 현재완료 have/has + 과거분사 — 과거의 일이 지금도 관련이 있을 때 | you've just created · we've learned · we've created |
| “will” 미래 will + 동사 — 결정, 약속 또는 예측 | you'll learn · We'll learn · we'll discover |
| 현재진행 am/is/are + -ing — 지금 또는 요즘 일어나고 있는 일 | we're only using · You're making |
| 의무: must / have to / need to 어떤 일이 필요하다고 말할 때 | need to write · must contain |
주의할 발음
화자는 don't, we'll, we've 같은 축약형과 약화된 형태를 14번 사용합니다. 들리는 대로 짧게 발음하세요.
- “sh”와 “zh” 소리: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/, hashtag /ˈhæʃˌtæɡ/
- 긴 단어 — 강세 위치에 주의: navigation /nævɪˈɡeɪʃən/, destination /dɛstɪˈneɪʃən/
한국어 화자가 어려워하는 소리:
- /f/ — ㅍ(/p/)으로 바꾸지 말고 윗니를 아랫입술에 대기: define /dɪˈfaɪn/, specify /ˈspɛs.əˌfaɪ/
- /v/ — ㅂ(/b/)과 구별하기: navigation /nævɪˈɡeɪʃən/, navigate /ˈnæv.ɪ.ɡeɪt/, visitor /ˈvɪzɪtɚ/, relative /ˈɹɛl.ə.tɪv/, discover /dɪˈskʌvə/
- /z/ — ㅈ이 아니라 성대를 울리는 /s/: browser /ˈbɹaʊ.zəɹ/, visitor /ˈvɪzɪtɚ/, resource /ɹɪˈzɔːs/, pause /pɔːz/, browse /bɹaʊz/
이 영상으로 연습하는 방법
- 먼저 말하지 않고 영상을 끝까지 듣고 모르는 단어를 적어 둡니다.
- 0.75배속으로 한 문장씩 섀도잉을 시작하고, 익숙해지면 보통 속도로 돌아갑니다.
- 자신의 목소리를 녹음해 원본과 비교하고, menu, navigation, destination 같은 단어에 특히 주의합니다.
쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법
쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.