현대 CSS를 마스터하는 데 도움이되는 5 개의 프로젝트-CSS 튜토리얼-php.cn

5 Projects to Help You Master Modern CSS 많은 사람들은 CSS가 프로그래밍 언어가 아니라고 생각하며 동의합니다. 마스터하기가 더 어렵습니다. CSS의 숙련도에는 설계 능력, 결정, 창의성, 경험 및 코딩 기술 (특히 SASS와 같은 전처리기를 사용할 때)이 필요합니다.

CSS는

레이아웃과 스타일을 브라우저에 제안합니다. 브라우저는 이러한 제안을 마음대로 설명 할 수 있으며 사용자 나 장치조차도 모든 속성을 무시하거나 덮어 쓸 수 있습니다. 모든 장치 및 화면 해상도에서 잘 작동하는 고성능 코드를 작성하는 것은 어려운 일이며이를 시도하거나 성공적으로 완료하는 사람은 거의 없습니다. 그러나 보상은 흥미로울 수 있습니다.

가장 쉬운 시작 방법부터 다음 프로젝트 제안은 Sitepoint Premium에서 제공하는 책을 CSS Mastery Path를 시작하는 데 도움이됩니다.

키 포인트

CSS의 숙련도에는 설계 능력, 결단력, 창의성, 경험 및 코딩 기술이 필요합니다. 모든 장치 및 화면 해상도에서 잘 작동하는 고성능 코드를 작성하는 것은 어려울 수 있지만 보상은 흥미로울 수 있습니다.

CSS 기술을 향상시키는 데 도움이되는 5 가지 프로젝트에는 웹 사이트를보다 쉽게 인쇄 할 수 있도록, 기존 웹 사이트에 최신 CSS 테마 적용, 양식 레이아웃 재 설계, 웹 사이트 속도 증가, 새로운 프로젝트 또는 CSS 구성 요소 시작을 처음부터 시작하는 것이 포함됩니다.

최신 브라우저 개발자 도구를 사용하면 성능을 평가하고 최적화 목표를 발견하는 데 도움이 될 수 있습니다. 중요한 CSS 및 프로그레시브 CSS로드와 같은 기술은 스타일 시트가 효율적으로로드되도록합니다.

현대 CSS 프로젝트를 마스터하려면 CSS 재설정 사용, 반응 형 디자인에 대한 모바일 우선 접근 방식, SASS, CSS GRID 및 Flexbox와 같은 CSS 전 처리기, CSS를 구성하고 좋은 의견을 추가하는 등 CSS 기본 및 모범 사례를 이해해야합니다.

웹 사이트를 더 쉽게 인쇄 할 수 있도록합니다
작업중인 웹 사이트를 받고 인쇄 (또는 미리보기) 페이지를 인쇄하려고합니다. 결과에 만족하십니까?

HTML 페이지는 연속 미디어이며 인쇄 매체에 반드시 잘 작동 할 수는 없습니다. 부적절한 챕터, 스케일링, 텍스트 크기, 열 크기 및 누락 또는 자른 콘텐츠는 모두 인쇄 경험에 대한 액세스 권한이 부족할 수 있으며 개발자는이 문제를 고려할 수 없습니다.

운 좋게도 CSS 인쇄는 몇 시간 안에 개발 될 수 있습니다. 이것은 일반적으로 스타일을 재설정하고 (검은 색의 흰색 텍스트), 불필요한 장 (메뉴, 영웅 이미지, 양식, 소셜 미디어 위젯 등), 선형 레이아웃 및 종이 및 잉크 사용을 줄이는 문제입니다.

CSS 마스터의 브라우저 기반 개발자 도구 (CSS 마스터)와 브라우저 DevTool Secrets를 통해 인쇄 렌더링으로 전환 한 후 스타일을 확인하고 수정하는 방법을 배우십시오.

~~CSS 마스터에서 CSS를 조건부로 적용하면 인쇄 스타일 시트를 포함한 @Media 쿼리 규칙을 정의하는 방법에 대해 설명합니다.~~

CSS 변수가 인쇄 속성에 도움이 될 수 있는지 확인하기 위해 CSS 사용자 정의 속성 (웹 디자인의 새로운 프론티어에서)에 대한 전략 가이드를 고려하십시오. 또한 애니메이션을 끄거나 인쇄하려면 접근성 (CSS Animation 101)에서 접근성을 고려하십시오.

마지막으로 CSS (CSS Tools & Skills)를 통해 프린터 친화적 인 페이지를 만드는 방법은 잉크 및 종이 비용 절약을위한 팁을 갖춘 완전한 인쇄 최적화 자습서를 제공합니다.

