쉐도잉 연습: 5 CSS fouls that I see way too often - 영상으로 영어 말하기 배우기

연습 모드 선택

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

231 문장

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

Hello my friend and friend.

Today we're looking at five CSS files

that I see even seasoned developers make including myself and we're starting off with the first one which is useless declarations.

And I've seen this more and more with the rise of AI because it likes useless declarations.

And the one I always like to use here is a width of 100%.

People like declaring 100% or even 100vw for the times where they want it on the body, which as you might see can cause horizontal overflow especially

if you have fixed scroll bars like windows users have on chrome though

that is potentially getting fixed but we're not quite there yet

but i'll put a link to a bramis article

that talks about how you can actually get 100 vw to take into account the scroll bar

which is kind of cool but 100 is something i see people declare

when they don't need it because as you can see in the two divs

that are up there they look exactly the same

and they work exactly the same they're going to grow they're

going to shrink they're going to match the parent even

if we just have have a width of auto

and you don't need a width of auto

because that's just what it does by default

and it seems like it's the type of thing

that won't actually cause a problem but in some places like

if it's a flex item it could potentially get in the way with grid it could potentially cause overflows

or if you add margins on these it can as well

so let's just add a margin margin to the left side of both of these

and i don't know make 100 pixels or something and

if we take a look at what that's done the one that's auto width has not caused any problems

because it just takes that margin into account, whereas now we have 100% plus the margin on the side, and all of a sudden we have an overflow, and that sucks.

You may be going, well, Kevin, that's because you didn't declare a box-sizing border box.

It has nothing to do with that.

Box-sizing border box.

If I do that, it doesn't change anything, because box-sizing border box goes up to the border.

Margins are on the outside of the border.

The size of my box isn't going to be influenced by margins in any way they're always tacked on afterwards.

So just don't declare width on something if you don't need to.

And in the similar spirit of that, we're going to look at this one, which I guess is a useless declaration,

but it's also about working with how the browser wants to work in the first place.

And it's when we get overly prescriptive, because sometimes you might want a height on something, you need to have it.

So you declare a height of 250.

I know this is like a simple example, so you might know like, oh, we don't want to do that because it overflows.

Whereas the auto one just works

because auto on width wants to be as wide as possible

auto on height wants to be as short as possible

but it automatically adapts to the content that's in there

if the content needs more room it will grow to adjust

which is fantastic

so as much as possible we want to lean into these default behaviors it makes our lives a lot easier

and it just makes things a lot more adaptable in general

but sometimes you do need to have something in place so

if you do need something in place that's where you want to work with how the browser's already trying to work.

In this case, it's trying to be as short as possible.

So I want to set a constraint on that.

I want to prevent it from getting too small.

So instead of a regular height, I could come in and say this is a minimum height.

And now it's going to be at least 250.

Let's do 350.

So we actually see a change here.

And so we get a height of 350 as the minimum size, but it's still going to adapt if it needs to adapt and grow and shrink and grow and shrink and everything works.

So we're still working with the way the browser wants to work with it, but we're setting the constraint.

I'm repeating myself a little bit, but I really want to hammer that home.

And if you really want this hammered home more, and these are the types of things that do trip you up, or just CSS in general is something that you were frustrated with,

I want to let you know that I'm doing a completely new version of CSS Demystified, which is my flagship CSS course.

I'm redoing the entire thing.

I've put a waitlist now on the page.

The link for it is down below.

And the first module is called the CSS Mindset.

So we have a whole bunch of lessons

that are just dedicated to working with the browser

and understanding why we need to do it and everything that has to do with that.

And from there, we're going to get into layouts, grid, flexbox and all sorts of fun stuff.

If that sounds interesting to you, check out the link in the description.

And just to sort of go back into this part for one second

or maybe back to this example where we were dealing with the widths.

The same type of thing can come in.

Like here I have a container.

I've set a width of 60%, but a lot of the time you won't do 60%.

You might say, I don't know, 600 pixels.

You don't want to do that, right?

Because 600 pixels means it's going to overflow.

It's also take off this margin left here.

So now it's just locked in at 600.

It wants to be as wide as possible.

We don't want it to get that big.

So we want to once again set a constraint.

But this time we want to set the constraint as a maximum.

So we can use a max.

I've got to spell it correctly.

But we want to throw a max width on there instead.

And now it actually isn't causing any overflow.

