쉐도잉 연습: HTML Lists Tutorial | HTML5 List Types: Ordered, Unordered & Description - 영상으로 영어 말하기 배우기

연습 모드 선택

각 모드는 전체 화면 연습실로 열립니다.

149 문장

문장이 너무 짧거나 길면 Edit를 눌러 조정하세요.

Hello and welcome.

Hi, I'm Dave.

This tutorial is part of a beginners HTML series.

I'll be using the Chrome web browser, the Visual Studio Code editor, and the live server extension for Visual Studio Code to view the web page.

There are links to these tools, starter code files, and all resources in the description below.

Let's look at how to create lists on a web page.

Lists are very useful and are used in many places on the web.

So we have three different types of lists we're going to create today.

Ordered lists, unordered lists, and description lists.

Let's start out with recapping here.

We've got Visual Studio Code on the left, and I've got the head element collapsed.

So we had meta details inside of there.

We can collapse that by clicking on the arrow by the line

and you see between lines between four and 11 are now collapsed.

So we're working inside of the body element to add content to the page.

And this is Visual Studio Code and I'm running the live server extension.

You can see down here it says port 5500 click to close server.

If you've installed the live server extension it may say click to launch

or something like that which would actually launch your web page for you because that's how you want to view it

in a development environment you don't want to just go to file

and open the file in your browser you want to have

that live server running that simulates a web server

if you're not familiar with the live server extension you can click on the extensions logo here

and instead of searching for prettier

that i have in there you can search for live server

and you can install that live server extension by writwick day right here okay

so we've recapped all of

that here's the file tree with our files i'm going to hide

that by clicking the file explorer here

so we can see more of our code

and we will add lists to our web page today

so i'll scroll down to under the subtopic of my daily schedule

and notice how we had these line breaks

and spaces here well we're going to replace these

so I'm highlighting the first one and then I'm going to press ctrl D

that highlights the next one

and ctrl D again now it has highlighted all three of those

and instead of this line break I'm going to type LI

and press tab that adds a list item

but we haven't enclosed this in a list yet

and we definitely don't need the closing list items here

so once again ctrl D ctrl D so all three of these will be list items, but they need to be inside of a list too.

So let's make this an ordered list by starting out with an OL

and I'll press tab and we got the closing OL tag as well.

That stands for ordered list as you might expect.

And I'm going to actually put the OL down here after the paragraph tag, the closing paragraph tag, and I'm going to cut with control X

or you could retype if you want to

and I pasted the closing paragraph tag right after the end of let me tell you how.

So this is a shortened paragraph now and the list will not be inside of the paragraph.

Now we have our ordered list but it also needs closing li text.

So I'm going to type the less than symbol

and a slash in Visual Studio Code instantly filled in the closing the rest of what is needed there

and i'll do that again for the second one

and then i'll do that here for the last one

and notice we do have the abbreviation still nested inside of the list item here

so now i'm going to press ctrl s and save

and visual studio code reformatted that just a little for me

but look at our page now that we've added this list it's an ordered list and it is numbered

That means it's in order, numerical order, one, two, and three.

Notice these are not, this text is not enclosed inside of a paragraph element.

So it's not creating that extra space that a paragraph element does.

They're stacked right on top of each other.

There's still a little bit of space, but not like we have between our paragraphs.

So that is an ordered list.

We start out with the ordered list element,

and then the list items go inside it and each list item is starting and then ending with the LI.

Now let's scroll down and look at our vacation area.

It says I'm also planning a vacation and we've got a places I would like to visit area.

So after that, let's go ahead and add a UL, which as you might guess stands for unordered list.

And we'll go ahead and cut that closing tag.

And I want to put it after the address here at the bottom

so this will be our full list now we need to declare list items here

In this instance, I'm going to go ahead and keep the paragraph tags inside each list item.

So we created an LI there, and I'll use

Control -X to cut and close that first list item here for the first paragraph.

I'll do something similar here.

Got an LI, but the closing one is going to be in a different spot

because our list item can have these tags nested within it, just like we nested the paragraph here.

I'm going to go ahead and nest the paragraph and the address inside of the list item here.

And so now if I save and Visual Studio Code reformatted my code for me, but notice here's the beginning of the list item,

and we have the end way down here after the address.

So let's look at what this unordered list looks like on our page.

And you can see instead of numbers, it has dots.

It does have the extra space created by the paragraph tags

and the address element still has the content that it had before

and still formatted the same but notice our ordered list

and our unordered list are both indented compared to being over here flush to the left with everything else

