CSS를 제대로 배우세요

CSS 제대로 배우기

CSS(Cascading Style Sheets)는 웹 개발자가 웹사이트 스타일을 지정하는 데 사용됩니다.

웹 개발을 배우기 시작했을 때 CSS에 대해 매우 혼란스러웠습니다. 제가 겪었던 가장 어려운 점은 속성을 기억하고 코드를 유지 관리하는 것이었습니다. 이 글에서는 초보자들이 제가 배우면서 저지른 실수를 피할 수 있도록 도와드리겠습니다.

1. 연습
프로그래밍은 완전히 외울 수 없는 일입니다. 연습을 통해 이해하는 것이 전부입니다.
CSS 연습을 하면서 내용을 잘 외우지 못해서 좀 힘들었어요. "복사해서 붙여넣기"를 하면 제 실력이 망가질 것 같아서 피하려고 했어요. 마지막에는 CSS 코드 복사 및 붙여넣기를 완료했습니다. 이제 복사하여 붙여넣으면 상황이 더 나아질 것이라고 말하는 것이 아닙니다. 하지만 복사하여 붙여넣은 CSS 코드를 실행할 때 무슨 일이 일어나는지 이해하려고 하면 됩니다. CSS 속성을 외우는 것보다 훨씬 낫습니다.

(예) 흰색 텍스트로 둥근 검정색 버튼 스타일을 지정하고 마우스를 올리면 배경색과 텍스트 색상을 바꾸려는 경우. 다음과 같은 기능을 수행하는 CSS 코드 블록을 지나갈 수 있습니다.

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

무엇을 하는지 이해하지 않으면 별 도움이 되지 않습니다.
이해하셨다면:

• 테두리: 2px 솔리드; 버튼에 2픽셀의 실선 테두리를 추가했습니다.
• border-radius: 16px로 인해 16픽셀 더 둥글게 되었습니다.
• 배경색: #000000; 배경을 검은색으로 만들었어요
• 색상: #ffffff; 텍스트를 흰색으로 만들었습니다. :hover,
• 배경색: #ffffff;
• 및 색상: #000000; 마우스를 올리면 배경이 흰색으로, 텍스트가 검정색으로 변합니다.

다음번에는 복사 붙여넣기 없이 버튼을 코딩할 수 있으며 테두리, 테두리 반경, 배경색, 색상 및 :hover에 대한 기본적인 이해를 갖게 되며 더 많은 용도로 사용할 수 있게 됩니다. 단순한 버튼보다 복사 붙여넣기 하는 코드를 이해해야 하는 이유입니다.

리소스:
코드를 복사하여 붙여넣는 위치도 중요합니다. 초보자로서 코드에 대한 좋은 설명이 필요하기 때문입니다.

이 작업을 잘 수행하는 사이트가 많이 있지만 다음을 추천합니다.

1. 괴짜를 위한 괴짜:

GeeksforGeeks는 방대한 강좌 라이브러리, 오프라인 강의실 프로그램, 튜토리얼, 기사, 코딩 과제, 연습 문제 등을 통해 전 세계 수백만 명의 개발자와 기술 애호가에게 컴퓨터 과학 및 프로그래밍 리소스를 제공하는 선도적인 온라인 플랫폼입니다.

이 플랫폼은 좋은 설명과 함께 코드를 제공하며 개인적으로 가장 좋아하는 플랫폼입니다.

GeeksForGeeks 방문

2. W3Schools:

W3Schools는 웹 개발의 모든 측면을 다루는 웹 개발자를 위한 학교입니다: HTML 튜토리얼. CSS 튜토리얼. 자바스크립트 튜토리얼. PHP 튜토리얼.

이 웹사이트도 "Geeks For Geeks"와 거의 동일합니다. 하지만 설명하는 기술이 다르기 때문에 편한지 불편하신지에 따라 달라집니다.

W3Schools 방문

코드 유지 관리:
웹 개발을 배울 때 두 번째로 짜증나는 점은 CSS 코드가 너무 커지는 것이었습니다. 복잡한 웹사이트 프로젝트의 CSS 코드를 유지하는 것이 점점 어려워지고 있었습니다. TailwindCSS와 같은 프레임워크 덕분에 항상 원시 CSS를 작성할 필요가 없습니다.

TailwindCSS:

Tailwind CSS는 오픈 소스 CSS 프레임워크입니다. Bootstrap과 같은 다른 프레임워크와 달리 버튼이나 테이블과 같은 요소에 대해 미리 정의된 일련의 클래스를 제공하지 않습니다. 대신, 혼합 및 일치를 통해 각 요소의 스타일을 지정하는 데 사용할 수 있는 "유틸리티" CSS 클래스 목록을 만듭니다.

TailwindCSS는 이전 버튼 예제와 같은 CSS 코드를 만듭니다.

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

다음과 같은 수업:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

다음과 같이 HTML 버튼 요소에 추가할 수 있습니다.

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

ReactJS와 같은 다른 프레임워크에서는 초보자에게 TailwindCSS를 추천합니다. 배우고 프로덕션에서 사용하는 것이 훨씬 쉽습니다. CSS 코드를 유지 관리하기 쉽게 만듭니다. 또한 ReactJS와 함께 사용하여 코드 효율성과 유지 관리성을 높일 수도 있습니다. TailwindCSS에는 매우 상세하고 이해하기 쉬운 코드 설명이 포함된 문서도 있습니다.

TailwindCSS 방문

결론:
CSS를 배우는 것은 어려울 수 있지만 이해하면서 자주 연습하면 많은 도움이 될 것입니다.

단순히 코드를 복사해서 붙여넣지 말고 그 기능도 이해하는 것이 CSS를 배우는 올바른 방법입니다.

위 내용은 CSS를 제대로 배우세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!