I'm actually just going to go on the body.

So you can see this we'll do a margin or say a margin of 10 pixels or something.

Just because my outline on the sides was shooting off the side.

Now we can see that it's actually shrinking down.

Whereas if I just did a width on there, it's actually overflowing and we're getting some side scrolling.

So yeah, working with the browser is just the most important that we can do.

Try and remember what the browser is trying to do

and then just work with those behaviors and you're going to save yourselves a lot of headaches.

And now for point three, it's something that I'm 100% guilty of, which is staying organized and taking the time to refactor sometimes.

And this is an example of, this is the live version of my website right now.

I created a link button component and I have a fancy button component.

The fancy button is a fancy looking button.

100

If we jump on over to my website, we can see them down here where it's these buttons that sort of, it follows the direction of the mouse cursor coming in and out.

101

And I wanted buttons like this and links like this

102

and the easiest thing to do at the time was to make a link version of it

103

and a button version of it.

104

And this works completely fine.

105

There's no issue with having the two components.

106

There's fancy ways we could have it adapt to which one we want.

107

But completely fine.

108

The problem is all my styles are here, and then I'm repeating most of those styles here.

109

There are some small differences between the two probably, just because one's a link and one's a button.

110

They're probably actually exactly the same.

111

But at the time, all I did was duplicate the feature I was working on and then went from there.

112

Or if we jump on over to my style sheet, I actually don't know what we're going to find here.

113

I've just been like hacking away at this.

114

I actually know there's one problem that's in here that I made because I just saw this before recording.

115

If I look in here and I find my layers, which we go down a little bit more, we'll find a layer.

116

Right here, I made a layer reset and it actually doesn't close.

117

Or it probably does eventually.

118

but I don't know where it closes.

119

I accidentally just included a lot of stuff in there.

120

So it's closing here, which is fine.

121

These are things I wanted in there

122

but at one point i was like hacking away at my heading uh my hero area

123

and for whatever reason i was like oh it goes with my h1

124

so i dropped it in there

125

but like all of this really shouldn't be part of my

126

reset right uh even this anchor name i don't think the

127

viewport one i think we can leave there i don't even think i need

128

that i stopped using that uh oh we have more here actually that we need.

129

So this one maybe I could keep up in the reset.

130

Probably not, but you get the idea that I probably should have taken the time to start coming in with other things.

131

And it's one of those things that's very normal.

132

You start hacking away at stuff, you just start getting it to work, which is completely fine.

133

But then once you have it working, and sorry, I'm scrolling a lot now, I'm trying to find where I want to put this in my code base.

134

Overflow scroller, these are kind of more generic still.

135

Avatar, underline, these are all very generic things.

136

This is more layout related.

137

Maybe it's still not the best place, but I'm going to drop it here for now.

138

So I'll find a better place for it after.

139

But it's very normal just to throw things in there, get things working.

140

That's actually one of the pieces of advice, not part of the tips I have for today, but often when you're stuck on something, you're not sure where to start, the best thing to do is the quick wins.

141

Just start writing code, get the ball rolling.

142

So your sort of things are moving in the right direction, but then that often results in lots of extra stuff

143

and it's no fun refactoring and doing it

144

but you thank yourself later like right now I the reason

145

I even thought of this one was I was making changes to my fancy button

146

and I wasn't seeing those changes reflected

147

and I'm like why is this not working I even like set the background to red

148

and like it's not changing to red I couldn't figure it out

149

and like oh it's a link button and it should just have a single class in my regular CSS file

150

and not worry about it.

151

But I took a shortcut.

152

Again, the shortcut is fine, but we don't want to take the time afterward and you'll thank yourself.

153

Or if you're working in a team or something like that, especially true, but even in personal projects like this one, it's always worth the effort to actually put it in.

154

So once this video is done, I'll practice what I'm preaching and hopefully end up actually doing that.

155

And while we have my website up here, actually another one that I wanted to look at, and this would be a nice example, is if I look at my headings here, I never really earned my headings, but my navigation, you can see there's an outline coming up on those.

156

I have a few other effects in place, but I like having the outline on there, even if I don't need it.

157

But there's a lot of people you can see on this one, for example, the KP, it gets the outline on it

158

because it's a link and you can focus on it and you want to make it obvious that something can be focused.

159

But people and I get it.

160

It's usually, I think, from a stakeholder who tells you