we had like they were before

so similar in formatting from an ordered list to an unordered list

and also realize

that the really the only difference is the bullet point here in an unordered list versus the number in an ordered list.

The extra spaces were caused by the paragraph element inside of these unordered list items,

and we did not use a paragraph element on these ordered list items.

So the list itself and the list items did not create the extra space.

That was created by the paragraph elements.

Now let's scroll our page.

We've got enough content.

We need to make sure we're visiting in the very bottom here, we want to add more under place I want to avoid.

And I'm going to change that to places I want to avoid.

100

And let's go ahead and remove our paragraph that says anywhere cold, no way.

101

And let's add a description list here.

102

So a description list, as you might guess, starts with DL.

103

Now inside the description list, there are two different types of elements instead of just an

104

li like we had in our other lists for a list item we have a description term

105

and this description term could be the place we want to talk about

106

so let's say the north pole

107

and now for the description term we need to also have description details

108

so that's dd and here i can put i hear this is now let's go ahead

109

and put our strong emphasis back here

110

And I'll put cold and then our exclamation mark.

111

So we have put a strong emphasis on cold.

112

And now I'll create an extra line here just to space these apart.

113

Another DT.

114

I'll put the south pole.

115

And then DD for the details, description details.

116

And I'll say this is also cold.

117

And let's add one more description term and this will be mountaintops and DD for description details.

118

And these, if I spell these, these are also cold.

119

Now, if we save, let's scroll just a little bit more so we can see all of our content here.

120

You can see our description list has a different format than the ordered list and the unordered list.

121

Our description term is to the left, and then the description details are indented to the right.

122

But here is our full list of the North Pole, South Pole, and mountaintops.

123

We want to avoid all of these places when we go on our vacation.

124

With these new lists now added to our file, let's go ahead and create an error on purpose just to see

125

if we have an error in our page when we check it at our validator .w3 .org.

126

And here I'm going to choose file upload.

127

And I may have to switch folders.

128

Let's see.

129

No, I'm in the right one.

130

So I'll just choose index .3.

131

I think we're on lesson four and I forgot to change the file,

132

but I'll do that to make sure that the GitHub repo with all the source code is correct.

133

So let's go ahead and check this file

134

and yes we have some errors because we created one specifically let's see

135

if that's our only error as we have noted in the past one error can create a cascade

136

or a lot of errors so now I've formatted this correctly let's go ahead

137

and load our file back up so we'll choose file

138

We'll choose that index .html file again, and click check.

139

Now, everything is okay.

140

Document checking complete.

141

No errors or warnings to show.

142

So realize if you have an error, it could just be one small syntax error that creates a cascade of errors when we're checking.

143

But this is a great way to learn and, of course, look at the details of the code

144

and it's always a good idea to validate your code after

145

you write it to make sure you don't have any syntax errors.

146

Remember to keep striving for progress over perfection and a little progress every day will go a very long way.

147

Please give this video a like if it's helped you and thank you for watching and subscribing.

148

You're helping my channel grow.

149

Have a great day and let's write more code together very soon.

앱 다운로드

유창하게 말하는 데 필요한 모든 것

AI 발음 평가문장마다 점수 확인

IPA 발음 연습모든 소리 마스터

단어 학습나만의 단어장 만들기

단어 게임놀면서 외우기

QR 스캔

Download on theApp Store Get it onGoogle Play

같은 채널

FOR YOU

이 레슨의 어휘와 말하기 포인트

이 말하기 레슨은 영상 “HTML Lists Tutorial”을(를) 바탕으로 합니다. 가장 자주 반복되는 단어는 다음과 같습니다: paragraph, item, description, code, file. 이 영상에는 섀도잉할 문장 149개와 단어 1796개가 있습니다. 말하는 구간의 길이는 10:45입니다. 화자는 분당 약 167단어로, 일상 대화에 가까운 자연스러운 속도로 말합니다. 단어의 84%가 영어에서 가장 많이 쓰이는 3,000단어에 속합니다. 나머지는 연습 전에 미리 확인해 두세요.

이 영상의 핵심 어휘

영상에 나오는 익혀 둘 만한 단어 15개를 발음, 뜻과 함께 정리했습니다.

