기초(프레임워크)

Foundation (framework)
이 기사는 CSS 프레임워크에 관한 것입니다.Objective-C 프레임워크에 대해서는 Foundation Kit를 참조하십시오.
ZURB 재단
개발자저브
초기 릴리즈2011년 9월, 10년 전(2011-09)
안정된 릴리스
6.7.4 / 2021년 11월 2일, 9개월 전(2021-11-02)[1]
저장소기초 저장소
기입처HTML, CSS, Sass 및 JavaScript
유형웹 개발
면허증.MIT 라이선스
웹 사이트get.foundation

Foundation은 자유롭고 오픈 소스 응답형 프런트 엔드 프레임워크로, 응답성이 뛰어난 그리드, HTML 및 CSS UI 컴포넌트, 템플릿 및 코드 스니펫(타이포그래피, 폼, 버튼, 내비게이션 및 기타 인터페이스 요소 포함), JavaScript 확장에 의해 제공되는 옵션 기능을 제공합니다.Foundation은 오픈 소스 프로젝트로 이전에는 ZURB에 의해 관리되었습니다.재단은 2019년부터 [2]자원봉사자들에 의해 유지되고 있습니다.

기원.

Foundation은 프론트 엔드 코드를 보다 빠르고 효율적으로 개발하기 위한 ZURB 프로젝트로 등장했습니다.2011년 10월 ZURB는 MIT [3]라이선스에 따라 Foundation 2.0을 오픈 소스로 출시했습니다.ZURB는 2012년 [4]6월 Foundation 3.0, 2013년 [5]2월 4.0, 2013년 11월 5.0, 2015년 11월 6.0을 출시했습니다.이 팀은 오래된 브라우저에 대한 지원을 중단하고 플렉스박스나 계산된 그리드 시스템 등의 새로운 기술을 구현할 가능성이 높은 사이트용 Foundation 7의 다음 버전에 대한 작업을 시작했습니다.

Foundation for Emails(이전의 ZURB Ink)는 2013년 9월에 출시되었습니다.

Foundation for Apps는 2014년 12월에 출시되었습니다.

특징들

Foundation은 수많은 브라우저 및 디바이스용으로 설계 및 테스트되었습니다.Sass/SCSS로 구축된 응답형 프레임워크입니다.이 프레임워크에는 응답성이 뛰어난 사이트를 프로토타입화하는 데 필요한 가장 일반적인 패턴이 포함됩니다.Sass mixins를 사용하여 Foundation 구성요소를 쉽게 스타일링하고 쉽게 [peacock prose]확장할 수 있습니다.

버전 2.0 이후로는 응답성 [6]설계도 지원합니다.즉, 웹 페이지의 그래픽 디자인은 사용하는 기기(PC, 태블릿, 휴대폰)의 특성을 고려하여 동적으로 조정됩니다.또한 4.0 이후 모바일 기기용 설계 및 개발, 웹 페이지 및 응용 프로그램 확대 등 [7]모바일 우선적 접근 방식을 취했습니다.

Foundation은 오픈 소스이며 GitHub에서 사용할 수 있습니다.개발자는 프로젝트에 참여하여 플랫폼에 직접 기여하도록 권장됩니다.

구조 및 기능

Foundation은 모듈식이며 기본적으로 툴킷의 다양한 컴포넌트를 구현하는 일련의 Sass 스타일시트로 구성됩니다.컴포넌트 스타일시트는 Sass를 통해 또는 초기 Foundation 다운로드를 사용자 정의하여 포함할 수 있습니다.개발자는 프로젝트에서 사용할 구성요소를 선택하여 Foundation 파일 자체를 조정할 수 있습니다.

중앙 구성 스타일시트를 통해 조정할 수 있습니다.Sass 변수를 변경함으로써 보다 심오한 변경이 가능합니다.

Sass 스타일시트 언어를 사용하면 변수, 함수 및 연산자, 중첩된 선택자 및 이른바 혼합을 사용할 수 있습니다.

버전 3.0 이후 Foundation 구성에는 설명서의 특별한 "맞춤" 옵션도 있습니다.또한 개발자는 원하는 구성요소를 선택하고 필요에 따라 다양한 옵션의 값을 필요에 따라 조정하기 위해 양식을 사용합니다.이후에 생성된 패키지에는 이미 사전 빌드된 CSS 스타일시트가 포함되어 있습니다.

그리드 시스템과 반응성 설계

파운데이션은 940픽셀 폭의 유연한 그리드 레이아웃을 표준 장비하고 있습니다.이 툴킷은, 휴대 전화, 세로 및 가로 형식, 저해상도 및 고화질(와이드 스크린)의 태블릿, PC 등, 다양한 해상도와 타입의 디바이스를 충분히 사용할 수 있습니다.그러면 열의 너비가 자동으로 조정됩니다.

