재단-퀵 가이드

재단이란 무엇입니까?

Foundation은 아름다운 반응 형 웹 사이트를 디자인하기위한 고급 프런트 엔드 프레임 워크 중 하나입니다. 모든 유형의 장치에서 작동하며 HTML, CSS 및 JavaScript 플러그인을 제공합니다.

재단은 2008 년 ZURB에 의해 구축 된 내부 스타일 가이드로 시작되었습니다. ZURB는 캘리포니아 주 캠벨에있는 제품 디자인 회사입니다. 2011 년 10 월에 Foundation 2.0을 오픈 소스로 출시했습니다. Foundation의 최신 버전은 2015 년 12 월에 출시 된 6.1.1입니다.

왜 재단을 사용합니까?

• 기본 컴파일러보다 훨씬 빠르게 작동하는 Sass 컴파일러를 사용하여 더 빠른 개발을 제공합니다.

• 가격표, 스위치, 조이 라이드, 범위 슬라이더, 라이트 박스 등으로 웹 사이트를 풍부하게합니다.

• 더 빠른 코딩 및 제어를 위해 Grunt 및 Libsass와 같은 개발 패키지와 함께 제공됩니다.

• Foundation for sites는 웹 사이트를 빠르게 구축 할 수 있도록 HTML, CSS 및 JS를 제공합니다.

• 이메일 프레임 워크는 모든 장치에서 읽을 수있는 반응 형 HTML 이메일을 제공합니다.

• Foundation for Apps를 사용하면 완전히 반응하는 웹 앱을 빌드 할 수 있습니다.

풍모

• 강력한 그리드 시스템과 유용한 UI 구성 요소 및 멋진 JavaScript 플러그인이 있습니다.

• 모든 유형의 장치를 지원하는 반응 형 디자인을 제공합니다.

• 모바일 장치에 최적화되어 있으며 모바일 우선 접근 방식을 진정으로 지원합니다.

• 사용자 정의 및 확장이 가능한 HTML 템플릿을 제공합니다.

장점

• HTML과 CSS에 대한 기본적인 이해가 있으면 배우기 쉽습니다.

• Foundation은 오픈 소스이므로 자유롭게 사용할 수 있습니다.

• 웹 사이트 개발을 즉시 시작하는 데 도움이되는 다양한 템플릿을 제공합니다.

• Foundation은 SASS 및 Compass와 같은 전처리기를 지원하므로 개발 속도가 빨라집니다.

단점

• Twitter Bootstrap의 인기로 인해 Twitter Bootstrap에 대한 커뮤니티 지원이 Foundation보다 낫습니다.

• 초보자가 전 처리기 지원을 배우고 활용하는 데 다소 시간이 걸릴 수 있습니다.

• 문제 해결을위한 QA 사이트 및 포럼과 같은 광범위한 지원이 부족합니다.

• 재단은 다른 사람들에 비해 테마가 적습니다.

이 장에서는 웹 사이트에서 Foundation을 설치하고 사용하는 방법에 대해 설명합니다.

재단 다운로드

Foundation.zurb.com 링크를 열면 아래와 같은 화면이 나타납니다.

클릭 Download Foundation 6 버튼을 누르면 다른 페이지로 이동합니다.

여기에 네 개의 버튼이 있습니다.

• Download Everything − 기본 CSS 및 JS와 같은 프레임 워크에 모든 것을 포함하려면이 버전의 Foundation을 다운로드 할 수 있습니다.

• Download Essentials − 그리드, 버튼, 타이포그래피 등이 포함 된 간단한 버전을 다운로드합니다.

• Custom Download − Foundation 용 사용자 정의 라이브러리를 다운로드하며 요소를 포함하고 열 크기, 글꼴 크기, 색상 등을 정의합니다.

• Install via SCSS − Foundation for sites를 설치하기위한 문서 페이지로 리디렉션됩니다.

클릭 할 수 있습니다 Download Everything버튼을 눌러 프레임 워크의 모든 것을 가져옵니다. 즉 CSS 및 JS. 파일은 프레임 워크의 모든 항목으로 구성되므로 매번 개별 기능에 대해 별도의 파일을 포함 할 필요가 없습니다. 이 튜토리얼을 작성할 당시 최신 버전 (Foundation 6)이 다운로드되었습니다.

파일 구조

Foundation이 다운로드되면 ZIP 파일의 압축을 풀면 다음 파일 / 디렉토리 구조가 표시됩니다.

보시다시피, 컴파일 된 CSS 및 JS (foundation. *)와 컴파일 및 축소 된 CSS 및 JS (foundation.min. *)가 있습니다.

이 튜토리얼 전체에서 라이브러리의 CDN 버전을 사용하고 있습니다.

HTML 템플릿

Foundation을 사용하는 기본 HTML 템플릿은 다음과 같습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

다음 섹션에서는 위 코드에 대해 자세히 설명합니다.

HTML5 문서 유형

Foundation은 HTML5 doctype을 사용해야하는 특정 HTML 요소와 CSS 속성으로 구성됩니다. 따라서 Foundation을 사용하는 모든 프로젝트의 시작 부분에 HTML5 doctype에 대한 다음 코드를 포함해야합니다.

<!DOCTYPE html>
<html>
   ....
</html>

모바일 우선

모바일 장치에 반응하는 데 도움이됩니다. 다음을 포함해야합니다.viewport meta tag <head> 요소에 추가하여 모바일 장치에서 적절한 렌더링 및 터치 확대 / 축소를 보장합니다.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

