# 57개의 Shortcodes 및 요소

URL: https://canvaswp.com/ko/templates/shortcodes/
Updated: 2026-11-03

템플릿

Canvas에 포함된 모든 콘텐츠 요소를 각각 별도 페이지에 정리했습니다. 각 요소의 모든 변형을 함께 배치해 빌드 전에 옵션을 미리 볼 수 있습니다.

[라이브 쇼케이스 열기](https://demos.canvaswp.com/classic/) [데모 웹사이트 둘러보기](https://canvaswp.com/ko/demos/)

최종 업데이트 2026년 11월 3일

- [애니메이션 (새 탭에서 열림)](https://demos.canvaswp.com/classic/animations/)
- [버튼 (새 탭에서 열림)](https://demos.canvaswp.com/classic/buttons/)
- [캐러셀 (새 탭에서 열림)](https://demos.canvaswp.com/classic/carousel/)
- [클라이언트 (새 탭에서 열림)](https://demos.canvaswp.com/classic/clients/)
- [컬럼 (새 탭에서 열림)](https://demos.canvaswp.com/classic/columns-grids/)
- [카운터 (새 탭에서 열림)](https://demos.canvaswp.com/classic/counters/)
- [더 읽기 (새 탭에서 열림)](https://demos.canvaswp.com/classic/read-more/)
- [Ticker (새 탭에서 열림)](https://demos.canvaswp.com/classic/ticker/)
- [장바구니 수량 (새 탭에서 열림)](https://demos.canvaswp.com/classic/cart-quantity/)
- [패럴랙스 요소 (새 탭에서 열림)](https://demos.canvaswp.com/classic/parallax-elements/)
- [구분선 (새 탭에서 열림)](https://demos.canvaswp.com/classic/dividers/)
- [아이콘 박스 (새 탭에서 열림)](https://demos.canvaswp.com/classic/featured-boxes/)
- [갤러리 (새 탭에서 열림)](https://demos.canvaswp.com/classic/gallery/)
- [제목 스타일 (새 탭에서 열림)](https://demos.canvaswp.com/classic/headings-dropcaps/)
- [아이콘 목록 (새 탭에서 열림)](https://demos.canvaswp.com/classic/icon-lists/)
- [그라디언트 (새 탭에서 열림)](https://demos.canvaswp.com/classic/gradients/)
- [라이트박스 (새 탭에서 열림)](https://demos.canvaswp.com/classic/lightbox/)
- [항목 오버레이 (새 탭에서 열림)](https://demos.canvaswp.com/classic/item-overlays/)
- [양식 요소 (새 탭에서 열림)](https://demos.canvaswp.com/classic/form-elements/)
- [파일 업로드 (새 탭에서 열림)](https://demos.canvaswp.com/classic/component-uploads/)
- [Circle Stack (새 탭에서 열림)](https://demos.canvaswp.com/classic/circle-stack/)
- [Video Facade (새 탭에서 열림)](https://demos.canvaswp.com/classic/video-facade/)
- [스크롤 요소 (새 탭에서 열림)](https://demos.canvaswp.com/classic/scroll-elements/)
- [Lists & Cards (새 탭에서 열림)](https://demos.canvaswp.com/classic/lists-cards/)
- [지도 (새 탭에서 열림)](https://demos.canvaswp.com/classic/maps/)
- [미디어 임베드 (새 탭에서 열림)](https://demos.canvaswp.com/classic/media-embeds/)
- [모달 박스 (새 탭에서 열림)](https://demos.canvaswp.com/classic/modal-popovers/)
- [알림 (새 탭에서 열림)](https://demos.canvaswp.com/classic/notifications/)
- [Pagination (새 탭에서 열림)](https://demos.canvaswp.com/classic/pagination-progress/)
- [진행 상황 & 기술 (새 탭에서 열림)](https://demos.canvaswp.com/classic/progress-skills/)
- [Shape Dividers (새 탭에서 열림)](https://demos.canvaswp.com/classic/shape-dividers/)
- [Cascading Images (새 탭에서 열림)](https://demos.canvaswp.com/classic/cascading-images/)
- [코드 하이라이터 (새 탭에서 열림)](https://demos.canvaswp.com/classic/code-highlighter/)
- [미디어 작업 (새 탭에서 열림)](https://demos.canvaswp.com/classic/media-actions/)
- [가격 박스 (새 탭에서 열림)](https://demos.canvaswp.com/classic/pricing/)
- [Process Steps (새 탭에서 열림)](https://demos.canvaswp.com/classic/process-steps/)
- [프로모 박스 (새 탭에서 열림)](https://demos.canvaswp.com/classic/promo-boxes/)
- [인용구 (새 탭에서 열림)](https://demos.canvaswp.com/classic/quotes-blockquotes/)
- [이미지 슬라이더 (새 탭에서 열림)](https://demos.canvaswp.com/classic/image-sliders/)
- [섹션 (새 탭에서 열림)](https://demos.canvaswp.com/classic/sections/)
- [Social Icons (새 탭에서 열림)](https://demos.canvaswp.com/classic/social-icons/)
- [호버 애니메이션 (새 탭에서 열림)](https://demos.canvaswp.com/classic/hover-animations/)
- [AJAX Button (새 탭에서 열림)](https://demos.canvaswp.com/classic/ajax-button/)
- [조건부 폼 (새 탭에서 열림)](https://demos.canvaswp.com/classic/conditional/)
- [프리로더 (새 탭에서 열림)](https://demos.canvaswp.com/classic/preloaders/)
- [알림 상자 (새 탭에서 열림)](https://demos.canvaswp.com/classic/style-boxes/)
- [스타일 아이콘 (새 탭에서 열림)](https://demos.canvaswp.com/classic/styled-icons/)
- [테이블 (새 탭에서 열림)](https://demos.canvaswp.com/classic/tables/)
- [탭 (새 탭에서 열림)](https://demos.canvaswp.com/classic/tabs/)
- [고객 후기 (새 탭에서 열림)](https://demos.canvaswp.com/classic/testimonials-twitter/)
- [썸네일 (새 탭에서 열림)](https://demos.canvaswp.com/classic/thumbnails-slider/)
- [토글 (새 탭에서 열림)](https://demos.canvaswp.com/classic/toggles-accordions/)
- [지연 로딩 (새 탭에서 열림)](https://demos.canvaswp.com/classic/lazy-loading/)
- [Flip Cards (새 탭에서 열림)](https://demos.canvaswp.com/classic/flip-cards/)
- [모드 전환 (새 탭에서 열림)](https://demos.canvaswp.com/classic/color-mode-switcher/)
- [커스텀 커서 (새 탭에서 열림)](https://demos.canvaswp.com/classic/custom-cursor/)
- [Image Compare (새 탭에서 열림)](https://demos.canvaswp.com/classic/image-compare/)

모든 링크는 실시간 쇼케이스의 실제 페이지를 열며, 여러분이 설치하는 것과 같은 테마와 블록으로 만들어져 있습니다.

어떤 블록

## 각 요소를 구성하는 블록

요소 페이지마다 하나 이상의 Canvas 블록과 그 변형을 나란히 보여 줍니다. 원하는 요소를 찾아 그 아래에 표시된 블록을 삽입하면, 변형은 블록 패널의 설정에서 바꿀 수 있습니다.

- **버튼**
   Button, Page Title Buttons
- **캐러셀**
   Carousel, Product Carousel
- **클라이언트**
   클라이언트
- **컬럼**
   Column, Row
- **카운터**
   Countdown, Counter
- **더 읽기**
   더 읽기
- **Ticker**
   Ticker
- **장바구니 수량**
   Quantity Input
- **패럴랙스 요소**
   Parallax Image
- **구분선**
   Divider
- **아이콘 박스**
   Icon Box
- **갤러리**
   Gallery
- **제목 스타일**
   Dropcap, Heading, Text Rotator
- **아이콘 목록**
   Icon List
- **항목 오버레이**
   Overlay Content, Overlay Item
- **양식 요소**
   Form Field
- **Circle Stack**
   Circle Stack
- **Lists & Cards**
   Link Tiles, Lists & Cards
- **지도**
   Map
- **미디어 임베드**
   Media Embed
- **모달 박스**
   Modal
- **알림**
   알림
- **Pagination**
   Pagination
- **진행 상황 & 기술**
   Progress Bar
- **Shape Dividers**
   Plain Image, Shape Divider
- **Cascading Images**
   Cascading Images
- **코드 하이라이터**
   Code Highlight
- **미디어 작업**
   Background Video / Audio
- **가격 박스**
   Inline SVG, Pricing Switcher, Pricing Table
- **Process Steps**
   Process Steps
- **프로모 박스**
   Promo Box
- **인용구**
   인용구
- **이미지 슬라이더**
   Image Slider
- **섹션**
   Hero, Wrapper
- **Social Icons**
   Social Icons
- **AJAX Button**
   AJAX Button
- **프리로더**
   Preloader
- **알림 상자**
   Alert
- **스타일 아이콘**
   Styled Icon
- **탭**
   탭
- **고객 후기**
   고객 후기
- **토글**
   Accordion, Toggle
- **Flip Cards**
   Flip Card
- **Image Compare**
   Image Compare

공유 설정

## 모든 요소에 함께 적용되는 기능

### 고급 패널

Canvas는 사이트의 모든 블록 유형에 코어 블록과 다른 플러그인의 블록까지 포함해 동일한 고급 패널을 추가합니다. 이 패널에서 등장 및 퇴장 애니메이션, 해당 블록에만 적용되는 커스텀 CSS, 사용자 역할이나 기기에 따른 커스텀 속성과 표시 조건을 설정할 수 있습니다. 애니메이션 페이지는 이 패널이 실제로 작동하는 모습입니다.

### 기본값과 전역 스타일

브랜드에 맞게 버튼을 설정하고 그 설정을 기본값으로 저장하면, 다음에 삽입하는 버튼이 그 설정으로 시작합니다. 전역 스타일은 사이트 전체에 적용하고 나중에 한 곳에서 바꿀 수 있는 설정 묶음의 이름입니다.

### 무료와 프리미엄, 동일한 플랜

Canvas 블록 314개 중 228개는 무료이고 86개는 프리미엄입니다. 모든 플랜에 블록이 전부 포함되므로, 이 페이지의 요소를 쓰기 위해 업그레이드할 필요가 없습니다.

- [전체 블록 라이브러리](https://canvaswp.com/ko/blocks/)

### 메뉴에 ‘Shortcodes’로 표시되는 이유

이 쇼케이스는 이 페이지들이 본떠 만든 템플릿인 Canvas HTML의 메뉴 이름을 그대로 유지합니다. 요소별 페이지를 가리키는 메뉴 이름이 Shortcodes이므로, HTML 템플릿으로 작업해 본 분이라면 원하는 페이지를 익숙한 위치에서 바로 찾을 수 있습니다. Canvas for WordPress에서는 이들 중 어느 것도 숏코드가 아닙니다. 각 요소는 등록된 블록이며, 옵션은 사이드바에서 설정하고 표준 블록 마크업으로 저장됩니다. 대괄호 태그를 기억할 필요가 없습니다.

- [Canvas HTML에서 이전되는 내용](https://canvaswp.com/ko/canvas-html-to-wordpress/)

더 많은 템플릿

## 라이브러리의 나머지

- [페이지 템플릿 13](https://canvaswp.com/ko/templates/page-templates/)
- [포트폴리오 레이아웃 27](https://canvaswp.com/ko/templates/portfolio/)
- [블로그 레이아웃 35](https://canvaswp.com/ko/templates/blog/)
- [쇼핑몰 레이아웃 9](https://canvaswp.com/ko/templates/shop/)