Pattern

분할 패널

가운데 거터를 끌어 두 영역의 크기를 조절합니다. 더블클릭하면 50%로 리셋되고, 거터에 포커스 후 화살표·Home·End 키로도 됩니다.

가로 분할좌 58% · 우 42%

editor

Header.tsx
Hero.tsx
PricingTable.tsx
Footer.tsx
globals.css

1export function Header() {
2  return (
3    <header className="sticky top-0">
4      <nav className="flex gap-6">
5        <Logo />
6        <Menu items={NAV} />
7      </nav>
8    </header>
9  );
10}

preview42%

시작하기

좁아지면 패널이 자연스럽게 스크롤됩니다