만약 네가 그것이 어떻게 작동하는지 안다면, 너는 CSS 방면에서 더욱 잘 할 것이다

* 이 글은 처음 my blog에 발표되었습니다.
CSS는 간단해 보입니다.그것은 문법이 이렇게 기본적이고 이해하기 쉽기 때문에 사람들에게 이런 인상을 남겼다.
CSS를 본 적이 없는 사람들에게 아래의 코드 세션을 보여 주십시오. 적어도 무슨 일이 일어났는지 대충 알 수 있을 것입니다.

.textbox {
  background: pink;
  border-width: 5px;
  border-color: red;
  border-style: solid;
}

문법이 이렇게 기본적인 문제는 그것이 사람들에게 간단한 언어라는 인상을 준다는 것이다.그것의 쓰기 방식은 매우 간단하지만, 그것의 실제 작업 방식은 매우 복잡할 수 있다.
사람들은 그것이 매우 간단하다고 속았다. 그것이 작용하지 않을 때, 그들은 그것이 고장났다고 말할 것이다.
'진짜'프로그래밍 언어의 기재라도 이에 대해 낙담할 것이다.그들은 일생 동안 코드를 한 줄도 쓰지 않은 사람처럼 그것에 속았다.
비록 그들은 우리가 이렇게 생각하기를 원하지만, CSS는 파괴되지 않았다.그들은 CSS가 어떻게 작동하는지 몰랐고, 그들도 알아내는 데 시간이 걸리지 않았다. 왜냐하면 그것은 너무 기본적이기 때문이다.

사람들이 이해하지 못하는 흔한 해커

예를 들어 많은 사람들이 부모 원소에 overflow: auto을 사용하여 일부 하위 원소가float를 사용할 때 이상한 일이 발생하는 것을 막는다.
그들은 그것이 효과가 있다는 것을 알고 있지만, 왜 효과가 있는지 모르겠다.
너는 그것이 왜 효과가 있는지 아니?
또는 여백 위쪽 또는 채우기 위쪽을 이러한 백분율로 설정하면 어떻게 됩니까?
아마도 꼭대기를 채우는 것은 높이가 아니라 너비에 기초한 것임을 알고 있을 것이다.너는 그것이 그 원소의 너비에 기초한 것이 아니라는 것을 아니?
위에 있는 그 펜을 다시 한 번 보아라.그곳의 파란색 상자 너비: 300px.창 크기를 조정합니다.상단을 채우는 성장과 수축은 거의 대중과 설정된 것과 같다.

이것은 직감에 어긋나는 것이 아니니, 너는 그것이 어떻게 일을 하는지 모른다

너는 내가 이곳에서 바보라고 생각할 수도 있지만, 나는 고의로 비열한 것이 아니다.
나는 교실에서 CSS를 가르치고 10만 명에게도 가르친다.내가 어떤 화제를 깊이 있게 토론할 때, 사람들은 항상 "오, 이것이 바로 그것의 작업 원리다."라고 대답한다.
때때로 이것은 매우 중요하다.요 몇 년 동안, 그것은 줄곧 효과가 있었지만, 그들은 왜 효과가 있는지 모른다.
많은 초보자들은 그것이 어떻게 작동하는지 이해하기 시작했다. 그리고 그들은 아무런 튜토리얼의 도움도 없이 첫 번째 사이트를 만들려고 시도했다. 그들은 당황했다.이것은 더 이상 보기처럼 그렇게 쉽지 않다.
더 많은 연습과 학습 plan things out more을 통해 그들은 더욱 좋아질 것이다.그러나 이후 그들은 자신이 아는 것보다 더 많이 알고 있다고 생각하는 함정에 빠졌다.
컴퓨터 과학의 배경이 있는 사람에게도 마찬가지다.언어가 사람에게 주는 인상은 매우 기본적이기 때문에 그것은 틀림없다!
이 두 가지 상황에서 그들은 그것의 작업 원리를 깊이 연구하고 진정으로 이해하지 못할 것이다.
이것 또한 그들이 그것의 작업 원리를 이용할 수 없다는 것을 의미한다.나는 네가 이미 우습고 무서운 CSS 해커들을 보았다고 믿는다.사람들은 단지 공짜로 그것들을 끌어내는 것이 아니라, 그들이 그것들을 이해하는 것은 규범을 이해하기 때문이다.
본고에서 우리는 나의 경험에 근거하여 많은 사람들이 진정으로 이해하지 못하는 예를 볼 것이다.더 중요한 것은 미래의 업무 상황을 어떻게 이해하는지 모색하는 것이다.
내가 먼저 너에게 물고기 한 마리를 주지만, 내가 너에게 어떻게 낚시하는지 가르쳐 주겠다고 말할 수 있다.

너는 정말 위조 원소가 어떻게 작동하는지 아니?

