코드에서 더 나아지고 싶습니까? 누군가 CSS를 가르치십시오.

최근에 친구가 프로그래밍 지침을 요청했습니다. 그녀는 프로그래밍에 대해 전혀 모르는 절대 초보자입니다. 나는 내 자신의 출발점부터 시작하기로 결정했습니다 : HTML 및 CSS. Codepen을 사용하고 기존 코드 스 니펫을 복사하고 수정하기 시작합니다. 곧 학습 경로가 분명히 우리에게 제시되었습니다.

이 기사의 목적은 CSS의 기본 사항을 CSS의 기본 사항을 습득 한 독자에게 가르치는 것이 아니라 초보자가 기회를 가질 때 배우고 다른 사람들에게 지식을 전달하도록 영감을주는 컨텐츠에 중점을 두는 것입니다. 다른 사람들을 돕는 것은 매우 기쁩니다. 그리고 저는 코드에 대한 생각을 바꾼 귀중한 경험을 배웠습니다. 윈윈!

다른 사람들 CSS를 가르친 후 배운 5 가지 교훈은 다음과 같습니다.

레슨 1 : 처음부터 시작하지 마십시오

12 년 전에 웹 프로그래밍을 배우기 시작했을 때, 플로트, 여백, 채우기 및 포지셔닝에 대한 위치 선언을 사용하여 레이아웃을 시작했습니다. 요즘 날짜가 조금 나오는 것처럼 보일지 모르지만, 당시 새로운 프로그래밍 파트너와 함께 시작한 곳입니다.

결과는 이상적이지 않습니다.

당신이 추측 할 수 있듯이, "이것은 화면 중앙에서 빈 상자를 찾는 방법"으로 시작하는 것은 실수입니다. 얼마나 지루해! Flexbox가 화면 중앙에 요소를 어떻게 배치하는지 보여주는 능력에 깊은 인상을 받았지만 (나중에 더 자세히 설명) 위치와 관련이없는 다른 많은 문제에 직면했습니다.

"그래서 색상을 바꾸는 방법?"

"호버링 할 때 모양이 바뀔 수 있습니까?"

"웹 페이지에서 어떤 글꼴을 사용할 수 있습니까?"

나는 이것을 배우는 데 몇 주 더 걸릴 것이라고 생각했다.

그래서 12 열의 그리드를 가르치려는 나의 계획은 보류되었고, 우리는 Chris의 명명 된 컬러 테이블 몇 개를 복사 한 코드 스 니펫과 함께 가져와 시도하기 시작했습니다. 먼저 Cassidy Williams Netflix/Netlify 로고의 색상을 변경했습니다. 우와! 그것은 즉시 그녀의 관심을 끌었습니다.

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
</a></code>
<div></div>
<div></div>
<div></div>

<div>더 예쁘다</div>

