[CSS] css 프레임워크 TOP 10

CSS 프레임워크 중 가장 인기있는 Bootstrap과 마찬가지로 가장 인기있는 css 종류를 알아봅시다.

이러한 프레임 워크는 그리드, 대화형 UI 패턴, 웹 타이포그래피, 툴팁, 버튼, 양식 요소, 아이콘을 포함하는 기본 구조를 제공합니다.

즉시 사용 가능한 솔루션을 사용할 수 있으며 이는 웹 사이트를 빠르게 구축하는 데 도움이됩니다.

모든 것을 처음부터 시작할 필요가 없으며 프로젝트에서 코드를 재사용 할 수 있습니다.

이제 어떤 프레임 워크가 가장 적합한지에 대한 질문이 있습니다.

프런트엔드 개발을 처음 사용하는 경우 프레임 워크를 선택하는 것이 약간 까다로울 수 있습니다.

솔직히 말해서 모든 CSS 프레임 워크에는 장단점이 있으므로 특정 요구 사항에 따라 다릅니다.

이 기사에서는 업계의 대부분의 개발자가 사용할 수있는 인기있는 CSS 프레임 워크에 대해 설명합니다.

우리는 장단점을 염두에두고 이러한 프레임 워크를 필터링했습니다. 이러한 프레임 워크에 대해 논의 해 보겠습니다.

 

1. Bootstrap

Bootstrap 4입니다. 버전 4는 SASS로 구축되었으며, 이는 Bootstrap이 이제 LESS와 SASS를 모두 지원했음을 의미합니다.

조금 더 나아가서 Bootstrap5는 완전히 jquery를 제거하는 방향으로 최적화가 되어있습니다.

 

장점

• 빠른 프로토타이핑
• 거대한 생태계
• 컴포넌트의 다양성
• LESS 및 SASS 서포트
• 쉬운 문서와 낮은 러닝 커브
• 트위터에 의해 개발되고 커뮤니티에 대한 신뢰와 연장성이 높다

2. Foundation

Facebook, eBay, Mozilla, Adobe 및 Disney와 같은 많은 회사에서 사용합니다.

프레임 워크는 부트 스트랩과 같은 Saas에 구축됩니다.

더 정교하고 유연하며 쉽게 사용자 정의 할 수 있습니다.

또한 CLI와 함께 제공되므로 모듈 번 들러와 함께 사용하기 쉽습니다.

모바일 장치에서 더 빠른 렌더링을 위해 Fastclick.js 도구를 제공합니다.

 

장점

• 반응형 디자인에 효율적
• 이메일 프레임워크 제공
• 유연성
• 온라인 웨비나 및 트레이닝 제공
• 커스텀하기 쉬움
• 거의 모든 인터페이스 작업을 해결할 수 있는 전체 모듈식 도구 세트 사용 가능
• UI 구성 요소 등 : 고급 이미징 시스템, 가격표 구성 요소, 양식 유효성 검사, 수직 타임 라인 레이아웃, RTL 지원 등.

 

3. Bulma

Bulma는 다른 CSS 프레임 워크와 비교하여 시장에서 비교적 새로운 프레임 워크이지만 Bulma는 짧은 시간 내에 사용자로부터 많은 관심을 얻었습니다. 

이 무료 오픈 소스 CSS 프레임 워크는 Flexbox 레이아웃 모델을 기반으로합니다. 

가장 좋은 점은 CSS만을 기반으로하며 자바 스크립트가 전혀 필요하지 않다는 것입니다. 

전 세계 200,000명 이상의 개발자가 사용하고 있습니다. 

반응성이 뛰어나고 가벼우며 '모바일 우선'접근 방식을 따릅니다.

 

장점

• 모든 CSS 클래스 이름은 논리적으로 명명되므로 구문을 배우고 기억하기 쉽습니다.
• Pure Css만 있음, 자바스크립트는 없음
• 커다란 커뮤니티
• 모듈 형 : Saas로 구축되었으며 필요한 기능만 가져 와서 인터페이스를 디자인 할 수 있습니다.
• 수직 정렬 솔루션, 레이아웃 및 미디어 개체와 같은 대규모 구성 요소 모음

4. Pure

Yahoo에서 개발 한 Pure는 가볍고 반응이 빠른 CSS 프레임 워크입니다.

그리드와 메뉴를 사용하여 반응형 레이아웃을 만드는 데 도움이되는 Normalize.css를 사용하여 구축되었습니다.

다른 CSS 모듈로 나눌 수 있으며 필요와 선호도에 따라 해당 모듈을 가져올 수 있습니다.

따라서 그리드 시스템 만 필요한 경우 전체 CSS를 가져와 사이트의로드 시간에 추가 할 필요가 없습니다.

Bootstrap과 달리 고정 레이아웃을 만들 수 없습니다.

 

장점

• 모바일 친화적
• 5 포인트, 2 포인트, 24 포인트 등의 변형을 제공하므로 그리드와 기둥 시스템을 만드는 동안 훨씬 더 유연하게 사용할 수 있습니다.

5. Semantic UI

이 프레임 워크는 단순하고 우아한 디자인뿐만 아니라 놀라운 효과로 널리 알려져 있습니다.

Semantic UI는 인간에게 친숙한 HTML을 사용하는 반응 형 프레임 워크이며 여러 변경없이 독특하고 아름다운 웹 사이트를 만들 수 있습니다.

3000 개 이상의 테마 변수와 50 개 이상의 UI 구성 요소를 제공합니다.

또한 React, Meteor, Ember, React 등과 같은 타사 라이브러리를 지원합니다.

 

장점