• width 속성은 장치의 너비를 제어합니다. 기기 너비로 설정하면 다양한 기기 (모바일, 데스크톱, 태블릿 ...)에서 올바르게 렌더링됩니다.

• initial-scale = 1.0 은로드 될 때 웹 페이지가 1 : 1 배율로 렌더링되고 확대 / 축소가 기본적으로 적용되지 않도록합니다.

구성 요소 초기화

jQuery 스크립트는 모달 및 드롭 다운과 같은 구성 요소를 위해 Foundation에 필요합니다.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

산출

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

• 위의 주어진 HTML 코드를 저장하십시오. firstexample.html 파일.

• 브라우저에서이 HTML 파일을 열면 아래와 같이 출력이 표시됩니다.

당신은을 통해 설치 될 수있는 몇 가지 가능한 템플릿을 사용하여 프로젝트 개발을 시작할 수 있습니다 예티 실행 또는Foundation CLI. Sass, JavaScript, 파일 복사 등의 처리를 위해 Gulp 빌드 시스템을 사용하여 이러한 템플릿을 사용하여 새 프로젝트를 시작할 수 있습니다 .

기본 템플릿

기본 템플릿은 플랫 디렉토리 구조를 포함하고 SASS 파일 만 컴파일하는 SASS 템플릿과 유사하며 SASS 만 사용하면서이 간단한 템플릿을 사용하는 것이 좋습니다. Yeti Launch를 사용하거나 다음 명령을 사용하여 Foundation CLI를 사용하여 기본 템플릿을 사용할 수 있습니다.

$ foundation new --framework sites --template basic

이를 설정하려면 먼저 npm install , bower install 을 실행 하고 npm start 명령을 사용하여 실행합니다. Github 에서 템플릿 파일을 다운로드 할 수도 있습니다 .

ZURB 템플릿

CSS / SCSS, JavaScript, Handlebars 템플릿, 마크 업 구조, 이미지 압축의 조합이며 SASS 처리를 사용합니다. Yeti Launch를 사용하거나 아래 명령을 사용 하여 Foundation CLI 를 사용하여 ZURB 템플릿을 사용할 수 있습니다.

$ foundation new --framework sites --template zurb

이 템플릿을 실행하려면 기본 템플릿에 지정된 동일한 단계를 따르십시오. Github 에서 템플릿 파일을 다운로드 할 수도 있습니다 .

자산 복사

자산 이 프로젝트 폴더가 될 Gulp 를 사용하여 src / assets 폴더 의 콘텐츠를 복사 할 수 있습니다 . 여기서 중요한 점은 SASS 파일, JavaScript 파일 및 이미지가 컨텐츠를 복사하는 자체 프로세스를 가지므로이 자산 복사 프로세스에 포함되지 않는다는 것입니다.

페이지 편집

src / 디렉토리에 있는 pages , layouts 및 partials의 세 폴더 아래에 HTML 페이지를 만들 수 있습니다 . 템플릿, 페이지, HTML 부분을 사용하여 페이지의 레이아웃을 생성 하는 Panini 플랫 파일 컴파일러를 사용할 수 있습니다 . 이 프로세스는 Handlebars 템플릿 언어 를 사용하여 수행 할 수 있습니다 .

SASS 컴파일

Libsass를 사용하여 SASS를 CSS로 컴파일 할 수 있으며 기본 SASS 파일은 src / assets / scss / app.scss에 저장되며 새로 생성 된 SASS 부분도이 폴더 자체에 저장됩니다. CSS의 출력은 중첩 스타일 인 일반 CSS와 같습니다. clean-css로 CSS를 압축하고 UnCSS를 사용하여 스타일 시트에서 사용하지 않는 CSS를 제거 할 수 있습니다 .

자바 스크립트 컴파일

JavaScript 파일은 Foundation과 함께 src / assets / js 폴더에 저장되며 모든 종속성은 app.js 파일에 함께 연결 됩니다. 파일은 아래 순서대로 함께 묶입니다.

• 재단의 종속성.
• 파일은 src / assets / js 폴더에 저장됩니다.
• 파일은 app.js 라는 하나의 파일에 번들로 제공됩니다 .

이미지 압축

기본적으로 모든 이미지는 dist 폴더 아래의 assets / img 폴더에 저장됩니다. JPEG, PNG, SVG 및 GIF 파일을 지원하는 gulp-imagemin 을 사용하여 프로덕션 용으로 빌드하는 동안 이미지를 압축 할 수 있습니다 .

BrowserSync

동기화 된 브라우저 테스트 인 BrowserSync 서버를 만들 수 있습니다.http://localhost:8000이 URL을 사용하여 컴파일 된 템플릿을 볼 수 있습니다. 서버가 실행되는 동안 파일을 저장하면 페이지가 자동으로 새로 고쳐지고 작업하는 동안 페이지에 대한 변경 사항을 실시간으로 볼 수 있습니다.

기술

웹 애플리케이션과 원활하게 작동하는 Foundation 요소가 포함되어 있습니다. 다음 표에는 재단 구성 요소 중 일부가 나열되어 있습니다.

이 장에서는 글로벌 스타일 에 대해 알아 봅니다 . Foundation 프레임 워크의 전역 CSS에는 브라우저간에 스타일이 일관되도록하는 유용한 재설정이 포함되어 있습니다.