단일 색 구성표는 지루합니다! 모든 사람은 운영 체제 및 응용 프로그램에서 어두운 모드 옵션을 기대하므로 웹 사이트에 추가하지 않겠습니까? 최근까지 테마 스위치에는 종종 추가 스타일 세트 및 JavaScript 구동 스위치 컨트롤이 필요했습니다. 그러나 최신 브라우저는 CSS 사용자 정의 속성 (변수)과 웹 디자인의 New Frontiers에서 테마를위한 전략은 새로운 테마를 디자인 할 때 다양한 아이디어와 메모를 제공합니다.
~~CSS를 조건부로 적용하는 것은 (CSS 마스터에서) 를 포함한 @Media 쿼리 규칙을 정의하는 방법을 설명합니다.~~

마지막으로, Modern CSS : CSS Dark 테마 추가 (현대 CSS)는 어두운 테마 활성화에 대한 완전한 튜토리얼을 제공합니다.

형식 레이아웃 prefers-color-scheme 를 재 설계하십시오

쿼리 또는 가입 양식과 같은 웹 사이트의 양식을 확인하십시오. 최근에 코딩되지 않으면 작은 화면에서 파손될 수있는 컨테이너 DIV 및 부동 기반 레이아웃을 사용하여 구현 될 수 있습니다. 기존 양식은 불필요한 JavaScript를 사용하거나 접근성이 좋지 않을 수 있습니다.

등록 양식 (양식 디자인 패턴)은 HTML5를 사용하여 설계, 스타일 및 인코딩하는 가장 좋은 방법을 설명합니다.

CSS 그리드를 사용하면 불필요한 태그를 제거하고 미디어 쿼리를 사용하지 않고 방탄 및 반응 형 레이아웃을 만들 수 있습니다. 다음 CSS 그리드 자습서는 신속하게 시작하는 데 도움이됩니다. prefers-color-scheme 프로덕션 준비 CSS 그리드 레이아웃 (웹 디자인의 새로운 프론티어) ~~CSS 그리드 (마스터 CSS) 및 로 레이아웃 생성 "CSS 그리드 레이아웃"( "점프 시작 응답 웹 디자인"에서)~~

마지막으로 CSS 그리드 (CSS 그리드 레이아웃에서)를 사용하여 양식을 훌륭하게 만들 수 있습니다. (CSS 그리드 레이아웃에서) 구형 브라우저에 대한 그리드 기반 양식 레이아웃 및 부동 폴백을 제공하는 완전한 튜토리얼을 제공합니다.

2020 년 초, 평균 웹 페이지에는 2MB의 다운로드가 필요했으며 일반 모바일 장치에 완전히 표시되는 데 20 초가 걸렸습니다. CSS는 65KB를 차지하며 7 개의 파일로 배포됩니다. 이것은 중요하지는 않지만 스타일 시트 속성은 영향을 미칩니다.
기존 웹 사이트를 확인하여보다 효율적인 CSS로 이미지, 글꼴 및 JavaScript 효과를 교체하거나 최적화 할 수 있는지 확인하는 데 몇 시간을 소비합니다. CSS 코드가 증가 할 수 있지만 전체 무게가 떨어지고 성능이 크게 향상됩니다.
테스트 도구 (점프 시작 웹 성능) 및 UI 응답 성 디버깅 (CSS 마스터)은 현대식 브라우저 개발자 도구를 사용하여 성능을 평가하고 최적화 목표를 발견하는 방법을 설명합니다.
웹 디자인의 New Frontiers에서 자산을로드하면 중요한 CSS 및 프로그레시브 CSS로드와 같은 기술을 사용하여 스타일 시트가 효율적으로로드되도록하는 방법을 설명합니다. CSS 성능을 최적화하기위한 20 가지 팁 (현대 CSS)은 몇 가지 실용적인 팁을 제공합니다.
마지막으로, Jump Start 웹 성능에는 수십 개의 빠르고 깊고 삶을 변화시키는 개발 제안이 포함되어있어 웹 사이트가 모든 사람에게 빠르게 유지되도록합니다.

