많은 사람들이 CSS는 프로그래밍 언어가 아니라고 주장합니다. 나는 동의한다 - 더 힘들다. CSS를 숙달하려면 디자인, 결정, 독창성, 경험 및 코딩 기술이 필요합니다 (특히 다음과 같은 전처리기를 사용할 때) 말대꾸).
CSS 제안 브라우저의 레이아웃과 스타일. 브라우저는 이러한 제안을 선택하는 방식에 관계없이 이러한 제안을 해석 할 수 있으며 사용자 나 장치는 속성을 무시하거나 무시할 수 있습니다. 모든 장치와 화면 해상도에서 잘 작동하는 고성능 코드를 작성하는 것은 거의 시도하거나 성공적으로 완료해야 할 과제입니다. 그러나 보상은 상쾌 할 수 있습니다.
가장 쉬운 것부터 시작하여 다음 프로젝트 제안은 다음 사이트에서 제공되는 책을 사용하여 CSS 숙달로 여행하는 데 도움이됩니다. SitePoint 프리미엄.
1. 프린터 친화적 인 사이트 만들기
작업중인 사이트를 방문하여 페이지를 인쇄 (또는 인쇄 미리보기)하십시오. 결과에 만족하십니까?
HTML 페이지는 인쇄 매체에서 반드시 잘 작동하지 않는 연속 매체입니다. 부적절한 섹션, 크기 조정, 텍스트 크기, 열 크기 및 누락되거나 잘린 내용으로 인해 거의 개발자가 고려할 수없는 인쇄 환경이 만들어집니다.
다행히 인쇄 CSS는 몇 시간 내에 개발 될 수 있습니다. 일반적으로 스타일을 재설정하고 (흰색 바탕에 검은 색), 불필요한 섹션 (메뉴, 영웅 이미지, 양식, 소셜 미디어 위젯 등)을 제거하고 레이아웃을 선형화하며 용지 및 잉크 요구 사항을 줄입니다.
탐구하다 브라우저 기반 개발자 도구 (의 CSS 마스터) and 브라우저 개발자 도구의 비밀 인쇄 렌더링으로 전환 한 후 스타일을 검사하고 수정하는 방법을 알아 봅니다.
조건부로 CSS 적용 정의하는 방법을 설명합니다 @media 다음을 포함한 쿼리 규칙 print 스타일 시트.
당신을 고려하십시오 CSS 사용자 정의 특성에 대한 전략 안내서 (의 웹 디자인의 새로운 개척)를 사용하여 CSS 변수가 인쇄 속성에 도움이 될 수 있는지 확인합니다. 또한 고려 접근 용이성 (의 CSS 애니메이션 101)를 사용하여 애니메이션을 끄거나 최상의 상태로 인쇄하십시오.
마지막으로, CSS로 프린터 친화적 인 페이지를 만드는 방법 (의 CSS 도구 및 기술)는 잉크 및 용지 비용을 절약 할 수있는 팁이 포함 된 전체 인쇄 최적화 자습서를 제공합니다.
2. 기존 사이트에 테마 적용
단일 색 구성표가 지루합니다! 누구나 OS 및 응용 프로그램에 어두운 모드 옵션이 필요하므로 웹 사이트에 추가하지 않으시겠습니까?
최근까지 테마 스위처는 일반적으로 JavaScript 기반 스위칭 제어 기능이있는 추가 스타일 세트를 필요로했습니다. 그러나 최신 브라우저는 CSS 사용자 정의 속성 (변수) 및 prefers-color-scheme @media 규칙.
테마 전략 (의 웹 디자인의 새로운 개척)는 새 테마를 디자인 할 때 다양한 아이디어와 고려 사항을 제공합니다.
조건부로 CSS 적용 (의 CSS 마스터)는 정의하는 방법을 설명합니다 @media 다음을 포함한 쿼리 규칙 prefers-color-scheme.
마지막으로, 최신 CSS : CSS 다크 테마 추가 (의 현대 CSS)는 전체 어두운 테마 사용 자습서를 제공합니다.
3. 양식 레이아웃 재 작업
웹 사이트에서 문의 또는 등록 양식과 같은 양식을 검사하십시오. 최근에 코딩되지 않았다면 컨테이너 DIV와 플로트 기반 레이아웃으로 구현되어 작은 화면에서 깨질 수 있습니다. 오래된 양식은 불필요한 JavaScript를 사용하거나 접근성이 떨어질 수 있습니다.
등록 양식 (의 양식 디자인 패턴)는 HTML5를 사용하여 양식을 디자인, 스타일 및 코딩하는 가장 좋은 방법을 설명합니다.
CSS Grid를 사용하면 미디어 쿼리에 의존하지 않고도 불필요한 마크 업을 제거하고 방탄 형 레이아웃을 만들 수 있습니다. 다음 CSS 그리드 자습서를 통해 속도를 높일 수 있습니다.
마지막으로, CSS 그리드로 양식 만들기 (의 CSS 그리드 레이아웃)는 이전 브라우저의 플로트 폴 백이 포함 된 그리드 기반 양식 레이아웃을 제공하는 전체 자습서를 제공합니다.
4. 더 빠른 사이트 만들기
2020 년 초에 평균 웹 페이지 2MB 다운로드 필요 일반 휴대 기기에 완전히 표시 되려면 20 초가 걸립니다. CSS는 65 개 파일에 걸쳐 XNUMXKB를 차지합니다. 그다지 중요하지는 않지만 스타일 시트 속성은 차이를 만들 수 있습니다.
몇 시간 동안 기존 사이트를 검사하여보다 효율적인 CSS로 이미지, 글꼴 및 JavaScript 효과를 대체하거나 최적화 할 수 있는지 확인하십시오. CSS 코드는 커질 수 있지만 전체적인 무게는 줄어들고 성능은 눈에 띄게 향상됩니다.
테스트 도구 (의 웹 성능 향상 시작) and UI 응답 성을위한 디버깅 (의 CSS 마스터) 최신 브라우저 DevTools를 사용하여 성능을 평가하고 최적화 목표를 찾는 방법을 설명합니다.
웹에 자산로드 (의 웹 디자인의 새로운 개척)에서는 중요한 CSS 및 점진적 CSS로드와 같은 기술을 사용하여 스타일 시트를 효과적으로로드하는 방법을 설명합니다. CSS 성능 최적화를위한 20 가지 팁 (의 현대 CSS)는 실용적인 팁을 제공합니다.
마지막으로, 웹 성능 향상 시작 사이트에 모든 사람이 빠르게 머무를 수 있도록 수십 가지의 빠르고 집중적이며 인생을 변화시키는 개발 제안이 포함되어 있습니다.
5. 새 프로젝트 또는 CSS 구성 요소 시작
위의 프로젝트 제안은 기존 사이트를 개선하는 데 사용될 수 있지만 처음부터 새 프로젝트를 시작할 때 제한이나 제약은 없습니다. 고려해야 할 옵션 :
- 온라인 이력서 작성. 반응이 좋고, 잘 인쇄하며, 모든 자산을 단일 HTML 파일로 인코딩하여 이메일을 통해 보낼 수있는 보너스 포인트. (팁 : 이메일 시스템에 의해 차단되지 않도록 JavaScript를 추가하지 마십시오.)
- 인터랙티브 포트폴리오 구축. 항목을 클릭 할 때 추가 정보가 포함 된 모든 사이트의 그래픽 목록. 그리드 레이아웃이 이상적이지만 실제로 도전을 원한다면 벽돌 레이아웃. (CSS Grid는 아직이를 구현할 수 없지만 CSS 열 또는 세로로 정렬 된 Grid 레이아웃을 사용하여 달성 할 수있는 방법을 고려하십시오.)
- 그래픽 디자인 코딩. 아마도 매력적인 아이디어를 선택하십시오 Dribbble 또는 유사한 디자인 커뮤니티에서 HTML5 및 CSS3을 코딩합니다. 프레임 워크 나 JavaScript없이 생성 할 경우 보너스 포인트!
- CSS 전용 이미지 만들기. 의사 요소 및 CSS 모양으로 구동되는 유용한 아이콘 세트를 만들거나 그라디언트 및 그림자를 사용하여 이미지를 만듭니다.
- SVG 및 CSS 애니메이션 실험. 매력적인 로고, 차트, 진행률 표시 줄, 활동 스피너 등을 만들어보십시오.
개발자 및 브라우저 도구 :
CSS 그리드 아이디어 :
반응 형 CSS 기술 :
CSS 전환 및 애니메이션 :
CSS와 SVG의 결합 :
이제 읽기를 중단하고 코딩하십시오!
출처 : https://www.sitepoint.com/master-modern-css-projects/?utm_source=rss