글꼴 크기 조정

브라우저 스타일 시트의 글꼴 크기는 기본적으로 100 %로 설정됩니다. 기본 글꼴 크기는 16 픽셀로 설정됩니다. 글꼴 크기에 따라 그리드 크기가 계산됩니다. 고유 한 기본 글꼴 크기와 영향을받지 않는 그리드 중단 점을 가지려면 $ rem-base 를 픽셀 단위 인 $ global-font-size 값으로 설정하십시오.

그림 물감

링크 및 버튼 과 같은 대화 형 요소 는 SASS 변수 $ primary-color 에서 가져온 기본 파란색 음영을 사용 합니다 . 구성 요소는 보조, 경고, 성공 및 경고 와 같은 색상을 가질 수도 있습니다 . 자세한 내용은 여기를 확인 하십시오 .

SASS 참조

변수

다음 표에는 _settings.scss 프로젝트에서 구성 요소의 기본 스타일을 사용자 정의하는 데 사용되는 SASS 변수가 나열되어 있습니다 .

SASS는 Foundation에서 코드를보다 유연하고 사용자 정의 할 수 있도록 도와줍니다.

적합성

Foundation 용 SASS 기반 버전을 설치하려면 Ruby가 Windows에 설치되어 있어야합니다. Foundation은 Ruby SASS 및 libsass로 컴파일 할 수 있습니다. 우리는 추천합니다node-sass 3.4.2+ SASS를 컴파일하는 버전.

Autoprefixer 필요

Autoprefixer는 SASS 파일을 처리합니다. gulp-autoprefixer 는 프로세스를 빌드하는 데 사용됩니다. 다음 자동 접두사 설정은 적절한 브라우저 지원을 얻는 데 사용됩니다.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

프레임 워크로드

NPM을 사용하여 프레임 워크 파일을 설치할 수 있습니다. 명령 줄 인터페이스 (CLI)를 사용하여 Sass 파일을 컴파일 할 수 있습니다. 다음은 프레임 워크를로드하는 명령입니다.

npm install foundation-sites --save

위의 명령 줄 코드를 실행하면 다음 줄이 표시됩니다.

수동으로 컴파일

빌드 프로세스에 따라 프레임 워크 파일을 가져 오기 경로로 추가 할 수 있지만 경로는 동일한 packages_folder / foundation-sites / scss 입니다. @import의 문은 상단에 포함되어있는 기초-sites.scss의 파일입니다. 주어진 코드의 다음 줄은Adjusting CSS Output 부분.

@import 'foundation';
@include foundation-everything;

컴파일 된 CSS 사용

미리 컴파일 된 CSS 파일을 포함 할 수 있습니다. CSS 파일에는 축소 및 축소되지 않은 두 가지 유형이 있습니다. 축소 버전은 프로덕션에 사용되며 축소되지 않은 버전은 프레임 워크 CSS를 직접 편집하는 데 사용됩니다.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

CSS 출력 조정

다양한 구성 요소의 경우 Foundation 출력은 여러 클래스로 구성됩니다. 프레임 워크의 CSS 출력을 제어하는 ​​데 사용됩니다. 한 번에 모든 구성 요소를 포함하려면 다음 한 줄의 코드를 추가합니다.

@include foundation-everything;

다음은 scss 파일에 위 코드를 작성할 때 가져온 구성 요소 목록입니다. 필요하지 않은 구성 요소는 주석을 달 수 있습니다. Your_folder_name / node_modules / foundation-sites / scss / foundation.scss 파일 에서 아래 주어진 코드 행을 볼 수 있습니다 .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

설정 파일

설정 파일은 전체 기초 프로젝트, 즉 _settings.scss에 포함 됩니다. Yeti Launch 또는 CLI를 사용하여 Foundation for Sites 프로젝트를 만드는 경우 src / assets / scss /에서 설정 파일을 찾을 수 있습니다.

npm을 사용하여 Foundation을 설치 했으므로 your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss 아래에 포함 된 설정 파일을 찾을 수 있습니다 . 이를 작업 할 자신의 Sass 파일로 이동할 수 있습니다.

변수로 사용자 정의 할 수없는 경우 자체 CSS를 작성할 수 있습니다. 다음은 버튼의 기본 스타일을 변경하는 변수 세트입니다.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

이 장에서 우리는 JavaScript 에 대해 공부할 것 입니다. Foundation에서 JavaScript를 설정하는 것은 쉽습니다. 필요한 것은 jQuery뿐입니다.

자바 스크립트 설치

ZIP 다운로드, 패키지 관리자 또는 CDN을 사용하여 Foundation JavaScript 파일을 가져올 수 있습니다. 코드에서 닫는 <body> 앞에 배치 된 <script> 태그로 jQuery 및 Foundation에 대한 링크를 제공하고 Foundation이 jQuery 후에로드되는지 확인할 수 있습니다. 자세한 내용은 여기를 클릭하십시오 .

파일 구조

당신이 명령 줄을 통해 재단을 설치하는 경우, 재단은 다음과 같은 개별 파일로 다운로드 플러그인 foundation.tabs.js , foundation.dropdownMenu.js , foundation.slider.js 등등하고있다. 이 모든 파일은 한 번에 모든 플러그인을 제공하는 Foundation.js 로 결합됩니다 . 플러그인을 사용하려면 먼저 Foundation.core.js 를로드해야합니다.

예를 들어-

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