• 친숙한 클래스 이름 : 인간에게 친숙한 HTML을 사용하므로 자연어를 사용하여 코딩 할 수 있습니다.
• Bootstrap4 및 기타 프레임 워크와 비교할 때 매력적인 레이아웃.
• 필요한 컴포넌트만 로드하여 다운로드 시간과 파일 크기를 줄입니다.
• 다양한 컴포넌트

6. Tailwind CSS

Tailwind CSS는 유연하고 사용자 정의가 가능한 low-level CSS 프레임 워크입니다.

Tailwind는 PostCSS로 작성되고 JavaScript로 구성됩니다.

미리 빌드 된 구성 요소를 사용하는 대신 low-level 유틸리티 클래스를 사용하여 디자인을 사용자가 지정하고 사이트가 끝나는 방식을 완전히 제어 할 수 있습니다.

전면 크기에서 간격, 중단 점에서 그림자, 색상에서 테두리 크기까지 모두 사용자 지정할 수 있습니다.

예를 들어 버튼에 Pill, 외곽선 및 3D 모양을 부여 할 수 있습니다.

각 측면을 개인화 할 수 있고 Bootstrap 또는 UI 키트와 같은 다른 프레임 워크와 확실히 다른 독특한 스타일로 디자인을 만들 수 있습니다.

 

장점

• 커스텀하기 쉬움
• 유틸리티 클래스
• 반응형적인 옵션들

7. UI kit

이 강력한 CSS 프레임 워크는 미니멀리즘의 특징으로 유명합니다. 

UI Kit는 다른 프레임 워크의 거의 모든 기능을 포함하는 가벼운 최소 CSS 프레임 워크입니다. 

최대 빈 공간과 SVG 아이콘, 진행률 표시줄, 이미지 메이커 등과 같은 많은 UI 구성 요소를 사용하여 매우 깨끗하고 우아하며 아름다운 웹 인터페이스를 만들 수 있습니다.

놀라운 구성 요소, 통합 스타일 및 사용자 정의 옵션이 많이 있습니다.

Nestable과 같은 구성 요소를 사용하여 고급 인터페이스를 만들 수 있습니다.

신뢰할 수 있고 충돌없는 명명 규칙을 사용합니다.

일반 HTML을 사용하여 복잡한 flexbox 기반 레이아웃을 디자인 할 수도 있습니다.

 

장점

• 미니멀함
• 유용한 UI 컴포넌트의 집합
• Less 와 Sass의 호환성
• 자바스크립트 인클루드
• 다양한 기기와의 호환성

8. Materialize CSS

머티리얼 디자인 작업을 즐긴다면 이 프레임 워크를 확인해야합니다.

2014 년 Google에서 만든 이 프레임워크는 웹사이트 또는 Android 웹앱을 디자인하려는 사람들에게 훌륭한 솔루션입니다.
YouTube, Gmail, Google Drive 및 Google Docs와 같은 많은 Google 제품이이 프레임 워크에서 구현됩니다.
많은 노력을 기울이지 않고도 가능한 한 빨리 작업을 완료 할 수 있도록 준비된 몇 가지 구성 요소와 클래스가 함께 제공됩니다.
프레임워크는 Bootstrap, 반응형 애니메이션 및 전환, 패딩, 조명 및 그림자와 같은 깊이 효과에 의해 설정된 12열 그리드 기반 레이아웃을 사용합니다.
사전제작 된 시작 템플릿을 사용하면 최소한의 설정 시간으로 웹 사이트를 디자인 할 수 있습니다.

 

장점

• 머터리얼 디자인
• 부트스트랩 그리드
• 거대한 섹션의 컴포넌트
• 손쉬운 커스터마이징
• Sass와의 호환성

9. Skeleton

이름에서 알 수 있듯이 Skeleton은 사용하기에 가장 간단하고 최소한의 반응형 CSS 프레임 워크입니다.
여기에는 400 줄의 코드 만 포함되어 있지만 프로젝트에서 사용할 수있는 다양한 옵션을 제공합니다.
그리드, 타이포그래피, 버튼, 양식, 목록, 미디어 쿼리, 표 등과 같은 기능을 사용하면 복잡한 웹 사이트를 쉽게 만들 수 있습니다.
CSS 프레임 워크에서 언급했지만 CSS 프레임워크, 라이브러리 또는 모듈로 정의되지 않는 코드 줄이 적습니다.
실제로 소규모 프로젝트 또는 UI / UX 개발자로 경력을 시작한 사람에게 좋은 표준 문구입니다.
제한된 수의 표준 HTML 요소 만 제공되지만 간단하고 우아한 웹 사이트를 시작하기에 충분합니다.

 

장점

• 모바일 친화적
• 배우기 쉬움

10. Miligram

이름에서 알 수 있듯이 웹 사이트를 더 빠르게 만들 수 있도록 설계된 또 다른 경량 CSS 프레임 워크입니다.

프레임 워크의 크기는 2Kb에 불과하지만 요구사항을 충족하는 많은 기능과 웹 개발 도구가 함께 제공됩니다.

개발자에게 유연성을 제공하고 CSS3 사양에서 제공하는 모든 기능을 사용할 수 있습니다.

사용자 정의 CSS 몇줄로 이를 확장 할 수도 있습니다.

 

장점

• 플렉스박스와 그리드 기반
• 디자인 테마가 좋음

우리는 개발자들 사이에서 꽤 인기있는 CSS 프레임 워크 몇 가지를 언급했지만 다른 CSS 프레임 워크도 사용해 볼 수 있습니다.

다른 인기 프레임 워크로는 Susy, Animate.css, Paper CSS, NES.css, Base, Tent CSS, Simple Grid, Spectre, Mustard UI, Picnic CSS, Mini.css, Gumby 등이 있습니다.

 

 

출처 : https://www.geeksforgeeks.org/10-best-css-frameworks-for-frontend-developers-in-2020/?ref=rp