부트 스트랩 vs 파운데이션 vs Bulma vs 시맨틱 vs UIkit

지난 몇 년 동안 최종 사용자의 브라우징 습관은 다양한 장치를 포함하도록 진화했습니다. 결과적으로, 오늘날 개발되는 모든 웹 사이트에는 반응 형 웹 디자인이 필요합니다. 그러나 모든 프로젝트에 대해 반응 형 디자인을 처음부터 새로 만들려면 시간이 오래 걸릴 수 있습니다. 인생을 편하게 만들어주는 훌륭한 솔루션 중 하나는 CSS 프레임 워크를 사용하는 것입니다. 이러한 프레임 워크는 기본 반응 형 디자인 원칙을 처리합니다. 이 비교에서 우리는 최고의 CSS 프레임 워크를 살펴보고 어느 것이 가장 적합한 지 확인합니다.. 부트 스트랩 대 파운데이션 대 불마 대 시맨틱 대 UIkit.


이 게시물에서는 다음 프로젝트에 적합한 CSS 프레임 워크를 선택하도록 안내합니다. 프론트 엔드 기술과 반응 형 웹 디자인 원칙에 대한 기본 지식이 있다고 가정합니다. 각 CSS 프레임 워크는 Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit의 다양한 측면을 다루도록 테스트되었습니다. 각 프레임 워크의 기원과 주요 기능에 대해 다룹니다. 또한 각 프레임 워크에 대한 빠른 시작 안내서를 제공합니다..

부트 스트랩 vs 파운데이션 vs Bulma vs 시맨틱 vs UIkit

이 게시물의 끝에서 각 프레임 워크의 주요 기능 및 제한 사항을 파악하고 자신의 요구에 가장 적합한 프레임 워크를 식별 할 수있는 더 나은 위치에있게됩니다. 시작하자:

  • 부트 스트랩 #
  • 기초 #
  • 불마 #
  • 시맨틱 #
  • UIkit #

부트 스트랩 (getbootstrap.com)

부트 스트랩 vs

부트 스트랩은 웹 사이트를 빠르게 개발하기위한 반응 형의 모바일 우선 CSS 프레임 워크입니다. 이 목록에서 가장 인기있는 CSS 프레임 워크이며 GitHub에 130k 개 이상의 별이 있습니다. 부트 스트랩에는 HTML, CSS 및 JavaScript로 개발 된 즉시 사용 가능한 구성 요소가 포함되어 있습니다.

부트 스트랩은 2011 년 트위터에서 처음 개발되었지만 결국 독립 프로젝트로 발전했습니다. 현재 안정 버전은 4.3입니다. 현재 개발중인 Bootstrap 5는 jQuery를 바닐라 JS로 대체하고 오래된 브라우저에 대한 지원을 중단하며 현재 테스트 플랫폼을 변경합니다.

부트 스트랩을 사용하려면 새 웹 페이지를 작성할 때 다음을 수행해야합니다.

  • HTML5 doctype 사용
  • 뷰포트 메타 태그 생성
  • head 태그에서 부트 스트랩 CSS 가져 오기
  • jQuery, Popper.js 및 bootstrap.min.js의 순서로 스크립트를 가져 와서 Bootstrap의 JavaScript 기능을 사용하십시오.

여기 스타터 템플릿이 있습니다.




이 자습서에서는 이러한 프레임 워크에 CDN 호스트 버전의 리소스 (CSS 및 JS 파일)를 사용합니다. 빠른 시작입니다 안내서 부트 스트랩.

강력한 모바일 우선 접근 방식 외에도 프레임 워크의 성숙도를 소유 한 상당한 커뮤니티 지원이 있습니다. 또한 Bootstrap은 승인 된 프레임 워크 및 키트 또한 타사 개발자가 선택할 수 있도록 프로젝트와 동일하게 통합 할 수있는 부트 스트랩 키트 및 패키지도 제공합니다. 다음은 부트 스트랩 용 무료 UI 키트입니다. 모바일을 먼저 사용하는 것 외에도 터치 스크린을 지원합니다. Bootstrap은 성숙한 프로젝트이므로 많은 접근성 기능을 지원합니다.

부트 스트랩의 가장 큰 단점은 페이지 무게가 증가한다는 것입니다. 평균 페이지 크기가 약 2MB 인 세계에서는 수백 킬로바이트가 중요하지 않을 수 있지만 가장 높은 효율성을 목표로하는 개발자에게 문제가 될 수 있습니다. jQuery의 제거가 Bootstrap 5의 로드맵의 일부라는 것을 알고 있기는하지만 jQuery에 대한 의존성이 문제입니다..

�� 장점 :

  • 반응이 빠른 모바일 웹 디자인 프레임 워크
  • 좋은 커뮤니티 지원 및 문서