이 코드 좀 봐.

.blockquote::before {
  content: "";
  position: absolute;
  left: -2em;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #42d7f4;
}

::before 위조원소는 어디에 있습니까?

너는 몇 명이 하나를 뽑았는지 아니?나는 항상 그것이 A라고 가정한다. 나의 영상 속의 사람들은 항상 나에게 그것이 A라고 생각한다고 말한다. 직감적으로 A는 일리가 있다. 왜냐하면...네, .blockquote 이전입니다.
하지만 이건 옳지 않아요.우리는 .blockquote 내부의 내용에 앞서이것은 ::after에도 적용된다.그것은 아버지 대상의 모든 내용을 추구하지만, 아버지 대상 내부에서 생활한다.

이것은 당연히 좋은 일이다.만약 그렇지 않다면, 그것을 사용하는 것은 악몽이 될 것이다.
그것이 아버지 원소 내부에 있다는 것은 우리가 아버지 원소에 비정상적인 위치를 표시하면 position: absolute을 사용하고 위조 원소를 우리가 원하는 위치에 놓을 수 있다는 것을 의미한다.
사람들은 줄곧 위조 원소를 사용하고 내가 묘사한 것처럼 그것을 사용하지만, 그들은 A가 여전히 답이라고 생각한다.
선택한 경우 DevTools를 충분히 사용하지 않는 것이 좋습니다.그곳에 들어가서 일이 발생한 원인과 방식을 봐라!

CSS를 더 잘 이해하는 방법

내가 CSS를 가르치기 시작한 이래로, 나는 어쩔 수 없이 전심전력으로 공부해서 물건을 더욱 잘 배웠다.그것은 내가 CSS를 생각하고 처리하는 방식을 바꾸었다.
만약 네가 시간을 내서 가르칠 수 있다면, 그것은 매우 좋지만, 나는 이것이 많은 사람들의 선택(또는 소망)이 아니라는 것을 깨달았다.괜찮아, 또 다른 방법으로 문제를 해결할 수 있어.
나의 가장 큰 건의는 StackOverflow를 너무 많이 사용하지 않는 것이다.
오해하지 마세요. Stack Overflow 너무 좋아요.그것은 놀라운 정보로 가득 차 있다.빨리 답을 얻을 수 있어서 정말 다행이다.나는 내가 90년대 말에 처음으로 사이트를 만들기 시작했을 때 Stack Overflow가 있었으면 좋겠다.
문제는 당신이 그곳에서 해결 방안을 복사하고 붙여넣을 때 아무것도 배우지 못했다는 것이다.솔직히 말하면, 너는 대부분의 시간을 이렇게 한다.
내가 어떤 것들을 더 잘 이해하려고 시도할 때, 내가 가장 의존하는 자원은 MDN Web Docs 또는 실제 규범이다.나는 DN이 더 쉽다는 것을 발견했다. 그래서 나는 거기서부터 만약 필요하다면 실제 규범에 들어갈 것이다.
나는 구글로 내가 찾는 모든 것을 검색한 후에 MDN을 마지막에 붙여서 그것이 첫 번째 결과인지 확인했다.
만약 우리가 ::before에게 이렇게 한다면, 너는 이것이 첫 번째 말이라는 것을 보게 될 것이다.

In CSS, ::before creates a pseudo-element that is the first child of the selected element.

이것은 항상 그렇게 명확하지 않다. 때로는 그들의 예시를 깊이 읽거나 more complicated matters을 더 깊이 읽어야 하지만, 그들은 조직이 양호하고 간결한 방식으로 정보를 발표하는 데 매우 잘한다.

그것을 실천에 옮기다

위의 padding-top 예시를 사례 연구로 사용합시다.
예를 들면, 네가 padding-top을 내가 위에서 한 것처럼, 그것은 네가 그것을 기대하는 것을 진정으로 표현하지 못했다.너 좀 화났어.
다음?구글 "padding top mdn".
사실이 증명하듯이 그들은 일반적인'채우기'페이지가 아니라 an actual page dedicated to padding-top을 가지고 있다.이거 멋있어.
를 클릭하고 아래로 스크롤하면 a section devoted to possible values이 표시됩니다.
그중에 고정 길이를 언급했는데, 이것 봐, 백분율.그것은 매우 편리하다.다음을 읽었습니다.

The size of the padding as a percentage, relative to the width of the containing block. Must be nonnegative.

이게 니 답이야.그것은 블록을 포함하는 너비와 관계가 있다.
이제 우리는 그것이 어떻게 계산되는지 알게 되었다. 우리는 그것을 정확하게 사용할 수 있다. (또는 이 예에서 백분율 이외의 단위를 사용할 수도 있다.)
이런 상황에서 이것이 여정의 끝이다.
때때로 의사도 왜 일이 이러는지 설명한다.다른 때는, 이렇게 해서 그들은 진정으로 원인을 이야기하지 않을 것이다.이 경우 순환을 만드는 것으로 귀결되어 페이지를 파괴할 수 있습니다.This article does a nice job of breaking it down, 더 알고 싶으면.

