2020 년 최고의 CSS 프레임 워크를 찾고 계십니까? ? 여기에 가장 인기 있는 CSS 프레임 워크를 나열하여 다양한 CSS 프레임 워크에 대한 자세한 개요를 한 번에 얻을 수 있습니다… !!

https://dev.to/theme_selection/best-css-frameworks-in-2020-1jjh

우리 모두 알고 있듯이 CSS 프레임 워크는 일반적인 웹 디자인을 추상화하고 개발자가 웹 앱에서 디자인을 더 쉽게 구현할 수 있도록 하는 코드 라이브러리입니다. 간단히 말해서 CSS 프레임 워크는 준비되어 사용할 준비가 된 CSS 스타일 시트 모음입니다.

CSS 프레임 워크를 사용하는 이유는 무엇입니까?

• 개발 속도 향상
• 브라우저 간 기능 활성화
• 좋은 웹 디자인 습관 시행
• 깔끔하고 대칭적인 레이아웃 제공
• 스타일링 워크 플로를 생산적이고 깨끗하며 유지 관리 할 수 ​​있습니다.

또한 탐색 모음 설정과 같은 일반적인 상황에서 사용하도록 구조화되어 있으며 종종 SASS 및 JavaScript와 같은 다른 기술에 의해 증폭됩니다. 적절한 CSS 프레임 워크의 가장 큰 장점은 처음부터 시작할 필요가 없기 때문에 시간이 절약된다는 것입니다.

사용 가능한 많은 CSS 프레임 워크가 있으며 물론 여기저기서 올바른 CSS 프레임 워크를 검색하기가 어렵습니다. 따라서 특정 CSS 프레임 워크에 대한 개요를 얻는 데 도움이 되는 2020 년 최고의 CSS 프레임 워크 목록을 준비했습니다.

아래 목록에 언급 된 이러한 프레임 워크를 사용합니다. 최소한의 시간 투자로 깨끗하고 유지 관리가 가능한 프로젝트를 구축 할 수 있는 완벽한 장비를 갖추게 됩니다.

2020 년 최고의 CSS 프레임 워크 

이 목록은 다음과 같은 신뢰할 수 있는 출처를 참조하여 신중하게 작성되었습니다.

• GitHub
• Slant.co
• Stackoverflow
• StackShare
• Bundlephobia
• Buitwith

1. Tailwind CSS : 저수준, 유틸리티 우선 프레임 워크 

Tailwind CSS는 사용자 지정이 가능한 저수준 유틸리티 우선 CSS 프레임 워크로, 재정의하기 위해 싸워야 하는 성가신 독단적인 스타일 없이 맞춤형 디자인을 구축하는 데 필요한 모든 빌딩 블록을 제공합니다.

다른 CSS 프레임 워크 (Bootstrap 또는 Materialise CSS)와 달리 사전 정의 된 구성 요소가 제공되지 않습니다. 대신 낮은 수준에서 작동하며 CSS 도우미 클래스 집합을 제공합니다. 이러한 클래스를 사용하면 사용자 지정 디자인을 쉽게 빠르게 만들 수 있습니다. Tailwind CSS를 사용하면 고유 한 디자인을 만들 수 있습니다.

Tailwind의 Github 페이지를 확인할 수 있습니다.

Tailwind를 사용하는 이유 : 

• 기본 테마 없음
• 실행 취소를 위해 싸워야 하는 디자인 결정을 내리지 않습니다.
• 고유 한 아이덴티티로 맞춤형 디자인을 구현할 수 있습니다.
• 사이트를 구축하기 위해 미리 디자인 된 위젯 메뉴가 함께 제공됩니다.

추가 정보 : 

• Release date: November 2, 2017
• Git star, Forks, Contributors: 27.1k, 1.3k, 255
• Hacker News, Reddit, Stack overflow: h, 245,525
• License: MIT
• No. of sites: 11,671
• Documentation: Good
• Core concept: Utility first, responsive
• Grid: Flexbox
• Browser Support: All modern browser
• Companies using: Setel, Livestorm, Mogic, Declik

2. 부트 스트랩 : 세계에서 가장 인기있는 프레임 워크 

Bootstrap은 대규모 커뮤니티 지원을 제공하는 세계 최고의 CSS 프레임 워크입니다. 이 프레임 워크는 HTML, SASS 및 javascript로 빌드됩니다. 현재 Bootstrap 4.5.0은 유틸리티 클래스 및 새 구성 요소에 대한 응답 성이 더 뛰어난 최신 버전입니다. 모든 장치에서 사용할 수 있고 개발자 친화적 인 반응 형 모바일 우선 프런트 엔드 개발을 대상으로 합니다. 부트 스트랩은 모든 최신 브라우저를 지원합니다. 부트 스트랩의 가장 큰 장점은 이 프레임 워크에 사용자 정의 파일 또는 CDN이 있는 훌륭한 자바 스크립트 구성 요소가 있다는 것입니다.