�� 단점 :

  • 큰 종속성 크기 (~ 300KB)
  • 일부 구성 요소가 작동하도록 jQuery에 대한 종속성

훌륭한 지원 기반을 갖춘 안정적인 플랫폼을 찾고 있다면 부트 스트랩을 사용하십시오. 기본 구성 요소를 많이 사용하지 않으려면 올바른 선택입니다. 부트 스트랩은 민첩한 환경에서 신속하게 솔루션을 반복하고자하는 사용자에게 적합합니다..

기초 (foundation.zurb.com)

기초 대

2011 년 Bootstrap 한 달 안에 처음 출시 된 Foundation은 웹 사이트뿐만 아니라 응용 프로그램 및 전자 메일을위한 프론트 엔드 프레임 워크 클래스입니다! 부트 스트랩과 파운데이션이 어떻게 쌓이는 지 보자!

Twitter의 Bootstrap과 마찬가지로 Foundation은 Zurb 재단에서 내부 도구로 시작한 후 결국 프레임 워크로 릴리스되었습니다. Foundation의 소스 코드는 오픈 소스이며 모바일 우선 반응 형 디자인에 중점을 둡니다. Foundation에는 선택할 수있는 12 개의 열이있는 부트 스트랩과 유사한 그리드 시스템이 있습니다. 또한 JavaScript도 옵션입니다!

웹 사이트에서 Foundation을 사용하는 광범위한 단계는 다음과 같습니다.

  • 다운로드 기초 자료
  • HTML5 doctype 사용
  • head 태그에 Foundation CSS 파일 추가
  • jQuery, what-input.js 및 Foundation의 스크립트 포함
  • body 태그를 끝내기 전에 Foundation () 함수를 호출하여 Foundation 속성을 다양한 DOM 요소에 연결하십시오.

빠른 시작 템플릿은 다음과 같습니다.

$ (문서) .foundation ();

다운로드 할 수 있습니다 커스텀 빌드 필요에 맞는 재단 프레임 워크.

Bootstrap과 Foundation을 비교하려고 할 때 몇 가지 사항이 나타납니다. Bootstrap은 커뮤니티에서 더 많은 지원을 제공하고, 작업하기가 더 쉬우 며, 응시할 때 선택할 수있는 다양한 테마를 제공합니다. 반면에 Foundation은 속성이 구성 요소와 연결되어 있으므로 DOM 요소에 클래스를 추가 할 필요없이 구성 요소를보다 강력하게 제어하고 자유롭게 제어 할 수 있습니다. 또한 재단은 몇 년 동안 개발되어 왔기 때문에 많은 접근성 기능을 제공합니다.

�� 장점 :

  • 반응이 빠른 모바일 웹 디자인 프레임 워크
  • 응용 프로그램 및 이메일 지원

�� 단점 :

  • 부트 스트랩과 같은 큰 종속성 크기
  • 초보자를 압도 할 수있는 수많은 기능

Bootstrap과 Foundation의 기능은 크게 변경되지 않으므로 어느 플랫폼을 선택하더라도 크게 잃지 않습니다. 즉, 프로젝트를 더 잘 제어하려면 Foundation과 함께 가야합니다..

다음 기사에 관심이있을 수도 있습니다.

  • 최고의 Angular Admin 대시 보드 템플릿

불마 (bulma.io)

붓마 vs

Bulma는 Flexbox 기반의 오픈 소스, 경량 CSS 프레임 워크입니다.

부트 스트랩 수준은 아니지만 Bulma는 GitHub에서 35k 이상의 별을 가진 상당히 인기있는 프로젝트입니다..

Bulma는 모듈성에 중점을 둔 모바일 우선 반응 형 프레임 워크로 설계되었습니다..

프로젝트에서 Bulma를 사용하려면 다음 단계를 따라야합니다.

  • HTML5 doctype 추가
  • 반응 형 뷰포트에 메타 태그 추가
  • 헤드 태그에 Bulma CSS 파일 포함
  • [선택 사항] 아이콘을 사용하도록 fontawesome 스크립트 추가

템플릿은 다음과 같습니다.

Bootstrap vs Foundation vs Bulma에 대한 토론으로 되돌아 가면서 Bulma는 더 부드러운 학습 곡선을 가지고 있습니다. Bootstrap 및 Foundation과 관련하여 Bulma와의 중요한 차이점은 프레임 워크에 JavaScript 요소가없는 CSS에만 중점을 둡니다. JavaScript를 제외하면 프레임 워크도 가벼워집니다. 접근성 측면에서 Bulma는 부분적으로 만 액세스 할 수 있지만 커뮤니티는 정기적으로 지원을 추가하고 있습니다..

�� 장점 :

  • 가벼운 flexbox 기반 프레임 워크
  • 유연성을 제공하는 모듈 형 요소