특정 플러그인에는 Foundation 설치와 함께 제공되는 특정 유틸리티 라이브러리가 필요할 수 있습니다. 다음 장 JavaScript Utilities 에서 특정 플러그인 요구 사항에 대해 자세히 알아볼 수 있습니다 .

개별 파일을로드하면 특히 모바일 사용자에게 네트워크 오버 헤드가 발생합니다. 더 빠른 페이지로드를 위해 grunt 또는 gulp 를 사용하는 것이 좋습니다.

초기화 중

재단 () 함수를 한 번에 플러그인 모든 재단을 초기화하는 데 사용됩니다.

예를 들어-

(document).foundation();

플러그인 사용

데이터 속성을 사용하여 플러그인은 플러그인 이름과 일치하는 HTML 요소에 연결됩니다. 대부분의 플러그인은 다른 요소 내에 중첩 될 수 있지만 단일 HTML 요소에는 한 번에 하나의 플러그인 만있을 수 있습니다. 예를 들어, 툴팁 링크는 data-tooltip 을 추가하여 생성됩니다 . 자세한 내용은 여기를 클릭하십시오 .

플러그인 구성

플러그인은 구성 설정을 사용하여 사용자 정의 할 수 있습니다. 예를 들어, 아코디언이 위아래로 움직이는 속도를 설정할 수 있습니다 . 플러그인 설정은 플러그인을 사용하여 전역 적으로 변경할 수 있습니다.DEFAULTS특성. 자세한 내용은 여기를 클릭하십시오 .

페이지로드 후 플러그인 추가

새 HTML이 DOM에 추가되면 해당 요소의 플러그인이 기본적으로 초기화되지 않습니다. .foundation () 함수 를 다시 호출하여 새 플러그인을 확인할 수 있습니다 .

예를 들어-

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

프로그래밍 방식 사용

자바 스크립트에서 플러그인은 프로그래밍 방식으로 생성 될 수 있으며 각 플러그인은 요소와 개체와 같은 두 개의 매개 변수를 사용하는 생성자 가있는 전역 Foundation 개체의 클래스입니다.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

대부분의 플러그인은 JavaScript를 통해 조작 할 수있는 공용 API와 함께 제공됩니다. 플러그인 문서를 통해 사용 가능한 기능을 연구 할 수 있으며 메서드를 쉽게 호출 할 수 있습니다.

예를 들어-

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

• 모든 jQuery 선택기를 선택할 수 있으며 선택기에 여러 플러그인이 있으면 모두 동일한 선택된 메서드가 호출됩니다.

• 인수는 JavaScript에 인수를 전달하는 것처럼 전달할 수 있습니다.

• underscore (_) 접두사가 붙은 메서드 는 내부 API의 일부로 간주됩니다. 즉, 경고없이 중단, 변경 또는 사라질 수 있음을 의미합니다.

이벤트

특정 기능이 완료 될 때마다 DOM이 이벤트를 트리거합니다. 예를 들어, 탭이 변경 될 때마다 듣고 응답을 생성 할 수 있습니다. 각 플러그인은 이벤트 목록을 트리거 할 수 있으며 이는 플러그인 문서에 문서화됩니다. Foundation 6에서는 콜백 플러그인이 제거되고 이벤트 리스너로 가져와야합니다.

예를 들어-

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation에는 공통 기능을 추가하는 데 사용되는 JavaScript 유틸리티가 포함되어 있습니다. 매우 유용하고 사용하기 쉽습니다. 이 JavaScript 유틸리티 라이브러리는 Your_folder_name / node_modules / foundation-sites / js 폴더에서 찾을 수 있습니다.

상자

• Foundation.Box 라이브러리는 몇 가지 메서드로 구성됩니다.

• 그만큼 js/foundation.util.box.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

• jQuery 객체 또는 일반 JavaScript 요소는 두 메서드 모두에 전달할 수 있습니다.

var dims = Foundation.Box.GetDimensions(element);

반환 된 객체는 요소 의 차원을 다음 과 같이 지정합니다.

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

• ImNotTouchingYou 기능 이 포함되어 있습니다.

• 전달 된 요소를 기반으로 창의 가장자리와 충돌하거나 선택적 요소 또는 상위 요소 인 부울 값이 반환됩니다.

• 아래 줄에 지정된 두 가지 옵션 즉, leftAndRightOnly, topAndBottomOnly는 하나의 축에서만 충돌을 식별하는 데 사용됩니다.

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

건반

• Foundation.Keyboard 에는 키보드 이벤트 상호 작용을 쉽게 만드는 데 도움 이되는 많은 메서드가 있습니다.

• 그만큼 js/foundation.util.keyboard.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

• Foundation.Keyboard.keys 개체 는 프레임 워크에서 더 자주 사용되는 키 / 값 쌍으로 구성됩니다.

• 키를 누를 때마다 Foundation.Keyboard.parseKey 가 호출되어 문자열을 가져옵니다. 이것은 자신의 키보드 입력을 관리하는 데 도움이됩니다.

다음 코드는 주어진 $ element 내에서 모든 포커스 가능한 요소를 찾는 데 사용됩니다 . 따라서 사용자가 함수와 선택기를 작성할 필요가 없습니다.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

• handleKey의 기능은이 라이브러리의 주요 기능입니다.

• 이 메서드는 키보드 이벤트를 처리하는 데 사용됩니다. 플러그인이 유틸리티에 등록 될 때마다 호출 될 수 있습니다.

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

