쉐도잉 연습: Your AI broke the layout. Now what? - 영상으로 영어 말하기 배우기
레슨 만드는 중...
1
The most undervalued skill in front-end development right now has nothing to do with prompting, but instead it has to do with identifying and fixing problems,
2
because every now and then AI is going to get things wrong.
3
Now this doesn't happen every time you prompt something, and it's not that all of the errors are catastrophic, though that definitely can happen from time to time,
4
but when these problems do come up there's two kinds of developers that are out there.
5
There's those that can identify the problem in under a minute and go ahead and fix it relatively quickly, And there's others who spend half an hour reprompting the AI trying to understand what's wrong with it
6
and trying to get it to fix the problem that it created in the first place.
7
And being a CSS person, I see this happen with CSS a lot.
8
So we're going to dive in
9
and look at some of the things you can do with CSS to be able to solve the problems
10
that come up and the types of things you want to be looking at and identifying when things happen.
11
And this is actually a challenge that is in my course, CSS Demystify, that we're going to look at and do together where this is what we want.
12
And there's some problems right now.
13
And so let's jump to full screen mode here and I'm just gonna make the font size bigger.
14
So, you know, for recording purposes, you guys can see what's going on and everything looks okay.
15
In terms of the markup, I don't see anything that would be catastrophically problematic there.
16
But when it comes to CSS layout issues, it's really useful to be able to quickly look at things and go red flag right away.
17
This is a very simple example of the types of things that you might be looking for.
18
But we have like our text is too close to the top over here.
19
We obviously have some overflow, which is the easiest problem.
20
And there's a few other smaller things here that can easily pop up.
21
So the very first thing is just fixed widths and heights.
22
Now, LLMs generally don't do this these days, but it is still one of those things that we want to avoid at all costs.
23
And I always say, if you're going to be setting a size on something, you don't want to set a fixed size, you want to set a constraint.
24
So I'm going to set a max width here.
25
And that means, you know, I'm actually able to get smaller than that.
26
And we can see here it's shrinking and growing instead of being locked in at that size.
27
And for a height, again, you could set a constraint if you need the constraint, it would be a min height, which means like if this was bigger,
28
then it would be able to be bigger.
29
And so like most of the time, height is actually a useless declaration.
30
And this isn't the type of useless declaration that an LLM will generally make.
31
It's usually a person will throw that on there.
32
But if we don't set a height, height auto works.
33
It's fantastic.
34
It works with how the browser wants to work as the content has different amounts of space.
35
It can adjust and grow and shrink and do what it needs to do.
36
But the types of useless declarations that LLMs do do every now
37
and then actually does sneak its head and is what's causing the overflow over here.
38
And if I come and take a look, there's a width 100% right here.
39
And this is what the issue is.
40
And if we take this off, you're going to see it fixes itself.
41
Nice, right?
42
Some eagle-eyed people watching this might be going, Kevin, that wasn't the problem.
43
The problem was that you never declared a box sizing border box, but that's not correct.
44
Even if I put that, let's do it really quickly here, it's going to do a border, not border, box sizing of a border box on here.
45
It's fixed it a little bit, but it's still not completely there.
46
And the reason for that is box sizing border box with 100% plus margin, margins are outside of your border box.
47
It's not included in there.
48
Just like height, a lot of the time the auto works fine.
49
Same thing here.
50
The width of auto works fantastically well, and I don't actually need to declare it width there.
51
So we can get rid of that one.
52
Our layout is almost there.
53
We have the major issue I would say right now is, do I even want margin on here?
54
When you have an element inside, you generally don't want to put margins outside.
55
And this is the type of thing that can sneak in sometimes
56
because you're focused on the one thing that you're writing code for and you go, I need space all around it.
57
But this would probably make more sense if I took this margin off completely to begin with, which now I guess that width 100% wouldn't be an issue if you did have your box sizing.
58
But then coming all the way back up to my card, I would replace that with this padding of the 24 pixels here, which adds it all around.
59
And anytime you need more background, we want to come in with some padding.
60
So quick things that we can identify there.
61
And now the main issue is we have extra space here.
62
We had weird spacing.
63
We still have weird spacing there.
64
And the spacing down here at the bottom is also getting kind of weird as well.
65
Once again, margins start rearing their ugly head.
66
We had collapsing margins going on.
67
Now we actually have extra margins happening.
68
So here on the title where I had this margin top because I needed some extra space that wasn't actually doing anything.
69
I can remove that.
70
And not only can I remove it, I actually want to say that the margin top is zero.
71
We can have a CSS reset here that's getting rid of all of our margins.
72
That would probably be a little bit more standard, but we can see we got rid of that weird space at the top there.
73
And then here I would probably want to come down on the content.
74
And it's not even on the content, it's coming from the paragraph here.
75
So maybe my content, you know, this is where maybe you actually have a star of a margin of zero, and then that gets rid of all of the spacing.
76
And then here we can do a display grid
77
and then a gap of whatever space that we want to have to replace the margin with gaps.
78
There's a few different strategies here.
79
I'm not always a fan of this specific one.
80
There's other ones that I do like.
81
And of course, this is all part of my course, CSS Demystified, where I talk a lot about this.
82
This is part of my Making Sense of Layouts module that's here right now.
83
We have strategies with dealing with margins, which is all about bringing in the different amounts of space, coming in with grid, creating structured ones when we want to do a flex box with grid, all the different things like this.
84
And the whole point of the course is to understand CSS better.
85
This specific module about layouts.
86
I'm doing a new module right now called Writing Resilient CSS
87
which is all about writing CSS that can scale and be maintainable.
88
And it's all about getting you to understand CSS better.
89
So whether you're writing it yourself and you just want to be more efficient and not be fighting with the CSS,
90
or if you are using an LLM or some other AI tool to write CSS for you and other front end stuff, but every now and then there are problems that come up or things to debug,
91
you'll be able to identify the problems easily, quickly, and fix them while you're at it.
92
So if you're interested in that, the link is down below.
93
And with that, I want to say a very big thank you to my enabler of awesome, Johnny, as well as all my other patrons and channel members for their continued support.
94
And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.
📺 같은 채널
C14
Handy CSS layout patterns, and fun ways to elevate them
Business EnglishUniversity StudentsWorking Adults
B22
Use these CSS features instead of JavaScript
Business EnglishUniversity StudentsWorking Adults
C14
Transition to and from display: none
Business EnglishUniversity StudentsWorking Adults
B24
This library changes how JS and CSS work together
Business EnglishUniversity StudentsWorking Adults
B27
No more magic numbers for your breakpoints
Business EnglishUniversity StudentsWorking Adults
C14
More CSS quick tips
Business EnglishUniversity StudentsWorking Adults
C12
Native popovers with smooth animations (no JS required)
Business EnglishUniversity StudentsWorking Adults
C13
3 modern CSS properties to add to your reset
Business EnglishUniversity StudentsWorking Adults
C13
5 CSS fouls that I see way too often
Business EnglishUniversity StudentsWorking Adults
B24
Has AI killed Tailwind?
Business EnglishUniversity StudentsWorking Adults
C17
Why I use single-color gradients in my CSS
Business EnglishUniversity StudentsWorking Adults
C14
Build smarter color systems with relative colors
Business EnglishUniversity StudentsWorking Adults
✨ 추천 영상
C11
85 문장
AI Can Write Code. And That’s the Problem.
Business EnglishUniversity StudentsWorking Adults
C1204 문장
Prompt Engineering - Guidelines
Business EnglishUniversity StudentsWorking Adults
C12
14 문장
CS50x 2026 - Introduction
Business EnglishUniversity StudentsWorking Adults
C11
180 문장
Armchair Architects: Resiliency in the Cloud – Core Patterns
Business EnglishUniversity StudentsWorking Adults
C12
139 문장
Does Anyone Use JavaScript Anymore?
Business EnglishUniversity StudentsWorking Adults
B21
269 문장
Design with Claude Code: The Designer’s Guide
Business EnglishUniversity StudentsWorking Adults
B22
151 문장
We've got separation of concerns wrong
Business EnglishUniversity StudentsWorking Adults
C11
207 문장
How I Made $30,000 Hacking Broken Access Control
Business EnglishUniversity StudentsWorking Adults
B21
247 문장
"This Doesn't Lie" | Build Your Own English Level Checker with Google AI Studio
Business EnglishUniversity StudentsWorking Adults
C14
321 문장
8 Tech Choices to Lock In Before Agentmaxxing
Business EnglishUniversity StudentsWorking Adults
C115
23 문장
The future unfolds! How to optimize Android apps for adaptive layouts
Business EnglishUniversity StudentsWorking Adults
이 영상, 왜 스피킹 연습에 좋을까?
유튜브 영어 공부로 IELTS 스피킹 실력을 키우고 싶다면 이 영상은 완벽한 소재입니다. 자연스러운 미국식 발음과 일상적이지만 전문적인 표현이 섞여 있어, 실제 대화에서 사용할 수 있는 패턴을 익힐 수 있습니다. 특히 "identify and fix problems"처럼 동사구를 활용한 표현은 IELTS 스피킹에서 높은 점수를 받기 위해 꼭 필요한 기술입니다. 영상 속 목소리가 명확하고 속도가 적당해 shadow speak 연습에도 최적화되어 있어요.
자연스러운 표현, 하나씩 분석해보자
- "The most undervalued skill in front-end development right now has nothing to do with prompting": "has nothing to do with"는 "~와 관련이 없다"는 뜻으로, 부정적인 관계를 표현할 때 자주 사용됩니다. 이 구문을 사용하면 복잡한 문장을 간결하게 만들 수 있어, 영어 발음 교정 뿐만 아니라 문장 구조도 연습할 수 있습니다.
- "There's those that can identify the problem in under a minute": "there's those that~"는 "~하는 사람들이 있다"는 표현으로, 구체적인 예시를 들 때 자연스럽게 사용됩니다. "in under a minute"처럼 "under"를 사용해 "1분 이내"라는 뜻을 표현하는 방법도 배울 수 있습니다.
- "height auto works. It's fantastic": 짧은 문장을 연결해 말하는 방식은 일상 대화에서 자주 보입니다. "works"와 "fantastic"의 발음을 명확히 하면, 영어 발음 교정에 큰 도움이 됩니다. 특히 "fantastic"의 "t"가 약하게 발음되는 것을 주의해야 해요.
쉬운 practice routine, 따라해보세요
shadowspeaks 연습을 위해 다음 단계를 따라해보세요. 1. 영상을 5초씩 재생하고 멈춥니다. 2. 화자의 발음, 억양, 속도를 따라서 말합니다. 3. 자신의 목소리를 녹음해 원본과 비교합니다. 이 과정을 반복하면 자연스러운 발음과 리듬을 익힐 수 있습니다. 특히 "fixed widths and heights"나 "box sizing border box"처럼 전문적인 용어도 함께 연습하면, IELTS 스피킹에서 전문적인 주제를 다룰 때 자신감이 생깁니다. 하루 10분씩만 해도 효과가 크니, 지속적으로 실천해보세요!
이 영상의 문법
화자가 가장 많이 쓰는 문형을 영상 속 실제 표현과 함께 정리했습니다.
| 문형 | 영상 속 표현 |
|---|---|
| 관계절 who / which + 절 — 사람이나 사물에 대한 추가 정보 | overflow, which is · height, which means · margins, which is |
| 수동태 be + 과거분사 — 누가 하는지보다 무슨 일이 일어나는지에 초점 | is just fixed · being locked |
쉐도잉이란? 영어 실력을 빠르게 키우는 과학적 방법
쉐도잉(Shadowing)은 원래 전문 통역사 훈련을 위해 개발된 언어 학습 기법으로, 다언어 학자인 Dr. Alexander Arguelles에 의해 대중화된 방법입니다. 핵심 원리는 간단하지만 매우 강력합니다: 원어민의 영어를 들으면서 1~2초의 짧은 지연으로 즉시 소리 내어 따라 말하는 것——마치 '그림자(shadow)'처럼 화자를 따라가는 것입니다. 문법 공부나 수동적인 청취와 달리, 쉐도잉은 뇌와 입 근육이 동시에 실시간으로 영어를 처리하고 재현하도록 훈련합니다. 연구에 따르면 이 방법은 발음 정확도, 억양, 리듬, 연음, 청취력, 말하기 유창성을 크게 향상시킵니다. IELTS 스피킹 준비와 자연스러운 영어 소통을 원하는 분들에게 특히 효과적입니다.