새 프로젝트 또는 CSS 구성 요소
1. 위의 프로젝트 권장 사항은 기존 웹 사이트를 개선하는 데 사용될 수 있지만 새로운 프로젝트를 처음부터 시작할 때 제한이나 제약이 없습니다. 고려해야 할 옵션 : 온라인 이력서를 만듭니다. 추가 포인트 : 반응 형이 있는지 확인하고 잘 인쇄하고 모든 리소스를 이메일을 통해 전송할 수있는 단일 HTML 파일로 인코딩합니다. (팁 : JavaScript를 추가하여 이메일 시스템에 의해 차단되지 않도록하십시오.) 대화식 포트폴리오를 만듭니다. 모든 웹 사이트의 그래픽 목록, 항목을 클릭 할 때 추가 정보가 표시됩니다. 그리드 레이아웃이 이상적이지만 실제로 도전하고 싶다면 벽돌 레이아웃을 사용해보십시오. (CSS 그리드는 아직이를 달성 할 수 없지만 CSS 열이나 수직 정렬 된 그리드 레이아웃을 사용하여이를 수행하는 방법을 고려하십시오.) 코딩 그래픽 디자인. 어쩌면 Dribbble 또는 유사한 디자인 커뮤니티에서 매력적인 아이디어를 선택하여 HTML5 및 CSS3을 사용하여 인코딩 할 수 있습니다. 추가 포인트 : 프레임 워크 나 JavaScript없이 작성하십시오! ~~CSS 전용 이미지를 만듭니다. 의사 요소와 CSS 모양을 사용하여 유용한 아이콘 세트를 만들거나 그라디언트와 그림자가있는 이미지를 작성하십시오.~~
  SVG 및 CSS 애니메이션을 시도하십시오. 매력적인 로고, 차트, 진행률 표시 줄, 활동 스피너 등을 만들어보십시오.
개발자 및 브라우저 도구 :
《DOM, CSS 및 애니메이션》 ( "브라우저 DevTool Secrets"에서) "Gulp.js를 사용하여 CSS 작업을 자동화하는 방법"( "CSS : 도구 및 기술") 《점프 스타트 Sass》
"CSS 디버깅 및 최적화 : 코드 품질 도구"( "CSS : 도구 및 기술") "CSS 디버깅 및 최적화 : 개발자 도구"( "CSS : 도구 및 기술") 《인생을 바꾸는 다이어트》 (점프 시작 웹 성능)
《비주얼 스튜디오 코드 : 웹 개발자를위한 엔드 투 엔드 편집 및 디버깅 도구》

CSS 그리드 개념 :
CSS 그리드 레이아웃을 사용하기 위해 사이트를 재 설계하는 ( "CSS 그리드 레이아웃에서") "쉽고 반응이 좋은 현대식 CSS 그리드 레이아웃"( "CSS 그리드 레이아웃") CSS 레이아웃을 플로트에서 Flexbox, 그리드로 점진적으로 향상시켰다 (CSS 그리드 레이아웃에서) 《CSS 그리드를 사용하여 카드 기반 텀블러 레이아웃을 재 설계하는 ( "CSS 그리드 레이아웃") 그리드 시스템을 사용한 더 나은 반응 형 구조 (점프 시작 응답 웹 디자인)
~~반응 CSS 기술 :~~
《14 필수 반응 형 CSS 기술》
《반응 형 디자인》
《점프 시작 반응 형 웹 디자인》

