케이테마는 홈페이지의 기능구현을 위해 다양한 외부 API를 사용하고 있습니다. 아래의 기능목록에서 관련내용을 확인하시기 바랍니다.
*플러그인은 wp-content/themes/ ktheme_starter/vendor 폴더에 포함되어 있습니다.
AOS (Animate On Scroll)는 스크롤 애니메이션을 추가하는 라이브러리입니다. AOS를 사용하면 스크롤을 할 때 요소가 부드럽게 나타나거나 사라지는 등의 다양한 애니메이션 효과를 적용할 수 있습니다. 이 플러그인은 HTML, CSS 및 JavaScript로 작성되어 있으며, 사용하기 쉽고 매우 유용합니다. AOS 플러그인을 사용하려면, 먼저 AOS 라이브러리 파일을 다운로드하고 웹 페이지에 연결해야 합니다. 그런 다음, AOS 클래스를 HTML 요소에 추가하고 원하는 애니메이션 효과를 설정합니다. 자세한 내용은 AOS 공식 문서를 참조하시기 바랍니다.
Animate CSS는 웹 페이지에서 애니메이션 효과를 쉽게 적용할 수 있는 CSS 라이브러리입니다. 이 라이브러리를 사용하면 복잡한 JavaScript 코드를 작성하지 않고도 다양한 CSS 애니메이션을 웹 요소에 적용할 수 있습니다. Animate CSS는 다양한 애니메이션 효과를 미리 정의해놓고, 이를 웹 개발자가 사용하기 쉽게 만든 것이 특징입니다.
Bootstrap 5
Bootstrap 5는 웹 개발에서 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. HTML, CSS, JavaScript를 기반으로 웹 페이지 디자인 및 레이아웃을 효율적으로 구축할 수 있도록 도와주며, 반응형 웹 디자인을 지원합니다. Bootstrap 5는 모바일 우선 접근 방식을 채택하고 있어, 다양한 기기에서 동작하는 웹 페이지를 쉽게 만들 수 있습니다. Bootstrap 5의 주요 변경 사항 및 기능은 다음과 같습니다:
- jQuery 종속성 제거: Bootstrap 5에서는 JavaScript의 독립성을 높이기 위해 jQuery를 사용하지 않습니다.
- 개선된 그리드 시스템과 유틸리티 클래스: 더 유연하고 강력한 그리드 시스템과 유틸리티 클래스를 제공합니다.
- 사용자 정의 속성(Custom Properties) 지원: CSS 사용자 정의 속성을 통해 주요 스타일을 쉽게 변경할 수 있습니다.
- 업데이트된 폼 컴포넌트: 폼 컴포넌트의 디자인과 기능이 개선되었습니다.
- SVG 아이콘 라이브러리 도입: 이전 버전의 폰트 기반 아이콘 대신, Bootstrap 5는 자체 SVG 아이콘 라이브러리를 제공합니다.
Bootstrap 5의 공식 홈페이지 주소는 다음과 같습니다:
https://getbootstrap.com/ 공식 홈페이지에서는 Bootstrap을 시작하는 방법, 문서, 예제, 그리고 커뮤니티 지원 등에 대한 정보를 찾을 수 있습니다.
Fullpage
Fullpage.js는 웹 페이지를 전체 화면 섹션으로 나누고, 사용자가 세로 방향으로 원활하게 스크롤할 수 있게 도와주는 jQuery 기반 플러그인입니다. Fullpage.js를 사용하면 각 섹션을 화면에 맞추고, 수평 또는 수직으로 원활한 전환 효과를 적용할 수 있습니다. 이 플러그인은 원페이지 웹사이트, 프레젠테이션, 스토리텔링 등 다양한 용도로 사용됩니다. Fullpage.js의 주요 기능은 다음과 같습니다:
- 전체 화면 섹션: 웹 페이지의 각 섹션을 화면 크기에 맞게 조절합니다.
- 수직 및 수평 스크롤: 사용자가 수직 또는 수평 방향으로 원활하게 스크롤할 수 있습니다.
- 반응형 디자인: 브라우저 크기에 따라 자동으로 조절되며, 모바일 기기에서도 원활하게 작동합니다.
- 인터랙티브 애니메이션: 각 섹션 간 전환 시 원하는 애니메이션 효과를 적용할 수 있습니다.
- 확장 가능성: 플러그인과 호환되는 다양한 확장 기능을 사용하여 추가 기능을 제공합니다.
Fullpage.js의 공식 홈페이지 주소는 다음과 같습니다:
https://alvarotrigo.com/fullPage/ 공식 홈페이지에서는 Fullpage.js의 사용 방법, 라이센스 정보, 문서, 예제 및 다운로드 링크 등을 확인할 수 있습니다. 그러나 Fullpage.js는 jQuery 기반 플러그인이므로 작업을 시작하기 전에 jQuery를 프로젝트에 추가해야 합니다.
hoverdir
Hoverdir은 jQuery 기반 플러그인으로, 마우스 호버 시 이미지나 요소에 따라 방향을 인식하는 효과를 제공합니다. 이 플러그인을 사용하면 웹 페이지에 있는 요소에 대해 마우스를 올리면 해당 요소의 방향을 인식하고, 콘텐츠를 그에 맞게 보여줄 수 있습니다. 이러한 효과는 이미지 갤러리, 포트폴리오 사이트 등에서 특히 인기 있습니다. Hoverdir 플러그인의 주요 특징은 다음과 같습니다:
- 방향 인식: 요소에 마우스를 올리면 요소의 방향을 인식하고 해당 방향으로 효과를 적용합니다.
- 호버 효과: 요소에 마우스를 올리면 방향에 따라 표시되는 정보를 변경할 수 있습니다.
- 사용자 정의 옵션: 개발자가 원하는 대로 효과의 지속 시간, 애니메이션 속도 등을 설정할 수 있습니다.
- 플러그인 호환성: jQuery 기반 플러그인으로, 다양한 웹 개발 프로젝트에 적용할 수 있습니다.
Hoverdir 플러그인의 공식 GitHub 저장소 주소는 다음과 같습니다:
https://github.com/codrops/HoverDir 케이테마에서는 게시판 갤러리에 해당 플러그인을 사용하고 있습니다. 케이보드 갤러리 15게시판 스킨에 사용되고 있으며 주소는 다음과 같습니다. https://devktheme.mycafe24.com/bbsskins/%ea%b0%a4%eb%9f%ac%eb%a6%ac-15-thumbnail-type15/
Cool icons
“Coolicons”는 다양한 디자인 스타일의 아이콘을 제공하는 무료 아이콘 라이브러리입니다. 이 라이브러리는 SVG 형식의 아이콘을 포함하며, 다양한 크기와 색상으로 사용할 수 있습니다. 또한 “Coolicons”는 개발자와 디자이너가 자신의 프로젝트에 사용하기 쉽도록 각 아이콘을 코드로 복사하여 붙여넣을 수 있는 기능을 제공합니다. 케이테마는 부트스트랩 공식 아이콘과 cool icons라이브러리를 함께 사용하고 있습니다. “Coolicons”의 주소는 다음과 같습니다:
https://coolicons.cool/LightGallery
“LightGallery”는 모바일 및 데스크톱에서 작동하는 반응형 이미지 및 동영상 갤러리 라이브러리입니다. “LightGallery”는 이미지 및 동영상에 대한 다양한 기능을 제공합니다. 예를 들어, 이미지를 빠르게 확대 및 축소할 수 있으며, 슬라이드쇼 모드로 전환할 수도 있습니다. 또한 이미지 및 동영상에 대한 캡션, 태그, 링크 등의 정보를 제공할 수 있습니다. “LightGallery”는 jQuery, Angular, React 및 Vue.js와 같은 다양한 프레임워크와 호환됩니다.케이테마에서는 갤러리 게시판에 적용되어 사용되고 있습니다. 게시판 뿐 아니라 페이지의 각 디자인요소에도 사용될 수 있으므로 페이지 제작 시 활용할 수 있습니다. https://devktheme.mycafe24.com/%eb%94%94%ec%9e%90%ec%9d%b8%ec%9a%94%ec%86%8c/%eb%9d%bc%ec%9d%b4%ed%8a%b8%eb%b0%95%ec%8a%a4-lightbox/ “LightGallery”의 주소는 다음과 같습니다:
https://www.lightgalleryjs.com/modernizr
“Modernizr”는 HTML, CSS 및 JavaScript 기능의 지원 여부를 감지하는 라이브러리입니다. 이 라이브러리는 브라우저의 지원 범위를 확인하고, 지원되지 않는 기능을 대체하는 방법을 제공하여 웹 개발자가 모든 브라우저에서 일관된 경험을 제공할 수 있도록 도와줍니다. “Modernizr”는 플러그인을 사용하지 않으며, 단순한 자바스크립트 파일을 제공합니다. 이 파일은 브라우저가 해당 기능을 지원하는지 여부를 확인하고, 결과를 HTML 요소의 클래스에 추가합니다. 개발자는 이러한 클래스를 사용하여 CSS 스타일을 변경하거나 JavaScript 코드를 실행할 수 있습니다. “Modernizr”의 주소는 다음과 같습니다:
https://modernizr.com/slick slider
케이테마는 외부슬라이더를 지원하지만 내부적으로는 “Slick Slider”를 통합하고 있습니다. “Slick Slider”는 반응형 이미지 및 동영상 슬라이드쇼를 제공하는 jQuery 플러그인입니다. 이 플러그인은 사용하기 쉽고 매우 유연하며, 커스터마이즈할 수 있는 다양한 옵션을 제공합니다. “Slick Slider”는 다양한 슬라이드쇼 기능을 제공합니다. 예를 들어, 자동 재생, 무한 루프, 드래그 및 스와이프 기능, 다양한 전환 효과, 캐러셀 모드 등이 포함됩니다. 또한 사용자 지정 이벤트 및 콜백 함수를 지원하여 개발자가 슬라이드쇼의 동작을 더욱 세밀하게 제어할 수 있습니다. “Slick Slider”는 다양한 프로젝트에서 사용할 수 있으며, 이미지 및 동영상 캐러셀, 제품 슬라이더, 브랜드 로고 슬라이더 등에 적합합니다. 또한 “Slick Slider”는 다양한 브라우저와 기기에서 작동하며, 반응형 디자인을 지원하여 모바일 및 데스크톱에서 동작할 수 있습니다. “Slick Slider”의 주소는 다음과 같습니다:
https://kenwheeler.github.io/slick/owl.carousel
“Owl Carousel”는 가장 많은홈페이지에서 사용하는 플러그인 중 하나입니다. “Owl Carousel”은 반응형 이미지 및 동영상 슬라이드쇼를 제공하는 jQuery 플러그인입니다. “Owl Carousel”은 매우 유연하며 다양한 기능을 제공하여 사용자가 슬라이드쇼를 맞춤화할 수 있도록 도와줍니다. “Owl Carousel”은 다양한 슬라이드쇼 기능을 제공합니다. 예를 들어, 자동 재생, 무한 루프, 드래그 및 스와이프 기능, 다양한 전환 효과, 캐러셀 모드 등이 포함됩니다. 또한 슬라이드쇼의 크기 및 레이아웃을 조정하고, 사용자 정의 이벤트 및 콜백 함수를 사용하여 동작을 세밀하게 제어할 수 있습니다. “Owl Carousel”은 다양한 프로젝트에서 사용할 수 있으며, 이미지 및 동영상 캐러셀, 제품 슬라이더, 브랜드 로고 슬라이더 등에 적합합니다. 또한 “Owl Carousel”은 다양한 브라우저와 기기에서 작동하며, 반응형 디자인을 지원하여 모바일 및 데스크톱에서 동작할 수 있습니다. “Owl Carousel”의 주소는 다음과 같습니다:
https://owlcarousel2.github.io/OwlCarousel2/ 케이테마는 위 플러그인을 기반으로 운영되고 있습니다. 별도의 사이트개발이나 디자인 변경시 참고하시기 바랍니다. 각 플러그인은 테마업데이트와 함께 지속적으로 업데이트 됩니다.