161

that your boss or somebody who happened to click on a button and you get an outline on it.

162

So you end up with a star of outline none.

163

But the problem with this is that it makes it so when you focus on things you don't know it.

164

And I generally don't like calling out companies and stuff

165

but ESPN has a really bad website when it comes to this because if you tab through their website, you might notice, I don't know if it's on screen or not,

166

but I'm tabbing through and I see the links, they're showing up in the bottom corner for me

167

that shows me the address but you can see now the page is actually jumping.

168

I have no idea what I'm focused on.

169

And so it's just a terrible, terrible user experience for anyone who's coming in and keyboard navigating.

170

And there's lots of people who keyboard navigate.

171

There's power users who just prefer to do it.

172

NeoVim users out there know what I'm talking about, but there's just tons of reasons that someone might be using their keyboard and navigate, and they're just not gonna use your website

173

if you make it hard to do

174

which like this is literally impossible to know what I'm focused on

175

so really really bad on that front so the solution to this is thankfully very easy to do

176

uh just instead of worrying about focus just use focus visible instead uh

177

if you see here if I click on a button a button clicked on

178

if you have focus will actually gain focus uh so it gains

179

that focus state and that's the thing

180

that people especially a button that's opening a navigation or something That's annoying if it gains focus.

181

But here, the focus visible, I can click on the button.

182

It's going to do whatever that button needs to do.

183

It's not going to get a focus ring on it.

184

If I tab to that, though, you can see that it's actually getting the pink focus on there.

185

So focus visible is what you want to use most of the time, if not all the time, instead of using focus.

186

I will say it's mostly buttons where you'll see this difference.

187

If you're in form fields, whether you click or not, if you're using focus visible, it's still going to work the exact same way.

188

It's the browser deciding based on the user's primary input method as well as the type of element it is

189

And buttons for the most part of the one where you'll notice it the most often

190

But I believe in all focusable things now This is the default for the user agent styles

191

and it's the default of what I use

192

So don't worry about focus use focus visible and that way

193

if you're needing to add your own focus states and things like

194

that Just do a focus visible and you won't get those annoying things

195

that your higher-ups

196

or bosses are telling you to get rid of of leading to really bad user experiences like we saw on ESPN.

197

And the final one that I'm going to talk about is something I don't have an example for, or I have lots of examples, I guess, but it's about using the right tool for the right job.

198

And I see a lot of hesitancy for people, or not hesitancy, but it's people getting comfortable with what they know

199

and then not learning the more efficient or effective tool for the job that they're doing.

200

And this is people that learn grid really well

201

and then use it for things that Flexbox should be used for

202

and vice versa where people get really comfortable with Flexbox

203

and they start over relying on it when grid would help you out.

204

This is one of those things where I have seen AI

205

just have a tendency to rely too much on Flexbox

206

and use it for things where grid would actually be better just

207

because there's more training stuff out there with Flexbox I think

208

and there's patterns that have been created that people used Flexbox for.

209

It's more complicated the AI gets you 90% of the way there

210

but you need to make a tweak to it

211

and then the Xbox isn't actually doing the job you want it to

212

and it becomes harder to tweak whereas if you just switched over to grid it would be easy peasy.

213

If you'd like to know more about

214

that there is a video linked in the description about how

215

I make decisions on whether I should be using Flexbox

216

or grid in any given situation

217

and I know like having two layout tools can feel annoying

218

there's a reason we have both of them I addressed

219

that in that video as well but it's also one of those things

220

that you don't need to be masters of both of them

221

you only need to learn the familiar patterns with both of them and and the more you use either one of them, the better at it you're going to get.

222

But yeah, you can keep both of them fairly simple

223

and accomplish most of the layouts that you're going to need to accomplish with them.

224

And if you want to learn more of Flexbox and Grady, don't mind waiting a few more weeks until the course is out.

225

As I said, deep dives into both of them in CSS Demystified.

226

Link for that is in the description below.

227

I hope you enjoyed this video.

228

I hope you got a few tips.

229

If you have any others, please leave a comment down below to let me know what they are.

230

And with that, I want to give a very big thank you to Johnny, who's my enabler of awesome, as well as all my other patrons and channel members for their continued support.

231

And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.

앱 다운로드

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

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

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

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

단어 게임놀면서 외우기

QR 스캔

Download on theApp Store Get it onGoogle Play