�� 단점 :

  • 자바 스크립트 요소가 없습니다
  • 접근성에 대한 제한된 지원

개발자는 웹에 반응 형 요소를 만드는 데 도움이되는 간단한 프레임 워크를 사용하려면 Bulma를 선택해야합니다. 프로세스에 갇힌 경우에 도움이되는 프레임 워크에 대한 상당한 지원이 있습니다..

시맨틱 (semantic-ui.com)

시맨틱 vs

시맨틱은 직관적 인 사용자 인터페이스를 만들기위한 CSS 프레임 워크입니다..

이 프레임 워크는 학습 과정을 쉽게하는 데 도움이되는 클래스 이름을 사용합니다. 시맨틱의 수업은 논리 개념을 수업 이름에 연결하기 위해 영어에서 영감을 얻었습니다..

프로젝트에서 시맨틱 컴포넌트를 사용하려면 다음 단계를 완료해야합니다.

  • HTML5 doctype 포함
  • 시맨틱 CSS 파일로드
  • JavaScript 요소를 호출하기 전에 jQuery 포함
  • 시맨틱 스크립트 포함

템플릿은 다음과 같습니다.

시맨틱을 부트 스트랩과 파운데이션 및 기타와 비교하면 직관적 인 명명 규칙에도 불구하고 시맨틱은 배우기 복잡성 측면에서 부족하다는 것을 알 수 있습니다. 설명서는 광범위하지만 익숙해지는 데 시간이 걸립니다. Angular 및 React와 같은 JavaScript 프레임 워크와의 통합이 좋으므로 이러한 프레임 워크를 사용하는 응용 프로그램에서 사용하기에 이상적입니다..

�� 장점 :

  • 직관적 인 클래스 이름
  • JavaScript 프레임 워크와 통합

�� 단점 :

  • 대규모 프로젝트의 필요를 충족시키지 못할 수 있음
  • 커뮤니티의 제한된 지원

시맨틱은 학습 곡선이 비교적 쉬운 프레임 워크이며 JavaScript 프레임 워크도 지원합니다. 요구 사항에 JavaScript 사용이 필요한 경우 다음 프로젝트에서이 프레임 워크 사용을 반드시 고려해야합니다..

UIkit (getuikit.com)

uikit 대

UIkit은 웹 인터페이스를 만들기위한 모듈성에 중점을 둔 현대적이고 가벼운 프레임 워크입니다..

GitHub에 약 15k 개의 별이있는 비교적 새로운 오픈 소스 프레임 워크입니다. UIkit을 사용하면 BrowserStack에서 자동 연속 배포를 통해 반응 형 디자인을 만들 수 있습니다..

프로젝트에서 UIkit 컴포넌트를 사용하려면 다음 단계를 완료해야합니다.

  • HTML5 doctype 포함
  • UIkit CSS 파일로드
  • 기능 및 아이콘에 대한 UIkit 스크립트 포함

템플릿은 다음과 같습니다.

UIkit을 Bootstrap vs Foundation vs Bulma와 비교하면 많은 기능이 있습니다. JavaScript 요소가 있음에도 불구하고 UIkit은 jQuery에 종속되지 않으므로 최종 사용자의 페이로드가 더 작아집니다. 민첩한 개발 환경에서 웹 애플리케이션의 버전을 빠르게 반복한다는 측면에서 이러한 프레임 워크를 사용하여 확실하게 지원합니다..

�� 장점 :

  • 모듈화에 중점을 두어 쉽게 작업 할 수 있습니다.
  • 요소를 사용자 정의 할 수있어 유연성

�� 단점 :

  • 제한된 문서 및 커뮤니티 지원

UIkit은 구조와 기능에 대한 제어 측면에서 많은 자유를 제공하지만 상당히 새롭기 때문에 프레임 워크에 문제가있는 경우 온라인 지원이 제한됩니다. 따라서 프론트 엔드 프로그래밍 기술이 충분히 발전된 경우에만 프로젝트에서이 프레임 워크를 고려해야합니다..

부트 스트랩 대 파운데이션 대 불마 대 시맨틱 대 UIkit : 최종 생각

상위 CSS 프레임 워크 비교에서 우리가 이야기 한 내용을 요약하면 다음과 같습니다.

  • 많은 지원을받는 번거 로움없는 솔루션을 원한다면 부트 스트랩으로 이동하십시오.
  • 컴포넌트에서 더 많은 자유를 얻으려면 Foundation을 사용해보십시오
  • 프로젝트를 가볍게 추가하려면 Bulma 또는 UIkit을 사용해보십시오.
  • 웹 애플리케이션이 무거운 JavaScript 프레임 워크를 사용하는 경우 시맨틱을 선택해야합니다.

2020 년에 어떤 CSS 프레임 워크를 사용하십니까? 아래 의견에 알려주십시오!

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃, 프리젠 테이션 및 편집.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map