2022 년에 어떤 CSS를 절대 알아야합니까?

CSS는 점점 더 강력한 기능으로 빠르게 발전하고 있으며 학습 곡선이 더 가파릅니다. 이 기사는 오늘날의 프론트 엔드 개발에서 어떤 CSS 지식이 절대적으로 필요한지 탐구 할 것입니다.

Sacha Greif는 CSS가 너무 큰지 공개적으로 의문을 제기했습니다. 최근 몇 년 동안 브라우저는 컨테이너 쿼리, 상대 색상 구문, 코스케이드 레이어, 논리적 특성, 미디어 쿼리 스코프, 독립 변환 등 여러 가지 새로운 기능을 추가했습니다. : () 선택기 등, 향후 CSS 스위칭, 중첩, 색상 믹싱, 스크롤 링크 애니메이션, 스코프 스타일 등도 나타날 수 있습니다. 의심 할 여지없이 초보자와 선임 프론트 엔지니어 모두에게 새로운 학습 문제가 발생합니다.

모든 CSS 속성과 작동 방식을 완전히 파악하는 것은 과거의 시제가되었습니다. 그렇다면 어떤 CSS 지식이 절대적으로 필요합니까?

Vincas Stonys와 Chris는 각각 관련 목록을 나열하려고 시도했습니다. 가장 중요한 5 가지 CSS 속성 및 선택기를 나열 해야하는 경우 내 목록은 다음과 같습니다. 속성

속성은 특히 학습과 관련하여 중요합니다. 포괄적 인 디자인의 원칙을 마스터하고 사용자의 언어에 관계없이 올바른 레이아웃을 만드는 데 도움이됩니다. 이해하면 논리적 특성과 값을 이해 한 다음 문서 흐름을 이해하고 블록, 인라인, 시작 및 물리적 방향이 아닌 끝과 같은 논리적 방향에서 생각할 수 있습니다.

속성 견고한 속성 지식이 없으면 우수한 CSS 코드를 작성하기가 어렵습니다. 레이아웃을 생성하기위한 속성이자 프레임 워크입니다. 그것 없이는 Flexbox 또는 CSS 그리드가 없으므로 이러한 중요한 기능을 이해하는 것이 중요합니다.

또한 속성과

속성은 서로를 보완합니다. 일단

가 문서 흐름과 논리적 방향에 대한 아이디어를 제공하면

속성은 정확히 필요한 것입니다. 요소의 정상 흐름을 변경하는 데 사용하거나 (예 : 블록 요소를 인라인 요소로 변경) 레이아웃을 시작할 수 있습니다 (예 : 유연한 레이아웃 컨텍스트 생성).

writing-mode , 및

속성 이 세 가지 속성은 박스 모델의 일부이며 간격 및 스타일을 제어하는 ​​데 사용되며 모두 CSS 길이 장치에 대한 이해가 필요합니다. 이러한 속성의 기능과 계산 된 요소 크기에 영향을 미치는 방법을 이해하면 스타일 제어를 크게 향상시키고 요소 크기가 기대치에 맞지 않는 일반적인 CSS 문제를 제거합니다. writing-mode writing-mode 및

pseudo elements

및 display는 일반적으로 함께 배우는 두 개의 의사 요소입니다. 이들은 CSS의 힘을 보여주는 다양한 UI 효과, 심지어 완전한 단일 DIV 삽화를 만드는 데 사용될 수 있습니다.

쿼리 쿼리는 유연한 반응 형 레이아웃과 다른 시청 컨텍스트를 생성하는 핵심입니다. 컨테이너 쿼리가 성숙함에 따라 교체 될 수 있지만 현재

쿼리는 반응 형 디자인 학습에 대한 훌륭한 소개입니다. display또한 쿼리는 CSS의 조건부 특성에 대한 예비 이해를 제공합니다. 장치 유형 (예 : 화면 또는 인쇄) 또는 브라우저 뷰포트 조건 (예 : 너비 및 GT; = 768px)을 기준으로하든 구문은 다른 조건에 맞게 최적화 된 레이아웃을 만드는 데 매우 유용합니다.

쿼리는 또한 사용자의 선호도에 따라 스타일을 적용 할 수 있기 때문에 접근성과 관련이 있습니다 (예 : ). @media 다른 속성 및 셀렉터를 언급 할 가치가있는 다른 속성 및 셀렉터 물론 : 와 같은 다른 중요한 CSS 속성 및 선택기가 많이 있습니다. @media @media prefers-reduced-motion

• calc()
(특히 중요)
• has()
CSS 학습은 rote 속성 목록보다 더 중요합니다. 그것은 단계별 프로세스이며, 내가 선택한 5 개의 속성과 셀렉터는 당신이 좋은 기초를 세우고 CSS에 대한 더 깊은 학습을 준비하는 데 도움이 될 수 있습니다.

위 내용은 2022 년에 어떤 CSS를 절대 알아야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!