디자인 아틀라스
EN
▞ 패턴·텍스타일

깅엄

Gingham

한 가지 색과 흰색 줄무늬가 직각으로 겹쳐, 겹치는 자리마다 더 짙은 세 번째 톤이 저절로 생기는 체크.

다른 이름: 비시 체크Vichy check체크무늬
···
html
<div class="gh"></div><span class="tag">gingham</span>
css
.gh{position:absolute;inset:0;background-color:#fff;
  background-image:
    repeating-linear-gradient(90deg,rgba(60,110,168,.55) 0 10px,transparent 10px 20px),
    repeating-linear-gradient(0deg,rgba(60,110,168,.55) 0 10px,transparent 10px 20px);
  background-size:20px 20px;
  animation:pan 9s linear infinite}
@keyframes pan{to{background-position:20px 20px}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(30,55,88,.82);
  color:#fff;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

말레이어 "genggang"(줄무늬 있는)에서 네덜란드어를 거쳐 유럽에 들어온 이름으로, 처음엔 줄무늬 천을 가리켰다가 17세기 이후 유럽에서 체크 직물로 의미가 굳어졌습니다. 프랑스에서는 지명을 딴 "비시 체크"로도 불립니다.

핵심 구조는 색이 아니라 "짜임"에 있습니다 — 같은 굵기의 색 줄과 흰 줄을 세로·가로로 촘촘히 엮으면, 색 줄만 있는 곳(중간 톤), 흰 줄만 있는 곳(가장 밝음), 색 줄과 색 줄이 겹치는 곳(가장 짙음) 이렇게 세 가지 톤이 저절로 생깁니다. 인쇄된 단순 사각 체크와 달리, 진짜 깅엄은 언제나 이 3단 톤을 갖습니다.

CSS 로는 반투명(알파 50%대) 색 줄무늬를 가로·세로 두 겹으로 겹치기만 하면 됩니다 — 흰 바탕 위에 반투명 레이어 두 장이 겹치는 지점은 알파가 두 배로 쌓여 자동으로 더 짙어지므로, 혼합 모드 없이도 3단 톤이 그대로 재현됩니다.

언제 쓰나

피크닉·컨트리 무드, 원피스·셔츠 텍스처, 브런치/베이커리 브랜딩에 씁니다. 줄 간격이 좁을수록 원거리에서 회색으로 뭉쳐 보이니 주의하세요.