같은 채널

FOR YOU

맥락 및 배경

이번 영상에서는 CSS에 대한 유용한 팁을 공유하고 있습니다. 웹 개발자들은 종종 불필요한 선언을 하며, 이는 코드를 복잡하게 만들고 의도하지 않은 문제를 일으킬 수 있습니다. 이 영상의 발표자는 이러한 실수들을 피하는 방법을 공유하며, 어떻게 하면 더 효율적으로 CSS를 사용할 수 있는지를 설명합니다. 개발에 대한 이해가 깊어질수록, 보다 나은 작업 환경을 구축할 수 있습니다.

일상 커뮤니케이션을 위한 상위 5개 구문

불필요한 선언을 피하자: width나 height를 100%로 선언할 필요가 없다.
box-sizing 속성 이해하기: box-sizing border-box를 사용하더라도 margin이 영향을 미치지 않음을 기억하자.
자동 크기 조절의 장점: width와 height를 auto로 설정하면 콘텐츠에 따라 유연하게 조절된다.
브라우저의 기본 동작을 이용하자: 기본값을 활용하는 것이 오히려 더욱 편리하다.
명확한 제약 설정하기: 필요할 경우 명확한 높이를 설정하여 콘텐츠를 조정하자.

단계별 쉐도잉 가이드

이 영상을 통해 더 나은 영어 발음 교정을 원한다면, 다음 단계를 따라해 보세요:

비디오 시청: 영상에서 발표자의 말을 주의 깊게 듣고 전체 내용을 이해하세요.
발음 반복: 발표자가 말하는 각각의 문장을 따라 해 보세요. 이때, 특정한 구문 (예: "불필요한 선언을 피하자")을 집중적으로 반복해 보세요.
쉐도잉 연습: 발표자가 말하는 속도에 맞춰 목소리를 따라 있는 연습을 해 보세요. 여러 번 반복하며 자연스러운 발음을 익히세요.
녹음 및 피드백: 자신의 목소리를 녹음한 후 원음과 비교하며 발음의 차이를 분석하세요.
일상적 사용: 배운 표현들을 일상 대화에 사용해 보세요. 영어 쉐도잉 기법을 통해 자연스럽게 구사할 수 있을 것입니다.

이러한 과정을 통해 shadowspeak와 shadow speech를 효과적으로 연습할 수 있으며, 유튜브 영어 공부를 통해 더욱 매력적인 영어 구사 능력을 갖추게 될 것입니다.

이 영상의 문법

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

문형	영상 속 표현
조건문 if + 절, will/would + 동사 — 조건과 그 결과	if you have focus will actually
현재완료 have/has + 과거분사 — 과거의 일이 지금도 관련이 있을 때	I've seen · have fixed · has not caused
관계절 who / which + 절 — 사람이나 사물에 대한 추가 정보	one which is · Demystified, which is · here, which is
수동태 be + 과거분사 — 누가 하는지보다 무슨 일이 일어나는지에 초점	be influenced · were frustrated · is called

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

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

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

쉐도잉 연습: 5 CSS fouls that I see way too often - 영상으로 영어 말하기 배우기

연습 모드 선택

앱 다운로드

같은 채널

Handy CSS layout patterns, and fun ways to elevate them

Use these CSS features instead of JavaScript

Transition to and from display: none

Your AI broke the layout. Now what?

This library changes how JS and CSS work together

No more magic numbers for your breakpoints

More CSS quick tips

Native popovers with smooth animations (no JS required)

3 modern CSS properties to add to your reset

Has AI killed Tailwind?

Why I use single-color gradients in my CSS

Build smarter color systems with relative colors

추천 영상

What is clean code? - Uncle Bob

11 Marketing Strategies that Almost NEVER Fail (in any niche)

JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

We've got separation of concerns wrong

MODAL VERBS: All you need to know about CAN, COULD, MAY, MIGHT, MUST, SHOULD, SHALL, WILL and WOULD

Godot in 100 Seconds

Cybersecurity Architecture: Five Principles to Follow (and One to Avoid)

10 Usability Heuristics: From Theory to Practice | Course Preview

Will YouTube Ever Run Out Of Video IDs?

How Ad Blockers Work

맥락 및 배경

일상 커뮤니케이션을 위한 상위 5개 구문

단계별 쉐도잉 가이드

이 영상의 문법

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