07영상 후기 썸네일 그리드
재생 표시가 얹힌 썸네일 넉 장이 나란히 서다가, 고른 한 장이 옆 칸을 밀어내며 넓어지고 이름과 한마디가 그 안에서 펼쳐집니다.
쓰임영상 인터뷰가 있는 후기 섹션 · 사용 후기 모음
grid-template-columnsaria-expandedclip-path
<main class="stage">
<section class="vg is-demo" aria-label="영상 후기 모음">
<div class="vg__grid">
<button class="vg__item vg__item--1" type="button" aria-expanded="false">
<span class="vg__thumb vg__thumb--a">
<span class="vg__play"><svg viewBox="0 0 256 256" width="16" height="16" aria-hidden="true" focusable="false" fill="currentColor"><path d="M228.23,134.69,84.15,222.81A8,8,0,0,1,72,216.12V39.88a8,8,0,0,1,12.15-6.69l144.08,88.12A7.82,7.82,0,0,1,228.23,134.69Z" opacity="0.2"/><path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/></svg></span>
<span class="vg__time">1:12</span>
</span>
<span class="vg__name">디자인팀 팀장</span>
<span class="vg__reveal"><span class="vg__quote">주문서 흐름이 사흘 만에 정리됐다</span></span>
</button>
<button class="vg__item vg__item--2" type="button" aria-expanded="false">
<span class="vg__thumb vg__thumb--b">
<span class="vg__play"><svg viewBox="0 0 256 256" width="16" height="16" aria-hidden="true" focusable="false" fill="currentColor"><path d="M228.23,134.69,84.15,222.81A8,8,0,0,1,72,216.12V39.88a8,8,0,0,1,12.15-6.69l144.08,88.12A7.82,7.82,0,0,1,228.23,134.69Z" opacity="0.2"/><path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/></svg></span>
<span class="vg__time">0:48</span>
</span>
<span class="vg__name">온라인 서점 대표</span>
<span class="vg__reveal"><span class="vg__quote">재고 화면을 직접 고칠 수 있게 됐다</span></span>
</button>
<button class="vg__item vg__item--3" type="button" aria-expanded="false">
<span class="vg__thumb vg__thumb--c">
<span class="vg__play"><svg viewBox="0 0 256 256" width="16" height="16" aria-hidden="true" focusable="false" fill="currentColor"><path d="M228.23,134.69,84.15,222.81A8,8,0,0,1,72,216.12V39.88a8,8,0,0,1,12.15-6.69l144.08,88.12A7.82,7.82,0,0,1,228.23,134.69Z" opacity="0.2"/><path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/></svg></span>
<span class="vg__time">2:05</span>
</span>
<span class="vg__name">학원 운영자</span>
<span class="vg__reveal"><span class="vg__quote">수업 신청이 밤에도 들어온다</span></span>
</button>
<button class="vg__item vg__item--4" type="button" aria-expanded="false">
<span class="vg__thumb vg__thumb--d">
<span class="vg__play"><svg viewBox="0 0 256 256" width="16" height="16" aria-hidden="true" focusable="false" fill="currentColor"><path d="M228.23,134.69,84.15,222.81A8,8,0,0,1,72,216.12V39.88a8,8,0,0,1,12.15-6.69l144.08,88.12A7.82,7.82,0,0,1,228.23,134.69Z" opacity="0.2"/><path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"/></svg></span>
<span class="vg__time">1:36</span>
</span>
<span class="vg__name">동네 카페 사장</span>
<span class="vg__reveal"><span class="vg__quote">예약 전화가 절반으로 줄었다</span></span>
</button>
</div>
</section>
</main>@use "../../../../site/static/demo-tokens" as *;
// 276 후기·소셜 프루프 팔레트 — 아홉 항목이 같은 값을 쓴다
$pf-ink: #1c1b22; // 앰버 무대 위 글자는 전부 이 색이다 (흰 글자는 1.44:1 이라 못 쓴다)
$pf-cream: #fbf7ef; // 카드 바탕
$pf-stone: #565062; // 크림 위 보조 글자
$pf-amber: $stage-yellow;
$pf-teal: #479089;
$pf-violet: #a49cce;
$pf-mint: #b3dad5;
$duration: $dur-loop; // 한 칸이 넓어졌다 제자리로 돌아오는 한 바퀴
$easing: $ease-spring; // 칸 폭이 벌어지는 감속
$color: $pf-amber; // 무대
@include stage($pf-amber);
.vg {
box-sizing: border-box;
width: 100%;
max-width: 432px;
}
// ── 정적 경로 먼저 ────────────────────────────────────────
// .is-demo 없이도 네 칸이 고르게 보이고, 누른 칸이 넓어진다.
// 실제 조작은 transition 이 맡는다 (루프만 아래에서 키프레임으로 같은 값을 돈다)
.vg__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: $sp-2;
transition: grid-template-columns $dur-base $easing;
}
.vg__grid.is-open-0 { grid-template-columns: 2.2fr .6fr .6fr .6fr; }
.vg__grid.is-open-1 { grid-template-columns: .6fr 2.2fr .6fr .6fr; }
.vg__grid.is-open-2 { grid-template-columns: .6fr .6fr 2.2fr .6fr; }
.vg__grid.is-open-3 { grid-template-columns: .6fr .6fr .6fr 2.2fr; }
.vg__item {
box-sizing: border-box;
min-width: 0; // fr 트랙이 내용 폭에 밀리지 않게 (자동 최소 크기 해제)
overflow: hidden;
display: grid;
// auto 트랙은 max-content 로 자라 칸 밖으로 넘친다 — 한 줄짜리 한마디가 칸을 밀어냈다 (실측)
grid-template-columns: minmax(0, 1fr);
gap: $sp-1;
padding: $sp-1;
margin: 0;
border: 2px solid $pf-ink;
border-radius: $r-card;
background: $pf-cream;
color: $pf-ink;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.vg__item:focus-visible {
outline: 3px solid $pf-teal;
outline-offset: 2px;
}
.vg__item[aria-expanded="true"] { box-shadow: $shadow-press; }
// 썸네일 — 실제 영상 대신 도형 배경. 가운데 재생 표시, 오른쪽 아래 길이
.vg__thumb {
position: relative;
display: grid;
place-items: center;
height: clamp(56px, 20vw, 96px);
border-radius: $r-sm;
overflow: hidden;
}
.vg__thumb--a { background: radial-gradient(circle at 78% 22%, rgba($pf-mint, .55), transparent 58%), linear-gradient(135deg, $pf-violet, $pf-teal); }
.vg__thumb--b { background: radial-gradient(circle at 22% 78%, rgba($pf-violet, .65), transparent 60%), linear-gradient(135deg, $pf-ink, #3b2f7a); }
.vg__thumb--c { background: radial-gradient(circle at 50% 18%, rgba($pf-cream, .45), transparent 62%), linear-gradient(135deg, $pf-teal, $pf-mint); }
.vg__thumb--d { background: radial-gradient(circle at 80% 80%, rgba($pf-teal, .8), transparent 60%), linear-gradient(135deg, $pf-ink, $pf-violet); }
.vg__play {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: $pf-cream;
color: $pf-ink;
box-shadow: $shadow-press;
}
.vg__time {
position: absolute;
right: 4px;
bottom: 4px;
padding: 0 $sp-1;
border-radius: $r-xs;
background: rgba($pf-ink, .82);
color: $pf-cream;
font-weight: 700;
font-size: 10px;
line-height: 16px;
}
.vg__name {
color: $pf-ink;
font-weight: 700;
font-size: clamp(10px, 2.6vw, 13px);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 한마디는 왼쪽부터 드러난다 — clip-path 위프
.vg__reveal {
clip-path: inset(0 100% 0 0);
transition: clip-path $dur-base $ease-out;
}
.vg__item[aria-expanded="true"] .vg__reveal { clip-path: inset(0 0 0 0); }
.vg__quote {
display: block;
color: $pf-stone;
font-weight: 500;
font-size: clamp(9px, 2.4vw, 12px);
line-height: 1.3;
white-space: nowrap;
}
// ── 자동 재생 ─────────────────────────────────────────────
// 첫 칸이 넓어지며 옆 세 칸을 밀어내고, 그 뒤에야 한마디가 왼쪽부터 드러난다.
// 위프를 폭보다 늦게 열어야 "칸은 반쯤인데 글자는 다 보이는" 중간 장면이 안 생긴다.
// animation 단축은 delay·fill-mode 를 리셋하므로 낱개 속성으로 쓴다
.vg.is-demo .vg__grid {
animation-name: vgCols;
animation-duration: $duration;
animation-timing-function: $easing;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
transition: none;
}
// clip-path 는 steps() 안에서 보간되지 않는다 — 위프는 이징 짝 애니메이션으로 따로 돈다
.vg.is-demo .vg__item--1 .vg__reveal {
animation-name: vgWipe;
animation-duration: $duration;
animation-timing-function: $ease-out;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
transition: none;
}
// 폭 변화를 **뒤로 몰고**(키프레임 안 이징) 닫힘은 길고 고르게 편다.
// poster 는 앞 장과 가장 크게 달라진 장이라, 이렇게 해야 「다 펼쳐지고 한마디까지 나온 장」이
// 대표가 된다 — 닫힘이 더 급하면 「글자는 없고 칸만 줄어드는 장」이 이긴다 (실측 2026-09-12)
@keyframes vgCols {
0%, 6% { grid-template-columns: 1fr 1fr 1fr 1fr; animation-timing-function: cubic-bezier(.7, 0, .9, .3); }
33%, 66% { grid-template-columns: 2.2fr .6fr .6fr .6fr; animation-timing-function: linear; }
90%, 100% { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
// 복귀는 90% 안에 끝낸다 — 24프레임의 마지막 장은 95.8% 지점이다
// 위프는 한 눈금 안에 끝낸다 — 24프레임 눈금은 4.1667% 간격이라, 30~54% 처럼 길게 끌면
// 한마디가 낱말 중간에서 잘린 장이 여러 장 생기고 그중 하나가 대표 이미지로 뽑힌다
// (실측 2026-09-12: 33.3% 장이 「주문서 흐름이 사」 에서 끊긴 채 poster 가 됐다).
// 0.2ms 폭이라 사실상 컷이지만 steps() 가 아니므로 clip-path 값이 정상 보간된다
@keyframes vgWipe {
0%, 33% { clip-path: inset(0 100% 0 0); }
33.01%, 66% { clip-path: inset(0 0 0 0); }
66.01%, 100% { clip-path: inset(0 100% 0 0); }
}
// 좁은 화면 — 네 칸을 유지하고 간격·재생 표시만 줄인다
@media (max-width: 340px), (max-height: 220px) {
.vg__grid { gap: $sp-1; }
.vg__item { border-width: 2px; }
.vg__play { width: 24px; height: 24px; }
.vg__play svg { width: 13px; height: 13px; }
.vg__time { font-size: 9px; line-height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
// .vg.is-demo .vg__grid (0,3,0) 를 이기려면 !important 가 필요하다
.vg__grid, .vg__reveal { animation: none !important; transition: none !important; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffd23f;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.vg {
box-sizing: border-box;
width: 100%;
max-width: 432px;
}
.vg__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 8px;
transition: grid-template-columns 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vg__grid.is-open-0 {
grid-template-columns: 2.2fr 0.6fr 0.6fr 0.6fr;
}
.vg__grid.is-open-1 {
grid-template-columns: 0.6fr 2.2fr 0.6fr 0.6fr;
}
.vg__grid.is-open-2 {
grid-template-columns: 0.6fr 0.6fr 2.2fr 0.6fr;
}
.vg__grid.is-open-3 {
grid-template-columns: 0.6fr 0.6fr 0.6fr 2.2fr;
}
.vg__item {
box-sizing: border-box;
min-width: 0;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
padding: 4px;
margin: 0;
border: 2px solid #1c1b22;
border-radius: 16px;
background: #fbf7ef;
color: #1c1b22;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.vg__item:focus-visible {
outline: 3px solid #479089;
outline-offset: 2px;
}
.vg__item[aria-expanded=true] {
box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}
.vg__thumb {
position: relative;
display: grid;
place-items: center;
height: clamp(56px, 20vw, 96px);
border-radius: 8px;
overflow: hidden;
}
.vg__thumb--a {
background: radial-gradient(circle at 78% 22%, rgba(179, 218, 213, 0.55), transparent 58%), linear-gradient(135deg, #a49cce, #479089);
}
.vg__thumb--b {
background: radial-gradient(circle at 22% 78%, rgba(164, 156, 206, 0.65), transparent 60%), linear-gradient(135deg, #1c1b22, #3b2f7a);
}
.vg__thumb--c {
background: radial-gradient(circle at 50% 18%, rgba(251, 247, 239, 0.45), transparent 62%), linear-gradient(135deg, #479089, #b3dad5);
}
.vg__thumb--d {
background: radial-gradient(circle at 80% 80%, rgba(71, 144, 137, 0.8), transparent 60%), linear-gradient(135deg, #1c1b22, #a49cce);
}
.vg__play {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fbf7ef;
color: #1c1b22;
box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}
.vg__time {
position: absolute;
right: 4px;
bottom: 4px;
padding: 0 4px;
border-radius: 4px;
background: rgba(28, 27, 34, 0.82);
color: #fbf7ef;
font-weight: 700;
font-size: 10px;
line-height: 16px;
}
.vg__name {
color: #1c1b22;
font-weight: 700;
font-size: clamp(10px, 2.6vw, 13px);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vg__reveal {
clip-path: inset(0 100% 0 0);
transition: clip-path 300ms ease-out;
}
.vg__item[aria-expanded=true] .vg__reveal {
clip-path: inset(0 0 0 0);
}
.vg__quote {
display: block;
color: #565062;
font-weight: 500;
font-size: clamp(9px, 2.4vw, 12px);
line-height: 1.3;
white-space: nowrap;
}
.vg.is-demo .vg__grid {
animation-name: vgCols;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
animation-iteration-count: infinite;
animation-fill-mode: backwards;
transition: none;
}
.vg.is-demo .vg__item--1 .vg__reveal {
animation-name: vgWipe;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
transition: none;
}
@keyframes vgCols {
0%, 6% {
grid-template-columns: 1fr 1fr 1fr 1fr;
animation-timing-function: cubic-bezier(0.7, 0, 0.9, 0.3);
}
33%, 66% {
grid-template-columns: 2.2fr 0.6fr 0.6fr 0.6fr;
animation-timing-function: linear;
}
90%, 100% {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@keyframes vgWipe {
0%, 33% {
clip-path: inset(0 100% 0 0);
}
33.01%, 66% {
clip-path: inset(0 0 0 0);
}
66.01%, 100% {
clip-path: inset(0 100% 0 0);
}
}
@media (max-width: 340px), (max-height: 220px) {
.vg__grid {
gap: 4px;
}
.vg__item {
border-width: 2px;
}
.vg__play {
width: 24px;
height: 24px;
}
.vg__play svg {
width: 13px;
height: 13px;
}
.vg__time {
font-size: 9px;
line-height: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.vg__grid, .vg__reveal {
animation: none !important;
transition: none !important;
}
}(function () {
var root = document.querySelector('.vg');
var grid = root.querySelector('.vg__grid');
var items = [].slice.call(root.querySelectorAll('.vg__item'));
function stopLoop() { root.classList.remove('is-demo'); }
// 한 칸만 열린다 — 열린 칸 번호를 격자 클래스로 옮겨 grid-template-columns 를 바꾼다
function open(i) {
stopLoop();
items.forEach(function (b, n) {
b.setAttribute('aria-expanded', n === i ? 'true' : 'false');
grid.classList.toggle('is-open-' + n, n === i);
});
}
items.forEach(function (b, i) {
b.addEventListener('click', function () {
open(b.getAttribute('aria-expanded') === 'true' ? -1 : i);
});
b.addEventListener('keydown', function (e) {
var to = -1;
if (e.key === 'ArrowRight') { to = (i + 1) % items.length; }
if (e.key === 'ArrowLeft') { to = (i - 1 + items.length) % items.length; }
if (e.key === 'Home') { to = 0; }
if (e.key === 'End') { to = items.length - 1; }
if (to < 0) { return; }
e.preventDefault();
stopLoop();
items[to].focus({ preventScroll: true });
});
});
root.addEventListener('pointerenter', stopLoop);
root.addEventListener('focusin', stopLoop);
})();import { useRef, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./VideoThumbGrid.module.scss";
/* ambient 에 KeyboardEvent 가 없어 파일 안에 필요한 만큼만 선언한다 */
type KeyEvt = { key: string; preventDefault(): void };
type Box<T> = { current: T };
export type VideoClip = {
/** 후기를 남긴 사람의 직함 한 줄 */
name: string;
/** 영상 길이 (예 "1:12") */
time: string;
/** 칸이 넓어졌을 때 드러나는 한마디 */
quote: string;
};
export type VideoThumbGridProps = {
label?: string;
clips?: VideoClip[];
/** 한 칸이 넓어졌다 제자리로 돌아오는 한 바퀴(ms) */
duration?: number;
easing?: string;
/** 무대 색 */
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
const PlayIcon = (): ReactNode => (
<svg viewBox="0 0 256 256" width="16" height="16" aria-hidden="true" focusable="false" fill="currentColor">
<path d="M228.23,134.69,84.15,222.81A8,8,0,0,1,72,216.12V39.88a8,8,0,0,1,12.15-6.69l144.08,88.12A7.82,7.82,0,0,1,228.23,134.69Z" opacity="0.2" />
<path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z" />
</svg>
);
const DEFAULT_CLIPS: VideoClip[] = [
{ name: "디자인팀 팀장", time: "1:12", quote: "주문서 흐름이 사흘 만에 정리됐다" },
{ name: "온라인 서점 대표", time: "0:48", quote: "재고 화면을 직접 고칠 수 있게 됐다" },
{ name: "학원 운영자", time: "2:05", quote: "수업 신청이 밤에도 들어온다" },
{ name: "동네 카페 사장", time: "1:36", quote: "예약 전화가 절반으로 줄었다" },
];
const THUMBS = [styles.thumbA, styles.thumbB, styles.thumbC, styles.thumbD];
const OPEN = [styles.open0, styles.open1, styles.open2, styles.open3];
export default function VideoThumbGrid({
label = "영상 후기 모음",
clips = DEFAULT_CLIPS,
duration = 2000,
easing = "cubic-bezier(.2,.8,.2,1)",
color = "#ffd23f",
}: VideoThumbGridProps): ReactNode {
const [loop, setLoop] = useState<boolean>(true);
const [open, setOpen] = useState<number>(-1);
const refs = useRef<Array<HTMLButtonElement | null>>([]) as Box<Array<HTMLButtonElement | null>>;
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
/* 한 칸만 열린다 — 열린 칸 번호가 격자의 grid-template-columns 를 바꾼다 */
const toggle = (i: number): void => {
setLoop(false);
setOpen(open === i ? -1 : i);
};
/* 좌우 화살표로 칸을 옮긴다 (Home·End 는 양 끝) */
const onKey = (e: KeyEvt, i: number): void => {
const list = refs.current;
let to = -1;
if (e.key === "ArrowRight") { to = (i + 1) % clips.length; }
if (e.key === "ArrowLeft") { to = (i - 1 + clips.length) % clips.length; }
if (e.key === "Home") { to = 0; }
if (e.key === "End") { to = clips.length - 1; }
if (to < 0) { return; }
e.preventDefault();
setLoop(false);
const next = list[to];
if (next) { next.focus({ preventScroll: true }); }
};
const gridClass = [styles.grid, open >= 0 ? OPEN[open % OPEN.length] : ""].join(" ").trim();
return (
<section
className={loop ? `${styles.vg} ${styles.isDemo}` : styles.vg}
style={vars}
aria-label={label}
onPointerEnter={() => setLoop(false)}
onFocus={() => setLoop(false)}
>
<div className={gridClass}>
{clips.map((c: VideoClip, i: number) => (
<button
className={styles.item}
key={c.name}
type="button"
aria-expanded={open === i}
ref={(el: HTMLButtonElement | null) => { refs.current[i] = el; }}
onClick={() => toggle(i)}
onKeyDown={(e: KeyEvt) => onKey(e, i)}
>
<span className={`${styles.thumb} ${THUMBS[i % THUMBS.length]}`}>
<span className={styles.play}><PlayIcon /></span>
<span className={styles.time}>{c.time}</span>
</span>
<span className={styles.name}>{c.name}</span>
<span className={styles.reveal}><span className={styles.quote}>{c.quote}</span></span>
</button>
))}
</div>
</section>
);
}07 영상 후기 썸네일 그리드 — 측정 누적면적 35.518% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 고객 후기 디자인 패턴 9종, 신뢰를 보여 주는
이 데모가 속한 글
고객 후기 디자인 패턴 9종, 신뢰를 보여 주는고객 후기 디자인은 다른 사람이 남긴 평가를 화면에 얹어, 망설이는 방문자를 마지막으로 안심시키는 섹션입니다. 아홉 가지는 후기 카드·별점·고객사 목록을 HTML 과 CSS 만으로 지어서 옮겨 붙이면 그대로 움직입니 이 글의 데모 전부 보기
