Odin 프로젝트 - CSS 소개

안녕하세요?,

저는 경력 3년의 프론트엔드 개발자입니다. 나는 항상 내 지식의 격차를 해소하고 풀 스택 개발자가 되고 싶었습니다. 나는 Odin 프로젝트를 시작하려고 여러 번 시도했지만 지속적으로 완료하지 못했습니다. 이번에는 꼭 버텨서 실력을 키워야겠다는 다짐입니다.

진행 상황을 추적하기 위해 각 Odin 프로젝트 장에서 배운 내용을 자세히 설명하는 일련의 블로그 게시물을 게시할 예정입니다. 나의 개발 일기로 여기세요.

내가 배운 주제를 추가하고 이전에 몰랐던 내용을 공유하겠습니다.

CSS를 HTML로 시작하고 이전에 겪었거나 적어도 알고 있는 모든 입문 작업을 시작합니다.

배운 주제

• 선택자

1. 범용 선택기
2. 유형 선택기
3. 클래스 선택기
4. ID 선택기
5. 그룹 선택기
6. 체인 선택기

• 결합자 나는 결합자를 사용하는 방법에 대해 알고 있었지만 그 특정 용어는 몰랐습니다. 또한 그룹화 또는 연결이 아닌 선택기 간의 관계에 관한 정의입니다.
• 하강 결합자

기본 CSS 속성

• 색상, 배경색
• 타이포그래피

1. 글꼴 계열 및 일반 글꼴 계열

• 이미지 높이 및 너비
  그래서 제가 여기서 배운 또 다른 점은 HTML의 이미지에 항상 너비와 높이 속성을 모두 지정하는 것이 좋습니다. 이렇게 하면 페이지 렌더링 중에 브라우저가 이미지에 적절한 공간을 확보하여 이미지가 로드될 때 콘텐츠 레이아웃이 예기치 않게 이동하는 것을 방지할 수 있습니다. 이미지의 원래 가로 세로 비율을 유지하려면 너비 속성만 변경하고 높이를 '자동'으로 설정하면 됩니다. 이미지의 비율에 따라 높이가 자동으로 조정됩니다.

• 외부 CSS

• 내부 및 인라인 CSS

기술 책임자가 HTML에 인라인 CSS를 추가한 사례가 기억납니다. 그는 노련한 전문가였고 나는 아직 이 분야에 익숙하지 않았기 때문에 그의 결정에 의문을 제기하는 것을 망설였습니다.

그러나 인라인 CSS 사용을 최소화하도록 제안하는 것이 더 효과적인 접근 방식이었을 것이라는 점을 이제 이해합니다. 인라인 스타일을 규칙이 작동하는 데 꼭 필요한 스타일로만 제한함으로써 특정성을 과도하게 적용하는 것을 방지하고 더 깔끔하고 유지 관리하기 쉬운 코드베이스를 유지할 수 있습니다.

또한 제가 배운 내용을 요약하여 매주 팟캐스트를 발행할 예정입니다.

위 내용은 Odin 프로젝트 - CSS 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!