Foundation.Keyboard.register의 당신이 당신의 자신의 키 바인딩을 사용하고자 할 때 함수를 호출 할 수 있습니다.

MediaQuery

• MediaQuery 라이브러리는 모든 반응 형 CSS 기술의 중추입니다.

• 그만큼 js/foundation.util.mediaQuery.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

• Foundation.MediaQuery.atLeast ( '큰')가 화면 전체 브레이크 포인트만큼 적어도 있는지 확인하기 위해 사용된다.

• Foundation.MediaQuery.get ( '매체') 중단 점의 미디어 쿼리를 가져옵니다.

• Foundation.MediaQuery.queries는 미디어 쿼리의 배열, 재단은 브레이크 포인트에 사용됩니다.

• Foundation.MediaQuery.current는 현재 브레이크 포인트 크기의 문자열입니다.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

다음 코드는 창에서 미디어 쿼리 변경을 브로드 캐스트합니다.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

모션 및 이동

• Foundation.Motion javascript는 Foundation 6에 포함 된 Motion UI 라이브러리와 유사합니다. 사용자 정의 CSS 전환 및 애니메이션을 만드는 데 사용됩니다.

• 그만큼 js/foundation.util.motion.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

• Foundation.Move 는 CSS3 기반 애니메이션을 간단하고 우아하게 만드는 데 사용됩니다.

• requestAnimationFrame();메소드는 브라우저에 애니메이션을 수행하도록 지시합니다. 브라우저가 다음 다시 그리기를 수행하기 전에 애니메이션 함수를 호출하도록 요청합니다.

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

애니메이션이 완료되면 finished.zf.animate 가 실행됩니다.

타이머 및 이미지로드 됨

Orbit은 함수 타이머와로드 된 이미지를 모두 사용합니다. 그만큼js/foundation.util.timerAndImageLoader.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

이미지로드 메서드는 이미지가 완전히로드되면 jQuery 컬렉션에서 콜백 함수를 실행합니다.

Foundation.onImagesLoaded($images, callback);

접촉

• 이 메서드는 가상 드래그 이벤트를 추가하고 요소에 스 와이프하는 데 사용됩니다.

• 그만큼 js/foundation.util.touch.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

• addTouch의 방법은 모바일 장치 용 슬라이더 플러그인에서 터치 이벤트에 바인딩 요소에 사용된다.

• spotSwipe의 방법은 모바일 장치 용 궤도에 플러그인 와이프 이벤트 요소를 결합한다.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

트리거

• 선택한 요소에 대해 지정된 이벤트를 트리거합니다.

• 그만큼 js/foundation.util.triggers.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

• 트리거는 많은 Foundation 플러그인에서 사용됩니다.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

이 라이브러리에서는 크기 조정 및 스크롤이라는 두 가지 방법이 사용됩니다.

• 리사이즈 () resize 이벤트가 발생하는 경우에있어서, 상기 크기 조정 이벤트를 트리거한다.

• 스크롤 () 는 스크롤 이벤트가 발생하는 경우에있어서, 상기 스크롤 이벤트를 트리거한다.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

여러 가지 잡다한

• Foundation에는 여러 곳에서 사용되는 핵심 라이브러리의 기능이 거의 없습니다.

• 그만큼 js/foundation.core.js 코드를 작성하는 동안 포함될 수있는 스크립트 파일 이름입니다.

• Foundation.GetYoDigits ([number, namespace]) 는 네임 스페이스 가있는 임의의 base-36 uid를 반환합니다. 기본적으로 6 자 길이의 문자열 길이를 반환합니다.

• Foundation.getFnName (fn) 은 JavaScript 함수 이름을 반환합니다.

• Foundation.transitionend 는 CSS 전환이 완료되면 발생합니다.

미디어 쿼리는 너비, 높이, 색상과 같은 미디어 기능을 포함하고 지정된 화면 해상도에 따라 콘텐츠를 표시하는 CSS3 모듈입니다.

재단은 다음과 같은 미디어 쿼리를 사용하여 분석 범위를 만듭니다.

• Small − 모든 화면에 사용됩니다.

• Medium − 640 픽셀 이상의 화면에 사용됩니다.

• Large − 1024 픽셀 이상의 화면에 사용됩니다.

중단 점 클래스 를 사용하여 화면 크기를 변경할 수 있습니다 . 예를 들어, 당신이 사용할 수있는 .small-6 작은 크기의 화면과에 대한 클래스를 .medium-4 다음 코드에서와 같이 중간 크기의 스크린을위한 클래스 -

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

중단 점 변경

응용 프로그램에서 Foundation의 SASS 버전을 사용하는 경우 중단 점을 변경할 수 있습니다. 아래와 같이 설정 파일 의 $ breakpoints 변수 아래에 중단 점 이름을 배치 할 수 있습니다.

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

$ breakpoint-classes 변수를 수정하여 설정 파일에서 중단 점 클래스를 변경할 수 있습니다 . CSS에서 .large 클래스 를 사용하려면 아래와 같이 목록 끝에 추가하십시오.

$breakpoints-classes: (small medium large);

CSS에서 .xlarge 클래스 를 사용 하고 다음과 같이 목록 끝에이 클래스를 추가 한다고 가정 합니다.

$breakpoints-classes: (small medium large xlarge);

SASS

중단 점 믹스 인