그런 다음 CSS에 대한 간단한 조정 :

 <code>body { background: #F9F2DB; color: #092935; font-size: 50px; } a { color: #092935; } .logo .uno, .dos, .tres { background: #C61561; } .logo .dos { box-shadow: 0 0 20px #F9F2DB; } .logo::before { background: #F9F2DB; } .name { letter-spacing: 8px; }</code>

몇 분 안에 내 친구가 매료되었습니다! 걱정할 지루한 포지셔닝은 없으며 몇 줄의 간단한 코드 라인만으로 친숙한 것들을 완전히 다른 것으로 바꿀 수 있습니다.

그런 다음 그녀는 무엇이든 색상을 바꿀 수 있다는 것을 깨달았습니다! 우리는 브라우저에 잘 알려진 웹 사이트를로드하고 DevTools를 사용하여 텍스트와 배경색을 변경했습니다. 임무가 완료되었습니다! 내 친구가 매료되었습니다.

배운 교훈 : 처음부터 구축하려는 것에 대해 걱정하지 마십시오. 기존 리소스를 사용해보십시오!

레슨 2 : 댓글

이것은 코스에 대한 내 계획의 일부가 아니지만 일부 CSS 섹션이 /로 시작한 이유에 대한 의문이 제기됩니다. 그래서 우리는 이것을 논의합니다.

이로 인해 내 일에 대해 생각하기 시작했습니다. 나는 충분한 코드 댓글을 작성하지 않았다. 새로운 프로그래머가 모든 것을 주석을 달고 ( 모든 것을 의미하는지)를 관찰하면 자신뿐만 아니라 더 넓은 팀, 심지어 미래에도 의견이 얼마나 유용한 지 알게되었습니다. (Sarah Drasner는이 주제에 대해 훌륭한 연설을합니다).

그 전에는 다음과 같습니다. 그 전에는 의견을 쓰는 데 매우 부지런하다고 생각했습니다. 그러나이 일을하는 다른 사람들을 관찰하면 코드 조각 (특히 JavaScript)을 몇 번이나 보았는지 알 수 있었고 당시 내가하고있는 일을 상기시키기 위해 한 줄을 추가했으면 좋겠다. 10 초 작업하면 5 분 (또는 그 이상) 시간을 절약 할 수 있습니다. 이것은 축적되며 지금은 내가 개선하기 위해 노력하고있는 곳입니다.

배운 교훈 : 더 많은 메모를 작성하십시오.

레슨 3 : 포지셔닝

우리는 기본적인 HTML로 시작했고 솔직히 친구의 눈을 보았을 때 거의 즉시 영광을 잃었습니다. (사전 작성된 CSS 편집과 달리) 바로 작동하는 것을 볼 수 없을 때 너무 지루해 보입니다. 그러나 우리는 인내하고 결과를 얻었습니다.

날 믿어, 빈 주위에 1 픽셀 테두리를 사용하지 마십시오

요소가 배치됩니다. 청중의 관심을 매우 빨리 잃게됩니다. 비어 있지 않은 한 개 또는 아기 요다 나 피자의 사진을 넣으십시오. 그런 다음 Flexbox로 향했습니다. 처음에 우리는 너무 많은 CSS 그리드가 있음을 알았습니다. 우리는 CSS 그리드를 간단히 살펴 보았지만 그것에 대해 많은 기사를 읽을 때 많은 사람들이 독자들이 CSS, 특히 Flexbox에 이미 익숙하다고 가정합니다. 내 친구는 Flexbox로 시작하기로 결정했습니다.

나는 인정한다 : 나는 UI 프레임 워크 (특히 부트 스트랩)를 사용하는 데 너무 익숙해서 포지셔닝을 위해 CSS를 거의 쓰지 않는다. 나는 그것이 어떻게 작동하고 (대부분) 진술을 알고 있지만, 비교적 쉬운 상황에서도 여전히 직접 쓰지 않습니다. 가르치면서 UI 프레임 워크에 대한 나의 의존성에 대해 생각하게 만들었습니다. 그렇습니다. 그들은 의심 할 여지없이 훌륭하고 프로젝트에서 많은 시간을 절약하지만, 최근 프로젝트에서 Bootstrap을 기본적으로 두 페이지 만 가지고있을 것입니다.

학습 한 교훈 : 프로젝트가 작고 위치에 필요한 요소의 수가 최소화되면 프레임 워크를 포기하고 코드를 처음부터 작성하는 것을 고려하십시오! 최종 결과는 더 가볍고 빠르며 더 만족 스러울 것입니다!

레슨 4 : 조판

나는 타이포그래피를 좋아한다. 나는 지난 몇 년 동안 훌륭한 디자이너들과 함께 일할만큼 운이 좋았으며 타이포그래피의 뉘앙스를 파악하는 데 실제로 도움이되었습니다. 라인 높이 및 단어 간격과 같은 것들이 어떻게 변하는 것이 디자인을 정상에서 탁월하게 높일 수 있는지 놀랍습니다. 이것은 내가 마스터하는 법을 배우고 싶어하는 신입생을 원하는 것입니다. 글쎄, 나는 처음에 관심이있는 유일한 것이 글꼴을 바꾸는 것이었기 때문에 귀찮게 할 필요는 없으며, 나에게 중요한 것은 우리가 사용할 수있는 글꼴의 수였습니다. 선택은 거의 무한합니다. 웹 글꼴과 파운드리를 제공하는 서비스는 지난 몇 년 동안 가능한 모든 것이 매우 빠른 속도로 로딩 시간에 약간의 영향을 미치는 시점까지 급증했습니다.

그러나 디자이너 (및 나와 같은 프론트 엔드 개발자)에 관한 것은 다음과 같습니다. 우리는 글꼴 선택에 관해서는 약간 좁을 수 있습니다. 디자인은 동일한 서비스의 동일한 글꼴 (Roboto 및 Open Sans?)을 고수하는 경향이 있습니다. 왜냐하면 우리는 그들이 구현하고 일하기 쉽다는 것을 알고 있기 때문입니다. 초보자와 함께 글꼴을 탐색하면 오래된 표준을 넘어서 새로운 것을 시도해야했습니다. 나는 이제 새로운 조합을 찾고 있으며 화면에서 어떻게 작동하는지, 디자인의 전반적인 모양과 느낌에 미치는 영향을 조정하고 있습니다. 요컨대, 타이포그래피에 대해 다른 사람들을 가르치면서 내 자신의 타이포그래피 기록이 향상되었으며, 이는 2017 년경에 갇혀있을 수 있습니다.

학습 한 교훈 : 타이포그래피의 최신 업데이트를 유지하십시오.

레슨 5 :: 호버는 모든 것을 재미있게 만듭니다

지금까지 모든 것이 잘 진행되고 있지만, 상상할 수 있듯이 상황은 여전히 ​​정적입니다. 실제 계획이 없다면, 우리는 실수로 요소의 호버 효과를 추가했는데, 이는 처음으로 색상을 바꾸는 것처럼 즉시 그녀의 관심을 끌었습니다!

호버는 상호 작용을 추가하고 감동을 쉽게 할 수 있으므로 초보자가 시도하기에 완벽합니다. 객체를 스케일, 사각형에서 원으로 변경하고 컨텐츠를 숨기십시오. 모든 것이 쉽게 수행 할 수 있으므로 호버링은 새로운 프로그래머가 즉각적인 결과를 얻는 이상적인 방법입니다. 다음은 다음과 같습니다. " ''이렇게 플레이 '는 다른 문을 열 것입니다. "내가 이렇게한다면 어떨까요?" 이것은 우리 중 많은 사람들이 우리의 일상 업무에 거의 묻지 않는 질문입니다. 명확한 디자인을 사용하면 플레이 할 기회가 거의 없으며 실험 할 기회도 거의 없습니다.

마지막 수업은 다음과 같습니다. 시간을 보내십시오. 그냥 물었습니다.“어떻게 이렇게 하시나요?” 새로운 것을 배우고 CSS에 대한 새로운 것을 배우고 일상 생활에서 다시 가져올 수있는 것을 이해하도록 강요합니다. 실험 (또는 더 나은 놀이)은 나를 더 나은 디자이너로 만들고 더 많은 일을 할 것입니다.

배운 교훈 : 놀기 시간을 만듭니다.

결론적으로

초보자 CSS를 가르치는 시간이 나에게 무엇이든 가르쳐 주었다면, 나는 다시 처음부터 코드를 거의 쓰지 않는 것입니다. 코드 스 니펫과 자동 완성은 몇 시간을 절약했지만,이 편의 시설은 매우 기본적인 것을 잊게 만들었습니다. 내가 알아야 할 것. 다른 사람들을 가르치면서, 나의 코딩은 가끔 15 분 밖에 걸리지 않아도 전반적으로 개선되었으며, 나의 지평선은 이전에 고려되지 않은 새로운 아이디어와 기술에 개방되어 있습니다.

내 친구들은? 글쎄, 그녀는 짧은 시간 동안 CSS에 너무 집착하여 우리는 함께 HTML을 포함한 온라인 과정을 수강하고 있었고 이제 그녀는 HTML이 무엇을 할 수 있는지 알았으므로 지루하지 않은 것처럼 보이지 않았습니다!

위 내용은 코드에서 더 나아지고 싶습니까? 누군가 CSS를 가르치십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!