너는 모든 부동산에 대해 이렇게 할 필요가 없다

나는 우리가 모든 CSS 속성을 깊이 연구할 수 없다는 것을 안다. 그렇지 않으면 너는 코드를 한 줄 쓸 시간이 영원히 없을 것이다. 그리고 나는 우리가 color이 어떻게 작동하는지 알고 있다고 생각한다.그러나 flexbox를 사용하지만 flexbasis가 어떻게 작동하는지 모르는 사람은 flexbox를 사용하는 사람의 90퍼센트일 수 있다.
속성의 작업 방식을 이해하면 더욱 효과적으로 사용할 수 있고, 매번 예상한 방식으로 작업할 수 있도록 더 좋은 코드를 작성할 수 있습니다.
그거 좋지 않아요?
따라서 다음에 코드를 작성할 때, 만약 어떤 것이 작용하지 않는다면, Stack Overflow에 직접 뛰어들지 말고, 패치 답을 찾으면, 코드에 붙여넣을 수 있고, 효과가 있기를 바랍니다.
5분에서 10분 더 써서 이 부동산의 실제 용도를 이해하다.장기적으로 보면, 이러한 추가 시간은 당신을 위해 10배의 시간을 절약할 것이다.

너는 여전히 걸릴 것이다

가장 중요한 것은 계속 노력하는 것이다.코드를 많이 작성할수록 사용하는 도구가 많을수록 모든 것이 쉽다.그러나 나는 네가 여전히 때때로 곤경에 빠질 것이라고 장담할 수 있다.
네가 무엇을 하든지 진정으로 너를 괴롭히는 일이 생기면 걱정하지 마라.한 사람이나 팀을 찾으면 그곳에서 쉽게 문제를 제기할 수 있다. 지역사회든 DM을 찍을 수 있는 사람이든 큰 영향을 미친다.
만약 당신이 이 선택이 없다면, Stack Overflow는 항상 존재합니다.내가 전에 말한 바와 같이, 이것은 사람을 놀라게 하는 자원이다. 나는 내가 시작할 때 그것을 방문할 수 있기를 바란다.가장 큰 문제는 사람들이 종종 문제를 해결하려고 하는 것이지, 문제를 찾아내려고 하는 것이 아니라는 것이다.

문제 파악 및 솔루션 확보

Stack Overflow(또는 다른 곳)에서 해결 방안을 얻었을 때, 코드를 복사하고 붙여넣었기 때문에 매우 기쁠 것입니다.
너의 머리가 벽에 부딪힌 지 두 시간이 되었는데, 지금 다 고쳤어, 엉엉!
하지만 너는 아무것도 배우지 못했다. 네가 떠났기 때문이다.문제가 마침내 해결되었다!
진정한 비결은 해결 방안을 찾는 것이 아니라 문제의 근원이 무엇인지 묻는 것이다.고품질의 문제를 사용하면 먼저 사람들에게 문제의 근원이 무엇인지 물어보면 더욱 많은 학습 기회를 가져다 줄 것이다.
사람들이 이런 문제에 직면했을 때, 그들도 너에게 답을 주지만, 대다수 때는 답이 더욱 상세하고 통찰력이 있다.
나는 그것들이 효과가 있다는 것을 안다. 왜냐하면 나는 줄곧 사람들의 질문에 대답하고 있기 때문이다.
만약 이것이 저가치의 문제라면, 나는 신속하게 대답한 후에 계속할 것이다. 만약 그들이 정확한 방식으로 질문을 한다면, 나는 최종적으로 더 많은 가치를 제공할 것이다. 왜냐하면 나는 신속하게 대답하고 싶지만, 나는 여전히 그들의 질문에 진정으로 대답하고 싶기 때문이다.
너는 두 번이나 이겼다. 왜냐하면 너는 해결 방안을 가지고 떠났기 때문이다. 그러나 더 중요한 것은 네가 더 많은 이해를 가지고 떠났기 때문이다.이것은 다음에 그것이 발생할 때 왜 발생했는지, 어떻게 복구했는지 알게 된다는 것을 의미한다. 이것은 매우 신기하다.

어떻게 고가치의 문제를 제기해야 할지 모르겠다.

나는 무료 PDF 파일이 하나 있는데, 너는 right here을 얻을 수 있다.
그것은 낮은 값과 높은 값 문제를 더욱 상세하게 소개하고 구체적인 예시를 제시하여 같은 문제를 제기할 수 있지만 최대 값을 추출할 수 있음을 설명한다.