단어	발음	뜻
paragraph 명사	/ˈpæɹəɡɹæf/	단락
element 명사	/ˈɛləmənt/	요소
server 명사	/ˈsɝvɚ/	서버, 봉사기
format 명사	/ˈfɔːɹ.mæt/	포맷
pole 명사	/pəʊl/	극
nest 명사	/nɛst/	둥지, 새집
scroll 명사	/skɹoʊl/	두루마리, 스크롤
vacation 명사	/veɪˈkeɪ.ʃən/	휴가
emphasis 명사	/ˈɛmfəsɪs/	강조
syntax 명사	/ˈsɪn.tæks/	통어론, 구문론
lesson 명사	/ˈlɛs.ən/	수업, 과
compare 동사	/kəmˈpɛɚ/	비교하다, 비유하다
resource 명사	/ɹɪˈzɔːs/	자원
spell 명사	/spɛl/	주문, 마력
versus	/ˈvɝsəs/	대

따라 말해 볼 만한 문장

영상에 나오는 짧고 완결된 문장으로, 일상 대화에서 그대로 쓸 수 있습니다:

Let's start out with recapping here.
I'll do something similar here.
I'll put the south pole.
No, I'm in the right one.
You're helping my channel grow.

이 영상의 문법

화자가 가장 많이 쓰는 문형을 영상 속 실제 표현과 함께 정리했습니다.

문형	영상 속 표현
현재완료 have/has + 과거분사 — 과거의 일이 지금도 관련이 있을 때	you've installed · we've recapped · has highlighted
수동태 be + 과거분사 — 누가 하는지보다 무슨 일이 일어나는지에 초점	are used · are now collapsed · is needed
“might / may” 가능성 might/may + 동사 — 가능하지만 확실하지 않은 일	may say · might expect · might guess
“going to” 미래 be going to + 동사 — 계획이나 곧 일어날 것이 분명한 일	we're going to create · i'm going to hide · we're going to replace

주의할 발음

화자는 I'm, I'll, we're 같은 축약형과 약화된 형태를 53번 사용합니다. 들리는 대로 짧게 발음하세요.

“sh”와 “zh” 소리: extension /ɪkˈstɛnʃən/, vacation /veɪˈkeɪ.ʃən/, perfection /pɚˈfɛk.ʃən/, flush /ˈflʌʃ/, abbreviation /əˌbɹi.viˈeɪ.ʃn̩/
긴 단어 — 강세 위치에 주의: numerical /n(j)uːˈmɛɹ.ɪ.kəl/, abbreviation /əˌbɹi.viˈeɪ.ʃn̩/

한국어 화자가 어려워하는 소리:

/f/ — ㅍ(/p/)으로 바꾸지 말고 윗니를 아랫입술에 대기: paragraph /ˈpæɹəɡɹæf/, format /ˈfɔːɹ.mæt/, emphasis /ˈɛmfəsɪs/, perfection /pɚˈfɛk.ʃən/, flush /ˈflʌʃ/
/v/ — ㅂ(/b/)과 구별하기: server /ˈsɝvɚ/, vacation /veɪˈkeɪ.ʃən/, versus /ˈvɝsəs/, strive /ˈstɹaɪv/, abbreviation /əˌbɹi.viˈeɪ.ʃn̩/
/z/ — ㅈ이 아니라 성대를 울리는 /s/: browser /ˈbɹaʊ.zəɹ/, resource /ɹɪˈzɔːs/, enclose /ɪnˈkloʊz/

이 영상으로 연습하는 방법

먼저 말하지 않고 영상을 끝까지 듣고 모르는 단어를 적어 둡니다.
0.75배속으로 한 문장씩 섀도잉을 시작하고, 익숙해지면 보통 속도로 돌아갑니다.
자신의 목소리를 녹음해 원본과 비교하고, paragraph, element, server 같은 단어에 특히 주의합니다.

쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법

쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.

섀도잉 방법: 단계별 전체 가이드 읽기 →

쉐도잉 연습: HTML Lists Tutorial | HTML5 List Types: Ordered, Unordered & Description - 영상으로 영어 말하기 배우기

연습 모드 선택

앱 다운로드

같은 채널

React Native for Beginners tutorial

HTML Tag Text Basics | HTML5 Element Text Tutorial

Head Tag in HTML | An HTML5 Head Element Tutorial

Introduction to HTML | An HTML5 Tutorial for Beginners

추천 영상

Video

Learn 97% of Harvard's CS50 in 25 minutes

Stack Data Structure In STL | C++ Tutorial

Handy CSS layout patterns, and fun ways to elevate them

Getting to know myTimetable

Engineer's tool list

How to Use WaniKani to Learn Kanji | Tutorial for Beginners

Science in English #3 | The Periodic Table

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

Blender Donut Tutorial Part 1 (2026)