• @include 와 함께 breakpoint () mixin을 사용하여 미디어 쿼리를 작성할 수 있습니다 .

• 사용 다운 또는 단지 다음과 같은 코드 형식과 같이 키워드 중단 점의 값과 함께 미디어 쿼리의 동작을 변경 -

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

기기 방향 또는 픽셀 밀도에 세로 , 가로 및 망막의 세 가지 미디어 쿼리를 사용할 수 있으며 너비 기반 미디어 쿼리가 아닙니다.

중단 점 기능

• 내부 함수를 사용하여 breakpoint () mixin 의 기능을 사용할 수 있습니다 .

• 중단 점 () 기능은 자신의 미디어 쿼리를 작성하는 직접 사용할 수 있습니다 -

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

자바 스크립트

미디어 쿼리 작업

• Foundation JavaScript는 아래에 지정된대로 Foundation.MediaQuery 객체 의 현재 중단 점 이름에 액세스 할 수 있는 MediaQuery.current 함수를 제공합니다.

Foundation.MediaQuery.current

• MediaQuery.current의 기능 표시 작은 , 중간 , 큰 전류 브레이크 포인트 이름 등.

• 아래와 같이 MediaQuery.get 함수를 사용하여 중단 점의 미디어 쿼리를 얻을 수 있습니다.

Foundation.MediaQuery.get('small')

Sass 참조

변수

다음 표는 구성 요소의 기본 스타일을 사용자 정의하는 데 사용할 수있는 SASS 변수를 나열합니다.

믹스 인

Mixins는 Foundation 구성 요소에 대한 CSS 클래스 구조를 구축하기 위해 스타일 그룹을 만듭니다.

BREAKPOINT

그것은 사용 중단 점 () 미디어 쿼리를 만들 믹스 인을 다음과 같은 활동을 포함 -

• 문자열이 전달되면 mixin은 $ breakpoints 맵 에서 문자열을 검색 하고 미디어 쿼리를 생성합니다.

• 픽셀 값을 사용하는 경우 $ rem-base를 사용하여 em 값으로 변환하십시오 .

• rem 값이 전달되면 단위가 em으로 변경됩니다.

• em 값을 사용하는 경우 그대로 사용할 수 있습니다.

다음 표는 중단 점에서 사용하는 매개 변수를 지정합니다.

기능

BREAKPOINT

그것은 사용 중단 () 과 일치하는 입력 값과 미디어 쿼리를 만드는 믹스 인이.

다음 표는 중단 점에서 사용되는 가능한 입력 값을 지정합니다.

자바 스크립트 참조

기능

두 가지 유형의 기능이 있습니다.

• .atLeast− 화면을 확인합니다. 적어도 중단 점만큼 넓어야합니다.

• .get − 중단 점의 미디어 쿼리를 가져 오는 데 사용됩니다.

다음 표는 위의 함수에서 사용하는 매개 변수를 지정합니다.

기술

Foundation 그리드 시스템은 페이지를 통해 최대 12 개의 열로 확장됩니다. 그리드 시스템은 콘텐츠를 보관하는 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다.

그리드 옵션

다음 표는 Foundation 그리드 시스템이 여러 장치에서 작동하는 방식에 대해 간략하게 설명합니다.

기초 그리드의 기본 구조

다음은 기초 그리드의 기본 구조입니다-

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

• 먼저 행 클래스를 만들어 가로 열 그룹을 만듭니다.

• 콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식이 될 수 있습니다.

• 그리드 열은 확장하려는 사용 가능한 열 수를 12 개 지정하여 생성됩니다. 예를 들어 4 개의 동일한 열에 대해 .large-3을 사용합니다.

다음은 Foundation 그리드 시스템에서 사용되는 세 가지 클래스입니다.

고급 그리드

다음은 Foundation에서 사용되는 고급 그리드 형식입니다.

의미 론적으로 구축

SASS 믹스 인 세트를 사용하여 자체 시맨틱 그리드를 구축하는 데 사용되는 그리드 CSS가 생성됩니다. 자세한 정보는 여기를 클릭하세요

SASS 참조

다음은 Foundation에서 사용되는 그리드에 대한 SASS 참조입니다.

그리드는 플렉스 디스플레이 속성 에 따라 다릅니다 . 자동 스태킹, 소스 정렬, 수직 정렬 및 수평 정렬과 같이 flexbox에서 사용할 수있는 여러 기능으로 구성됩니다.

브라우저 지원

플렉스 그리드는 Chrome, Firefox, Internet Explorer 10 이상, Safari 6 이상, Android 4 이상 및 iOS 7 이상에서 지원됩니다.

다음 표는 설명과 함께 Flex Grid의 기능을 설명합니다.

이 장에서 우리는 Forms. Foundation 은 양식 스타일과 그리드 지원을 결합한 강력하고 간편하며 다양한 양식 레이아웃 시스템을 제공합니다.

다음 표에는 Foundation에서 사용되는 양식 요소가 나열되어 있습니다.

기술

• Foundation은 가시성 클래스를 사용하여 장치 방향 (세로 및 가로) 또는 화면 크기 (소형, 중형, 대형 또는 초대형 화면)에 따라 요소를 표시하거나 숨 깁니다.

• 사용자는 브라우징 환경에 따라 요소를 사용할 수 있습니다.

다음 표는 탐색 환경을 기반으로 요소를 제어하는 ​​Foundation의 가시성 클래스를 나열합니다.

