clip-path·clamp·IR 유틸,
미리 보고 바로 복붙.

clip-path polygon/inset/circle/ellipse 좌표 편집, clamp() 반응형 값 계산, IR 숨김 텍스트 접근성 레시피와 자주 쓰는 CSS 유틸 스니펫까지 미리 보고 코드로 복사하세요.

clip-path 만들기그라디언트·패턴 도구
Layout quick start

처음이면 이렇게 시작하세요

  1. 형태·값 고르기clip-path 프리셋과 clamp() 속성, IR 레시피에서 상황에 맞는 항목을 고릅니다.
  2. 좌표와 범위 조정polygon 좌표, viewport 범위, 최소·최대 크기를 미리보기와 함께 조정합니다.
  3. 필요한 코드 복사clip-path, clamp(), IR 접근성 코드와 유틸 스니펫을 각각 복사합니다.
Clip Path

clip-path 생성기

polygon, inset, circle, ellipse 프리셋을 고르고 좌표를 조정한 뒤 CSS와 HTML을 바로 복사하세요.

사선 섹션섹션 배경, 히어로 하단
1
2
3
4
clip-path
애니메이션으로 전환하려면 시작/끝 polygon을 같은 점 개수로 맞추세요.
CSS
.diagonal_section {
  clip-path: polygon(0% 0%, 100% 0%, 100% 84%, 0% 100%);
}
HTML
<div class="diagonal_section">
  clip-path preview
</div>
Fluid CSS

clamp() 반응형 값 생성기

viewport 범위와 최소·최대 크기를 넣으면 font-size, line-height, margin, padding, gap용 clamp()를 계산합니다.

Fluid preview뷰포트에 맞춰 타입, 여백, 간격이 부드럽게 변합니다.
font-size CSS
.fluid_title {
  font-size: clamp(1.5rem, calc(0.5rem + 4.4444vw), 4.5rem);
}
A11y CSS

IR/접근성 레시피 생성기

보이지 않는 텍스트, 로고 링크, 아이콘 버튼처럼 자주 쓰는 IR 패턴을 접근 가능한 이름이 유지되는 코드로 복사하세요.

보이는 UI와 읽히는 이름을 분리

화면에는 아이콘만 보여도 버튼 이름은 텍스트로 남깁니다.

보이지 않지만 읽히는 텍스트

아이콘 버튼, 보조 설명, 폼 보조 텍스트처럼 화면에는 숨기고 접근 가능한 이름은 유지할 때 씁니다.

  • 숨길 대상이 포커스를 받는 요소라면 focus 때 다시 보이게 만드세요.
  • 의미 있는 텍스트를 display:none으로 숨기면 보조기술에서도 사라집니다.
HTML
<button type="button" class="icon_button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <!-- icon path -->
  </svg>
  <span class="visually_hidden">검색 열기</span>
</button>
CSS
.visually_hidden:not(:focus):not(:active),
.sr_only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}
피할 예
.visually_hidden {
  display: none;
}
clip-path blob

이미지/섹션을 비정형 유기체 형태로 자를 때

.visual_blob {
  clip-path: polygon(12% 6%, 86% 10%, 96% 48%, 72% 92%, 18% 84%, 4% 42%);
}
clip-path ticket

쿠폰/배너 양쪽이 파인 티켓 형태

.ticket_shape {
  clip-path: polygon(
    0 0, 100% 0, 100% 38%, 94% 50%, 100% 62%,
    100% 100%, 0 100%, 0 62%, 6% 50%, 0 38%
  );
}
clamp() 타입

모바일부터 데스크톱까지 자연스럽게 커지는 제목

.section_title {
  font-size: clamp(2rem, 5vw, 5.25rem);
  line-height: 1.05;
}
fluid spacing

vw 기반 간격을 최소/최대값 안에 묶을 때

.section_block {
  padding-block: clamp(48px, 8vw, 120px);
  gap: clamp(16px, 3vw, 40px);
}
fluid grid

카드 폭을 clamp로 제한하면서 자동 줄바꿈

.card_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(220px, 28vw, 320px)), 1fr));
  gap: clamp(16px, 2vw, 28px);
}
IR 숨김 텍스트

아이콘 버튼에 스크린리더용 텍스트를 남길 때

.ir_text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
IR focusable

건너뛰기 링크처럼 포커스 때만 보이는 텍스트

.skip_link {
  position: absolute;
  left: 16px;
  top: 16px;
  transform: translateY(-140%);
}

.skip_link:focus-visible {
  transform: translateY(0);
}
다른 CSS 도구
그라디언트·패턴컬러·OKLCH
레이아웃·유틸 작업 기준 더 보기

clip-path는 어디에 쓰면 좋나요?

섹션 사선 컷, 웨이브 분리, 티켓 카드, 말풍선 꼬리처럼 이미지 파일 없이 형태를 잘라야 할 때 유용합니다. polygon은 점 좌표를 편집할 수 있고, inset, circle, ellipse는 카드와 썸네일 마스크에 바로 적용할 수 있습니다.

IR 숨김 텍스트는 왜 display:none이면 안 되나요?

아이콘 버튼, 로고 링크, 배경 이미지 버튼의 의미 텍스트를 display:none으로 숨기면 보조기술에서도 이름이 사라질 수 있습니다. visually hidden, aria-label, skip link 패턴을 상황에 맞게 쓰면 화면 디자인은 유지하면서 접근 가능한 이름과 키보드 이동 흐름을 지킬 수 있습니다.

CSS clip-path·clamp()·IR 접근성 생성기 — 레이아웃 유틸 복붙 | 복붙랩