CSS 전환 및 애니메이션 :
CSS 애니메이션 101》
"전환 및 애니메이션"( "CSS Mas 《CSS 사용을 사용하는 실제 세계에서 변환》 (현대 CSS에서)
~~SVG와 함께 CSS를 사용하십시오 :~~
~~"SVG 애니메이션"( "실용 SVG") svg》 ( "CSS 마스터"에서) 를 사용하여 CSS를 사용합니다 《SVG》와 함께 CSS의 실제 사용 (현대 CSS)~~
지금 읽기를 중지하고 코딩을 시작하십시오!
현대 CSS 프로젝트를 마스터하는 FAQ 현대 CSS 프로젝트를 마스터하기위한 모범 사례는 무엇입니까?
현대 CSS 프로젝트를 마스터하려면 CSS 기본 사항과 모범 사례를 잘 이해해야합니다. 여기에는 CSS 재설정을 사용하여 다른 브라우저 간의 일관성을 보장하고 응답 디자인을위한 모바일 우선 접근 방식을 사용하고 SASS와 같은 CSS 전 처리기를 사용하여 CSS를 더 쉽게 유지할 수 있도록하는 것이 포함됩니다. 또한 CSS 그리드 및 Flexbox를 이해하면 코드가 적은 복잡한 레이아웃을 만드는 데 도움이됩니다. 마지막으로, CSS를 구성하고 좋은 의견을 추가하면 다른 사람 (또는 미래)이 코드를 이해하기가 더 쉬워 질 수 있습니다.
CSS 코딩 기술을 향상시키는 방법은 무엇입니까?
지속적인 연습과 학습을 통해 CSS 코딩 기술을 향상시킵니다. 먼저 CSS의 기본 사항을 이해 한 다음 점차 고급 주제로 이동합니다. 온라인 튜토리얼, 코딩 문제 및 오픈 소스 프로젝트는 실습 경험을 제공 할 수 있습니다. 또한 업계 전문가와 CSS 커뮤니티에 참여하면 최신 트렌드와 기술을 알 수 있습니다.
CSS를 사용할 때 발생하는 일반적인 과제는 무엇입니까? 이러한 도전을 극복하는 방법은 무엇입니까?
CSS를 사용할 때 몇 가지 일반적인 과제에는 브라우저 불일치 처리, 박스 모델 이해 및 복잡한 레이아웃 관리가 포함됩니다. 이는 CSS로 재설정 또는 정규화,
속성을 이해하고 CSS 그리드 또는 Flexbox를 사용한 레이아웃으로 극복 할 수 있습니다. 또한 CSS 전 처리기를 사용하면 대형 CSS 파일을 관리하고 코드를 더 쉽게 유지 관리 할 수 있습니다.
CSS를 사용하여 반응 형 디자인을 만드는 방법은 무엇입니까?
반응 형 디자인은 미디어 쿼리를 사용하여 CSS를 사용하여 만들 수 있으며, 이는 다양한 화면 크기에 다른 스타일을 적용 할 수 있습니다. 또한 CSS 그리드 및 Flexbox를 사용하여 화면 크기에 맞는 유연한 레이아웃을 만들 수 있습니다. 모바일 우선 접근 방식 (가장 작은 화면 크기로 시작하여 점차 더 큰 화면에 스타일을 추가)하면 효과적인 응답 디자인을 만드는 데 도움이됩니다.
어떤 고급 CSS 기술을 배워야합니까?
배워야 할 일부 고급 CSS 기술에는 CSS 애니메이션 및 전환, CSS 변수 및 CSS 사용자 정의 속성이 포함됩니다. 또한 의사 요소 및 의사 급 사용 방법을 이해하면보다 복잡한 스타일을 만드는 데 도움이 될 수 있습니다. Sass 이외의 CSS 전 처리기를 배우는 것이 좋습니다.
더 나은 성능을 위해 CSS를 최적화하는 방법은 무엇입니까?
CSS는 사용 된 CSS의 수를 최소화하고 속성 특성을 사용하고 값 비싼 CSS 특성의 사용을 줄임으로써 더 나은 성능을 위해 최적화 될 수 있습니다. 또한 CSS 압축기를 사용하면 CSS의 파일 크기를 줄여 로딩 시간을 가속화 할 수 있습니다.
고급 CSS 학습을위한 리소스는 무엇입니까?
온라인 자습서, 코딩 문제 및 문서를 포함하여 고급 CSS를 배울 수있는 온라인 리소스가 많이 있습니다. CSS- 트릭, MDN 웹 문서 및 Smashing Magazine과 같은 웹 사이트는 다양한 CSS 주제에 대한 심층적 인 기사와 가이드를 제공합니다. 또한 업계 전문가에 중점을두고 CSS 커뮤니티에 참여하면 소중한 통찰력과 학습 기회를 제공 할 수 있습니다.
CSS 문제를 디버그하는 방법은 무엇입니까?

브라우저 개발자 도구를 사용하여 CSS 문제를 디버깅하여 요소를 확인하고 응용 프로그램 스타일을보고 다른 스타일을 실시간으로 실험 할 수 있습니다. 또한 CSS 캐스케이드, 특이성 및 상속을 이해하면 특정 스타일이 예상대로 적용되지 않는 이유를 이해하는 데 도움이 될 수 있습니다.
CSS를 체계적으로 유지하고 유지하기 쉽게 유지하는 방법은 무엇입니까?
CSS는 일관된 이름 지정 규칙을 따르고 코드를 설명하기 위해 의견을 사용하여 CSS를 논리적 부품 또는 별도의 파일로 구성함으로써 정리하고 유지하기 쉽습니다. 또한 CSS 전 처리기를 사용하면 대형 CSS 파일을 관리하고 코드를 더 쉽게 유지 관리 할 수 있습니다.
웹 개발에서 CSS의 역할은 무엇입니까?
CSS는 웹 사이트의 외관과 느낌을 제어하여 웹 개발에 중요한 역할을합니다. HTML 요소에 스타일을 적용하고 반응 형 디자인을 만들고 애니메이션 및 전환을 만들 수 있습니다. CSS가 없으면 웹 페이지는 평범하고 스타일이 없어서 모든 웹 개발자에게 중요한 도구가됩니다.