핀처럼 가는 세로줄이 규칙적으로 이어지는, 패턴 중 가장 단순한 축에 속하는 줄무늬.
디자인 아틀라스<div class="ps"></div><span class="tag">pinstripe</span>.ps{position:absolute;inset:0;background-color:#1c2536;
background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 1px,transparent 1px 14px);
animation:pan 6s linear infinite}
@keyframes pan{to{background-position:14px 0}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.14);
color:#fff;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}줄 하나가 핀처럼 가늘다는 데서 이름이 왔습니다. 19세기 영국 금융가의 정장 문화에서 자리 잡아 은행원·법조인의 복장과 강하게 연결됐고, 굵은 초크 줄무늬(chalk stripe)와는 굵기로 구분됩니다.
구조는 패턴 중 가장 단순합니다 — 한 방향(대개 세로)으로 같은 간격·굵기의 얇은 선이 이어질 뿐, 교차나 어긋남이 없습니다. 그래서 줄 색과 바탕색의 대비를 낮게 두는 경우가 많습니다 — 너무 선명하면 "줄무늬"보다 "잔상"처럼 보이기 때문입니다.
CSS 로는 repeating-linear-gradient 한 겹이면 끝입니다: 불투명 구간 1px, 투명 구간 나머지로 잘라 세로로 반복하면 됩니다. 패턴 카테고리 안에서 가장 적은 코드로 만들 수 있는 무늬입니다.
비즈니스/포멀 텍스처, 은은한 UI 구분선 배경에 씁니다. 화면 해상도가 낮으면 줄이 겹쳐 무아레가 생기니 최소 1.5px 이상 간격을 두세요.