Foundation은 .hide 및 .invisible 클래스 를 사용하여 콘텐츠를 숨길 수있는 일부 클래스를 지원 하고 페이지에 아무것도 표시하지 않습니다.

방향 감지

장치는 가로 및 세로 기능 을 사용하여 다른 방향을 결정할 수 있습니다 . 휴대폰과 같은 핸드 헬드 장치는 회전 할 때 다른 방향을 지정합니다. 데스크톱의 경우 방향은 항상 가로입니다.

접근성

다음 표는 화면 판독기가 읽을 수 있도록하는 동안 콘텐츠를 숨기는 화면 판독기에 대한 접근성 기술을 나열합니다.

Sass 참조

Foundation은 다음 믹스 인을 사용하여 CSS 출력을 표시하므로 구성 요소에 대한 자체 클래스 구조를 구축 할 수 있습니다.

이러한 모든 믹스 인의 기본값은 none 으로 설정됩니다 .

기술

Foundation의 Typography는 요소에 대한 매력적이고 간단한 기본 스타일을 만드는 제목, 단락, 목록 및 기타 인라인 요소를 정의합니다.

다음 표는 Foundation에서 사용되는 다양한 유형의 타이포그래피를 나열합니다.

Sass 참조

표에 나열된 다음 SASS 변수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)

이 장에서 우리는 Typography Helpers. 타이포그래피 도우미는 의미 상 관련있는 방식으로 텍스트 서식을 지정하는 데 사용됩니다. Foundation의 도우미 클래스를 사용하면 일부 타이포그래피 스타일을 더 빠르게 스캐 폴딩 할 수 있습니다.

다음 표에는 Foundation에서 사용되는 Typography Helpers가 나열되어 있습니다.

Sass 참조

변수

다음 표는 사용자 정의 할 컴포넌트의 기본 스타일을 만드는 프로젝트 설정 파일의 SASS 변수를 나열합니다.

이 장에서 우리는 basic controls. Foundation은 버튼 , 슬라이더 및 스위치 와 같은 기본 컨트롤을 제공 합니다 .

다음 표에는 Foundation에서 사용되는 기본 컨트롤이 나열되어 있습니다.

기술

Foundation은 탐색 요소 스타일 지정을위한 몇 가지 다른 옵션을 제공합니다. 많은 간단한 탐색 패턴이 번들로 제공됩니다. 강력한 반응 형 탐색 솔루션을위한 형태로 통합 할 수 있습니다.

다음 표는 설명과 함께 다양한 유형의 탐색을 설명합니다.

Foundation 컨테이너는 사이트에 대해 항상 브라우저의 전체 너비를 만들고 사이트 콘텐츠를 래핑하는 데 사용됩니다.

다음 표는 재단에서 사용되는 컨테이너의 일부를 나열합니다-

이 장에서는 Foundation의 미디어 에 대해 공부 합니다. Foundation은 Flex Video , Label , orbit , 진행률 표시 줄 및 도구 설명 과 같은 여러 미디어 유형으로 구성됩니다 . 다음 표에는 모든 미디어 유형이 나열되어 있습니다.

기술

플러그인은 원래 Foundation 핵심 기능으로 완료되지 않은 추가 기능을 제공하는 소프트웨어입니다. 재단 플러그인을 업로드하여 사이트의 기능을 확장 할 수 있습니다. 플러그인은 작업을 더 쉽게 만드는 데 사용됩니다.

다음 표는 설명과 함께 다양한 유형의 플러그인을 설명합니다.

Foundation은 util , color , selector , unit , value 등과 함께 사용할 수있는 SASS 유틸리티 함수 세트를 제공합니다 .

다음 코드 줄을 사용하여 한 번에 모든 유틸리티 파일을 가져올 수 있습니다-

@import 'util/util';

아래와 같이 개별 유틸리티 파일을 가져올 수도 있습니다.

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass 참조

다음 SASS 함수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

전경

배경색을 기준으로 요소에 전경색을 제공합니다. 다른 유형의 매개 변수를 할당하기 위해 다음 형식을 사용합니다.

foreground($color, $yes, $no, $threshold)

위의 매개 변수는 다음 표에 지정되어 있습니다.

스마트 스케일

밝기에 따라 요소에 적절한 색상을 제공합니다. 적절한 색상을 지정하기 위해 다음 형식을 사용합니다.

smart-scale($color, $scale, $threshold)

위의 주어진 매개 변수는 다음 표에 지정되어 있습니다.

텍스트 입력

텍스트 입력 유형을 사용하는 동안 선택기를 만듭니다. 입력 유형을 지정하기 위해 다음 형식을 사용합니다-

text-inputs($types)

다음 표에 지정된 매개 변수를 사용합니다.

스트립 유닛

값에서 단위를 제거하고 숫자 만 반환합니다. 그것은 값에서 단위를 제거하기 위해 다음 형식을 사용합니다-

strip-unit($num)

다음 표에 지정된 매개 변수를 사용합니다.

rem-calc

rem 값과 일치하도록 픽셀 값을 변경합니다. 픽셀 값을 rem 값으로 변환하기 위해 다음 형식을 사용합니다.

rem-calc($values, $base)

표에 지정된대로 다음 매개 변수를 사용합니다-

가가

false가 아닌 경우 값을 지정합니다. false 값에는 null, none, 0 또는 빈 목록이 포함됩니다. 그것은 값을 지정하기 위해 다음 형식을 사용합니다-