Chameleon – 무료 부트 스트랩 관리 템플릿을 확인할 수 있습니다. Modern Bootstrap 4 WebApp & Admin Dashboard Html Template 우아한 디자인, 깔끔하고 체계적인 코드입니다.

부트 스트랩 기반 Vuexy Admin 템플릿 및 Frest Admin 템플릿을 확인할 수도 있습니다. 둘 다 고급 사용자 지정이 가능하며 반응이 빠른 관리 템플릿입니다.

Bootstrap 5 Alpha가 이미 도착했습니다. 이에 대해 더 알고 싶다면 Bootstrap 5 Alpha Arrived 새로운 기능과 이에 대해 알아야 할 사항에 대한 기사를 확인하십시오.

부트 스트랩을 사용하는 이유 : 

• Bootstrap은 시작하기 위해 많은 예제와 사전 설정된 레이아웃을 제공합니다.
• Bootstrap을 사용하면 개발자는 다양한 구성 요소와 레이아웃을 쉽게 결합하여 새롭고 인상적인 페이지 디자인을 만들 수 있습니다.
• 사용자가 쉽게 이해할 수 있도록 이러한 레이아웃과 함께 많은 세부 문서가 제공됩니다.
• Bootstrap은 MIT 라이선스를 기반으로 하므로 무료로 사용하고 배포 할 수 있으므로 개발할 수 있고 커뮤니티에도 기여할 수 있습니다.
• Bootstrap의 Github 페이지 GitHub는 19,000 개 이상의 커밋과 2,000 명의 기여자로 구성되어 있습니다.

추가 정보 : 

• Release date: August 19, 2011
• Git star, Forks, Contributors: 144k, 70.2k, 2261
• Hacker News, Reddit, Stack overflow: 3.3k, 9k, 98k
• License: MIT
• No. of sites: 20,737,671
• Documentation: Excellent
• Customization: Basic GUI Customizer (need to put color values manually)
• Core concept: RWD and mobile-first
• Learning Curve: Mild
• Grid: Flexbox-based up to 12 column
• Browser Support: Latest Chrome, Safari, Firefox, Opera, Safari, Edge & IE 10+, Android v5.0+
• Companies using: Spotify, Coursera, Vine, Twitter, Walmart, and many more

이상적 : 

• CSS를 처음 접하는 초보자는 장애물 없이 부트 스트랩을 시작할 수 있습니다.
• 자바 스크립트에 대한 지식이 거의 없는 개발자로서 JS로 한 줄을 쓰지 않고도 Bootstrap 구성 요소를 사용할 수 있습니다.
• HTML과 CSS를 처음 사용하는 경우에도 UI를 일부 변경하려는 백엔드 개발자.

3. Materialise CSS : 머티리얼 디자인 기반 CSS 프레임 워크 

Materialise CSS는 사용자가 쉽게 끌 수 있는 최소한의 효과로 UI 구성 요소 모음이 있는 머티리얼 디자인을 기반으로 하는 반응 형 프런트 엔드 프레임 워크입니다. Materialise는 태블릿과 모바일에서 완벽하게 반응합니다. 배우기 쉬울 뿐만 아니라 훌륭한 문서가 제공됩니다. 이 프레임 워크에는 대규모 커뮤니티 지원과 긍정적 인 피드백이 있습니다. Materialise CSS를 사용하면 인상적인 색상 컬렉션 세트로 옵션을 사용자 정의 할 수 있습니다.

Materialise CSS 프레임 워크를 기반으로 하는 Materialise Admin 템플릿은 응답 성으로 인해 전 세계적으로 광범위하게 사용됩니다.

머티리얼 디자인을 기반으로 한 무료 관리 템플릿 / 부트 스트랩 템플릿을 찾고 있다면 materialize 관리 템플릿을 확인할 수 있습니다.

Materialise CSS를 사용하는 이유 : 

• Materialise의 문서 페이지는 매우 포괄적이고 시작하기 매우 쉽습니다.
• Materialise의 GitHub에는 3,800 개 이상의 커밋과 500 명의 기여자가 나열되어 있습니다.
• Materialise의 구성 요소 페이지에는 카드, 버튼, 탐색 및 더 많은 추가 기능이 포함되어 있습니다.

추가 정보 : 

