네트워크의 "네트워킹"대응

CSS는 어렵습니다.
그것은 부서지거나 직감에 어긋나거나 어리석은 것이 아니다.이것은 매우 어렵다.
사람들은 그것이 매우 간단하다고 잘못 생각한다. 왜냐하면 그것은 간단한 문법이 있기 때문이다. 그리고 그들은 그것을 싫어한다. 왜냐하면 그들은 그것을 정상적으로 일하게 할 수 없기 때문이다.
CSS가 어려운 이유 중 하나는 출력을 완전히 제어할 수 없기 때문입니다.우리는 브라우저에 우리의 예상 출력을 알려주고 대량의 변수에 따라 사용자에게 가장 좋은 결과를 제공해야 한다.
CSS를 작성할 때 우리는 많은 것을 알지 못한다.

방문자당 사용 중인 브라우저

뷰포트 크기

운영 체제

해당 장치

현재 사용 중인 기본 입력 장치

등

Robin Rendle이 얼마 전에 나에게 답장을 했을 때 말한 바와 같이, 이것은 많은 컴퓨터 과학적 배경을 가진 사람들이 CSS를 좋아하지 않는 이유 중의 하나이다.CSS를 작성할 때, 그들은 반드시 네트워크성, 즉 네트워크가 끊임없이 변화하는 성질과 미지의 변수에 직면해야 한다.
우리가 어떻게 이 모든 미지수와 변수를 처리할 수 있습니까?

예측 변수

나는 사람들이 작은 스크린, 큰 스크린, 그리고 둘 사이의 모든 것을 사용할 것을 알고 있기 때문에 나는 이 두 가지 상황과 둘 사이의 상황에서 나의 사이트를 테스트할 것이다.
그러나 이는 사후 테스트가 아니라 처음부터 이 변수들을 예측해 고려한 것이다.
뷰포트 크기에 대해 가장 간단한 방법은 가능한 한 절대값을 피하는 것이다.

절대

만약 내가 용기에 width: 1000px 를 설정한다면, 그것은 잠길 것이다.화면이 이 값보다 작으면 넘치고 수평으로 스크롤됩니다.
반대로 나는 백분율로 폭을 설정할 수 있다.다음과 같이 하십시오.

.container {
  width: 90%;
  margin: 0 auto;
}

이제 나는 나의 용기가 설비의 너비에 따라 증가하고 수축될 것이라는 것을 안다.경탄했어
그러나 테스트를 할 때, 나는 큰 화면에서 나의 용기가 너무 크다는 것을 깨달았다.지금 나는 최대 너비로 이 문제를 해결할 수 있다.

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

이 점은 처음에는 어려울 수도 있다. 특히 우리가 사용할 수 있는 모든 도구를 알지 못할 때, 이것은 자바스크립트가 우리가 순환을 어떻게 작성하는지 모를 때 하기 어려울 수도 있는 것과 같다.
CSS도 마찬가지다. 우리가 가지고 있는 모든 도구를 모르면 특정한 문제를 해결하기 어렵다.

어떻게 처음부터 일을 시작했는지 이해하다

CSS가 있으면 모든 멋진 도구를 제공하지만 이 도구를 정확하게 사용할 수 있는 핵심 기술을 갖추지 못한다는 것을 알게 될 것이다.
이런 상황에서 우리는 일을 돌릴 수 있지만, 왕왕 혼란스럽고 취약한 해결 방안이 필요하다.
예를 들면, 전기공 하나.
전기공처럼 나는 조명기구나 다른 간단한 조작을 교체할 수 있다.나는 집에 전선을 설치할 생각은 없다.

만약 내가 정말 집을 연결해 보려고 한다면, 나는 유튜브 동영상을 보고 물건을 연결할 수 있지만, 내가 전원을 켜러 갈 때, 일부 퓨즈는 녹고, 집은 심지어 소실될 수도 있다.
이것이 바로 사람들이 CSS 기본 기술을 갖추지 않은 상태에서 완전한 설계를 구축하려고 시도할 때 발생하는 상황입니다.
그들은 단독으로 사용하는 방법을 알 수 있는 모든 도구를 가지고 있지만, 이 도구를 정확하게 사용하는 핵심 기본 기술을 갖추지 못한다.
내 연결이 엉망이 될 것처럼, 다른 도구와 기본 원리에 대해 잘 이해하지 못할 때, 당신의 CSS는 엉망이 될 것이다.
레이아웃은 가능할 수도 있지만, 그것은 매우 취약하다. 우리가 위에서 토론한 일부 변수가 변화할 때, 그것은 쉽게 붕괴된다.

사전 제작된 솔루션에 의존

많은 사람들에게 이것은 그들이 Bootstrap 같은 프레임워크를 사용하게 할 것이다.
문제는 프레임워크가 제공하는 도구에 없는 변경이나 수정이 필요할 때 악몽일 수도 있다는 것이다.
비록 Bootstrap과 Tailwind 같은 도구가 당신을 도울 수 있지만, CSS는 이 도구에 의존하지 않고 새로운 방식으로 그것을 이용하거나 완전히 사용하지 않도록 도와줄 수 있다는 것을 정확하게 이해합니다.

CSS를 자신 있게 쓰셔도 됩니다.

사람들이 CSS에 대해 잘 이해하지 못할 때, 그들은 Bootstrap과 Tailwind를 좋아한다. 왜냐하면 그것은 대량의 시간과 좌절감을 절약할 수 있기 때문이다.
그래, 이것은 사람을 낙담하게 할 수도 있지만, 그것이 어떻게 진정으로 일을 하는지, 그리고 그 목적이 어떻게 일을 하는지 알게 되면 많은 것이 사라진다.
이것은 당신이 직면한 문제가 더욱 적다는 것을 의미한다. 당신이 문제에 직면했을 때, 당신은 더욱 빨리 해결 방안을 찾을 수 있다.
네가 많이 추측하지 못하거나, 네가 정말 추측할 때, 이것은 근거가 있는 추측이다. 너는 거기에서 좋은 아이디어를 얻을 수 있다. 그것은 작용할 것이다...그것이 작용하지 않을 때, 너는 왜 그런지 알 수 있을 것이다.
이것이 바로 내가 이 과정을 창설한 이유이다CSS Demystified.이것은 당신이 사용할 수 있는 모든 도구(모든 것을 포괄할 수 있는 도구가 너무 많음)를 가르치는 것이 아니라 CSS 작업의 기본 원리를 가르쳐 준다. 그러면 당신은 문제가 발생하기 전에 문제를 예측하고 문제를 어떻게 빨리 해결하는지, 그리고 해결하기 어려운 문제에 부딪혔을 때 어떻게 해결하는지 찾을 수 있다.
이것은 이미 한동안 CSS를 쓴 사람들을 위해 준비한 것이지만, 지금은 일이 좀 복잡해져서 그들은 자신이 벽에 부딪혔다고 느낀다.
만약 당신이 등록하고 싶다면, 등록 기간은 오늘부터 11월 2일까지 개방됩니다.만약 당신이 2일 후에 이 글을 읽고 흥미를 느낀다면, 업데이트를 등록할 수 있으며, 그것은 2021 중반에 다시 출시될 것이다.