has-value($val)

다음 표에 지정된 매개 변수를 사용합니다.

겟 사이드

그것은 값의 측면을 지정하고 패딩, 여백 등에서 위쪽 / 오른쪽 / 아래쪽 / 왼쪽 값을 정의합니다. 값의 측면을 지정하기 위해 다음 형식을 사용합니다.

has-value($val)

표에 지정된대로 다음 매개 변수를 사용합니다-

테두리 값 가져 오기

요소의 테두리 값을 결정합니다. 그것은 경계 값을 지정하기 위해 다음 형식을 사용합니다-

get-border-value($val, $elem)

표에 지정된대로 다음 매개 변수를 사용합니다-

가져 오기

scss / util / _mixins.scss 파일 아래에있는 SASS 믹스 인의 내용을 가져옵니다 . 다음 코드 줄을 사용하여 SASS 믹스 인을 가져올 수 있습니다.

@import 'util/mixins';

Sass 참조

SASS 함수를 사용하여 구성 요소의 스타일을 변경할 수 있습니다.

믹스 인

다음 믹스 인을 사용하여 구성 요소의 CSS 클래스 구조를 구축 할 수 있습니다.

CSS-TRIANGLE

드롭 다운 화살표, 드롭 다운 핍 등을 만드는 데 사용됩니다. 기존 요소에 삼각형을 연결하기 위해 <i> & :: before </ i> 또는 <i> & :: after </ i> 선택기를 사용합니다. 다음 형식을 사용합니다-

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

그것은 표에 지정된 다음 매개 변수를 사용합니다-

HAMBURGER

너비, 높이, 막대 수 및 색상으로 메뉴 아이콘을 만드는 데 사용됩니다. 다음 형식을 사용합니다-

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

그것은 표에 지정된 다음 매개 변수를 사용합니다-

BACKGROUND-TRIANGLE

요소에 배경 이미지를 지정하는 데 사용됩니다. 다음 형식을 사용합니다-

@include background-triangle($color);

그것은 표에 지정된대로 매개 변수를 사용합니다-

CLEARFIX

이 믹스 인은 자동으로 자식 요소를 지워서 추가 마크 업이 필요하지 않습니다. 다음 형식을 사용합니다-

@include clearfix;

AUTO-WIDTH

컨테이너에있는 요소 수에 따라 요소의 크기를 자동으로 조정합니다. 다음 형식을 사용합니다-

@include auto-width($max, $elem);

표에 지정된대로 다음 매개 변수를 사용합니다-

DISABLE-MOUSE-OUTLINE

마우스 입력 동작을 식별 할 때 요소 주변의 윤곽선을 비활성화하는 데 사용됩니다. 다음 형식을 사용합니다-

@include disable-mouse-outline;

ELEMENT-INVISIBLE

요소를 숨기는 데 사용되며 키보드 및 기타 장치에서 사용할 수 있습니다. 다음 형식을 사용합니다-

@include element-invisible;

ELEMENT-INVISIBLE-OFF

보이지 않는 요소를 제거하고 element-invisible () 믹스 인 을 사용하여 CSS 출력을 반전하는 데 사용됩니다 . 다음 형식을 사용합니다-

@include element-invisible-off;

VERTICAL-CENTER

다음 형식을 사용하여 정적이 아닌 부모 요소 내부에 요소를 수직으로 배치하는 데 사용됩니다.

@include vertical-center;

HORIZONTAL-CENTER

다음 형식을 사용하여 비 정적 부모 요소 내부에 요소를 수평 중앙에 배치하는 데 사용됩니다.

@include horizontal-center;

ABSOLUTE-CENTER

다음 형식을 사용하여 비 정적 부모 요소 내부에 절대적으로 요소를 배치하는 데 사용됩니다.

@include absolute-center;

Foundation은 UI 전환 및 애니메이션을 만들기위한 모션 UI 라이브러리를 제공하며 Toggler , Reveal 및 Orbit 과 같은 Foundation 구성 요소에서 사용됩니다 .

Motion UI 설치

다음 코드 줄과 같이 npm 또는 bower를 사용하여 프로젝트에 Motion UI 라이브러리를 설치할 수 있습니다.

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

다음 코드 줄과 같이 config.rb 를 사용하여 Compass 에서 Motion UI 라이브러리의 경로를 추가 할 수 있습니다.

add_import_path 'node_modules/motion-ui/src'

다음 코드 줄을 사용하여 gulp-sass에 경로를 포함 할 수 있습니다.

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

다음 코드를 사용하여 SASS 파일에서 Motion UI 라이브러리를 가져옵니다.

@import 'motion-ui'

기본 제공 전환

Foundation은 Motion UI 라이브러리에서 생성 된 전환 클래스를 사용하여 전환 효과를 제공합니다. 전환 효과 를 사용하여 간단한 예 를 하나 만들어 보겠습니다 .

사용자 지정 전환

모션 UI 라이브러리를 사용하여 사용자 정의 전환 클래스를 설정할 수 있습니다. 예를 들어, 요소를 회전하는 mui-hinge () 전환에 대한 사용자 정의 클래스를 설정 합니다.

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

생기

모션 UI 전환 효과를 사용하여 CSS 애니메이션을 만들 수 있습니다. 데이터 애니메이션 클래스를 사용하여 모달에서 애니메이션이 작동하는 방식을 확인 하려면이 링크 를 클릭하십시오 .