• Release date: September 2011
• Git star, Forks, Contributors: 38k, 4.9k, 515
• Reddit, Stack overflow: 374, 3.2k
• License: MIT
• No. of sites: 111,481
• Documentation: Good
• Customization: Basic GUI Customizer
• Core concept: RWD,mobile-first, semantic
• Grid: XY 12- Column grid,Floted (flexbox in latest version)
• Browser Support: Chrome 35+, Firefox 31+, Safari 9+, Opera, Edge, IE 11+
• Company Using: Avhana Health, Mid Day, Architonic, and many more

4. 머티리얼 디자인 라이트 : 머티리얼 디자인에 기반한 라이트 프레임 워크 

Material Design Lite는 CSS, HTML 및 JavaScript로 만든 UI 구성 요소 라이브러리입니다. 웹 사이트에 머티리얼 디자인 룩앤필을 추가 ​​할 수 있습니다. 또한 자바 스크립트 프레임 워크에 의존하지 않으며 교차 기기 사용을 위해 최적화하고 이전 브라우저에서 정상적으로 저하되며 즉시 액세스 할 수 있는 환경을 제공하는 것을 목표로 합니다. 구성 요소를 사용하여 매력적이고 일관 적이며 기능적인 웹 페이지 및 웹 앱을 구성 할 수 있습니다. MDL로 개발 된 페이지는 브라우저 이식성, 정상적인 성능 저하 및 장치 독립성과 같은 모든 최신 웹 디자인 원칙을 지원할 수 있습니다.

MDL 컴포넌트 라이브러리는 머티리얼 디자인 개념을 따르는 버튼, 텍스트 필드 및 체크 박스와 같은 새로운 버전의 공통 사용자 인터페이스 컨트롤을 제공합니다. 라이브러리에는 카드, 스피너 열 레이아웃, 슬라이더, 타이포그래피, 탭 등과 같은 고급 및 특수 기능도 포함되어 있습니다. MDL은 무료로 다운로드하여 사용할 수 있으며 라이브러리 또는 개발 환경 (예 : Web Starter Kit)의 유무에 관계없이 사용할 수 있습니다. 브라우저 간, OS 간 웹 개발자 용 툴킷입니다.

Material Design Lite의 Github를 확인할 수 있습니다.

Material Design Lite를 사용하는 이유 : 

• Google에서 만든 MDL은 최신 상태이고 사용하기 쉬우며 광범위한 기능을 포함하며 외부 종속성이 없습니다.
• 중요한 이점은 MDL을 그래픽 사용자 인터페이스 언어 인 Elm과 함께 사용할 수 있다는 것입니다.
• MDL은 사용자 지정이 필요하지 않은 뛰어난 기본 모양을 제공합니다.
• 블로그 템플릿을 사용하여 Material Design Lite를 사용하면 몇 분 만에 블로그를 시작할 수 있습니다.
• MDL은 머티리얼 디자인 버튼, 텍스트 필드, 툴팁, 스피너 등을 포함한 풍부한 구성 요소 세트를 제공합니다.

추가 정보 : 

• Release date: June 19, 2014
• Git star, Forks, Contributors: 31.7k, 5.3k, 345
• Hacker News, Reddit, Stack overflow: h, 197, 648
• License: Apache-2
• No. of sites: 74,521
• Documentation: Good
• Core concept: Cross-device use
• Learning Curve: Moderate
• Grid: 12: Desktop: 12 desktop, 8- tablet, 4- phone
• Browser Support: IE9, IE10, IE11, Chrome, Opera, Firefox, Safari, Chrome (Android), Mobile Safari
• Companies using: Google wallet, Google Project Sunproof, Talks at Google.

5. Bulma : 무료, 오픈 소스 CSS 프레임 워크 

Bulma는 반응 형 최신 CSS 프레임 워크입니다. 이 프레임 워크는 내장 HTML, SASS CSS 탐사 자 및 CSS flexbox입니다. Bulma는 sass 파일, 웹 팩 및 변수를 사용하여 요구 사항에 맞게 사용자 지정할 수 있는 많은 옵션을 제공합니다. Bulma는 순수 CSS로 만들어집니다. 즉, 프레임 워크를 사용하는 동안 필요한 것은 .css 파일 하나만 있으면 되고 .js는 필요하지 않습니다.

이 프레임 워크에는 웹 사이트를 더 매력적으로 만들고 코드는 줄 이도록 도와주는 몇 가지 고급 기능이 있습니다. 유틸리티의 기능을 사용하여 어둡고 밝은 색상 패턴을 만들 수 있습니다. 부트 스트랩과 동일한 그리드가 있습니다. Bulma를 사용하면 SASS 모듈성을 추가 할 수 있습니다. .icon 요소 덕분에 Font Awesome 4 및 Font Awesome 5와 모두 호환됩니다.

Bulma를 사용하는 이유 : 