CSS 스타일시트에 대해서

Foundation은 모든 주요 HTML 구성요소에 대한 기본 스타일 정의를 제공하는 스타일시트 세트를 제공합니다.브라우저와 시스템 전체의 통일된 현대적인 외관을 통해 텍스트, 표 및 양식 요소를 포맷할 수 있습니다.

재사용 가능한 컴포넌트

Foundation에는 일반 HTML 요소 외에 일반적으로 사용되는 다른 인터페이스 요소가 포함되어 있습니다.여기에는 고급 기능(드롭다운 옵션 포함 버튼 또는 버튼 그룹화, 제조 및 탐색 목록, 수평 및 수직 탭, 탐색, 브레드 크럼 탐색, 페이지 표시 등), 라벨, 고급 타이포그래피 기능 및 경고와 같은 메시지 포맷이 포함됩니다.

JavaScript 컴포넌트 및 플러그인

Foundation 4의 JavaScript 컴포넌트는 물리적으로 작지만 API 호환성이 있는 JQuery의 대체가 사용자에게 더 빠르다는 것을 전제로 jQuery JavaScript 라이브러리에서 Zepto로 이동되었습니다.그러나 Foundation 5는 새로운 릴리스 JQuery-2로 다시 이동했습니다."jQuery 2.x는 jQuery 1.x와 동일한 API를 가지고 있지만 Internet Explorer 6, 7, 또는 8을 지원하지 않습니다."[8]라고 공식 ZURB 블로그는 설명하고 있으며, 서명되지 않은 글쓴이는 스위치백이 맞춤형 작업과의 호환성 문제 때문이라고 주장하고 있으며, 새로운 JQuery-2를 사용한 테스트에서 성능이 좋지 않은 것으로 확인되었습니다.

Foundation jQuery 컴포넌트는 일반적인 사용자 인터페이스 요소와 브랜드 확장을 제공합니다.목록에는 대화상자, 툴팁, 회전목마, 경고, 지우기, 쿠키, 드롭다운, 폼, 조이라이드, 마젤란, 궤도, 플레이스홀더, 공개, 섹션, 탑바, 플렉스 비디오 등이 있습니다.추가 jQuery 플러그인을 Foundation 프레임워크에 설치하여 애니메이션 및 슬라이드인 메뉴와 같은 "오프 캔버스" 요소를 포함한 모든 UI 영역에서 고급 기능을 제공할 수 있습니다.

사용하다

Foundation에는 CSS, SAS 및 Ruby on Rails와 Foundation Rails [9]Gem의 3가지 통합 레벨이 있습니다.

CSS

Foundation CSS를 사용하려면 다운로드 페이지에서 기본 또는 커스텀 CSS 패키지를 다운로드하여 적절한 웹 서버 폴더에 설치합니다.그런 다음 기초가 HTML 페이지 [10]마크업에 통합됩니다.

새스

Foundation SAS 설치에서는 Ruby, Node.js 및 Git을 사용하여 Foundation 소스를 설치합니다.다음으로 Foundation은 HTML 페이지 [11]마크업에서 사용하기 위해 CSS에 소스를 수정하고 컴파일하기 위한 명령줄 인터페이스를 제공합니다.

기초 레일 보석

기초 레일 보석은 "gem 'boundation-rails'[12]를 레일 애플리케이션 Gem 파일에 추가하여 설치할 수 있습니다.

레퍼런스

  1. ^ "Releases · foundation/foundation-sites · GitHub". GitHub. Retrieved 31 January 2022.
  2. ^ "Is Zurb Foundation in active development?". Retrieved 21 Nov 2019.
  3. ^ "Announcing Foundation by ZURB". Retrieved 22 Aug 2012.
  4. ^ "ZURB Launches Foundation 3 To Take On Twitter's Bootstrap Framework". Retrieved 22 Aug 2012.
  5. ^ "Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto". Retrieved 28 Feb 2013.
  6. ^ "A List Apart: Dive into Responsive Prototyping with Foundation". 10 April 2012. Retrieved 22 Aug 2012.
  7. ^ "Zurb releases Foundation 4, a mobile-first, 'forward-thinking dev/designer's dream'". 28 February 2013. Retrieved 28 Feb 2013.
  8. ^ "Why we dropped Zepto".
  9. ^ 2015년 4월 30일 목요일 Wayback Machine에서 2015-10-28 Foundation 문서 보관
  10. ^ 2015년 4월 30일 목요일 Wayback Machine에서 Foundation Getting Started Archived 2015-10-29
  11. ^ 2015년 4월 30일(목) 재단 시작
  12. ^ 2015년 4월 30일(목) 재단 시작

외부 링크