• Bulma는 개발자가 탐색하려는 주제에 따라 쉽게 선택할 수 있도록 깔끔하고 간단한 사전 설정을 제공합니다.
• Bulma는 적절한 수의 웹 구성 요소를 제공하며, 하나는 단순히 선택하고 사용하여 요구 사항 및 수정에 따라 디자인 할 수 있습니다.
• Bulma의 GitHub 페이지에는 1000 개 이상의 커밋과 600 명의 참여자가 있습니다.

추가 정보 : 

• Release date: January 24, 2016
• Git star, Forks, Contributors: 41k, 3.5k, 655
• Reddit, Stack overflow: 1.2k, 581
• License: MIT
• No. of sites: 30,987
• Documentation: Good
• Customization: Basic GUI Customizer
• Core concept: RWD, mobile-first, Modern free
• Grid: Simple building of column layout
• Browser Support: Latest Chrome, Edge, Firefox, Opera, Safari, IE 10+ (Partially supported)
• Companies using: Dev Tube, Economist, Rubrik, and many more

6. Foundation : 가장 진보 된 프런트 엔드 프레임 워크 

Foundation은 고급 프론트 엔드 CSS 프레임 워크, 내장 HTML, CSS, SASS 및 javascript입니다. 이 프레임 워크에는 웹 사이트를 더 빠르게 디자인 할 수있는 sass 컴파일러가 있습니다. Foundation에는 특정 명령을 사용하여 PC / 노트북에 설치할 수 있는 자체 CLI가 있으며 쉽게 볼 수 있습니다. 부트 스트랩 Bulma와 유사한 동일한 파일 구조 및 CSS 구체화. 이것은 구성 요소에 완전히 반응하는 모바일 우선 접근 CSS 프레임 워크입니다.

많은 포럼에서 지원을 받을 수 있으며 모든 유형의 문제를 신속하게 해결할 수 있습니다. 대부분이 프레임 워크는 대규모 웹 응용 프로그램, stater 템플릿으로 멋진 웹 사이트를 만들고 매력적인 사용자 인터페이스로 멋진 웹 사이트를 디자인하는 데 사용됩니다. 의미론적이며 읽기 쉽고 유연하며 완벽하게 사용자 정의 할 수 있습니다. Foundation은 공식 ZURB Foundation 웹 사이트에 포괄적 인 문서 및 비디오 자습서를 제공합니다.

Foundation을 사용하는 이유 : 

• Foundation은 사용자가 대규모 웹 애플리케이션 등을 만들 수 있는 가장 진보 된 CSS 프레임 워크입니다.
• Foundation의 GitHub 페이지에는 거의 2,000 명의 기여자와 17,000 개의 커밋이 표시됩니다.
• 모듈 식이며 주로 Sass 스타일 시트로 구성됩니다.
• Flexbox를 지원하는 그리드와 같은 최신 기능을 지원하기 위해 지속적으로 업데이트됩니다.

추가 정보 :

• Release date: November 4, 2014
• Git star, Forks, Contributors: 28.6k, 5.8k, 2045
• Reddit, Stack overflow: 1.2k, 803
• License: MIT
• No. of sites: 441,292
• Documentation: Good
• Customization: Advance GUI Customizer(for the previous version)
• Core concept: RWD and mobile-first
• Grid: Standard 12 column fluid responsive grid system
• Browser Support: Last Two Versions of Chrome, Firefox, Safari, Opera, Mobile Safari, IE Mobile, Edge and IE 9+, Android Browser 4.4+
• Companies using: Amazon, Hp, Adobe, Mozilla, EA, Disney, and many more

7. Skeleton : 기본 UI 요소를 위한 매우 가벼운 프레임 워크 

Skeleton은 17 인치 노트북 화면이나 iPhone 등 모든 크기에서 아름답게 보이는 사이트를 빠르게 개발하는 데 도움이 되는 작은 CSS 파일 모음입니다. 빠른 개발을 위한 도구입니다. CSS 모범 사례, 조직화 된 파일 구조, 가벼운 스타일의 양식, 버튼, 탭 등과 같은 매우 기본적인 UI 요소를 사용하여 모바일 고려를 쉽게 만들어주는 잘 구성된 그리드로 빠르게 시작할 수 있습니다.

Skeleton의 Github 페이지를 확인할 수 있습니다.

Skelton을 사용하는 이유 : 

• Lightweight
• Responsive Grid
• Vanilla CSS
• Media queries

추가 정보 : 

• Release date: May 15, 2020
• Git star, Forks, Contributors: 17.8k, 3k, 41
• Hacker News, Reddit, Stack overflow: 1.1k, 799, s
• License: MIT
• Core concept: RWD and mobile-first
• Grid: 12-column fluid grid
• Browser Support: Chrome latest, Firefox latest, Opera latest, Safari latest, IE lates
• Companies using: