CSS

CSS 코드 스크린샷 생성기

Mac을 벗어나지 않고 CSS 스니펫을 공유하고 싶은 이미지로 바꿔 보세요.

값 자체가 중요할 때 CSS는 캡처할 값어치가 있습니다. 그러데이션, 그리드 정의, 커스텀 속성 묶음 같은 것들이죠.

Codeshot은 붙여넣은 코드에서 CSS을 판별하므로 언어 선택을 잘못할 일이 없습니다. 기본 제공되는 30가지 테마 가운데 세 가지로 같은 스니펫을, 앱 자체 스타일시트로 렌더링했습니다.

:root {
  --ink: #0d0d10;
  --blue: #1769ff;
}

.snapshot {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}

Atom One · 다크

:root {
  --ink: #0d0d10;
  --blue: #1769ff;
}

.snapshot {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}

GitHub · 다크

:root {
  --ink: #0d0d10;
  --blue: #1769ff;
}

.snapshot {
  display: grid;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}

Panda Syntax · 다크

CSS에 어울리는 테마 고르기

대부분의 CSS 코드에서는 색상 값이 핵심이므로, 그것과 부딪히지 않는 테마를 고르세요. 여기서는 화려한 테마보다 중립적인 테마가 낫습니다.

크기를 제대로 맞추기

이미지를 내용에 맞추거나 비율로 고정하세요 — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3, 3:4 — 그런 다음 1×, 2×, 3× 중에서 골라 내보내면 레티나 화면에서도 또렷합니다. ⌘⇧C로 클립보드에 바로 복사하거나 ⌘S로 저장할 수 있습니다.

30가지 테마를 나란히 보기, 또는 전체 과정을 읽어 보세요.

CSS을 비롯한 60개 언어를 위해

모든 작업이 Mac에서 이루어집니다. 코드가 밖으로 나가지 않습니다.

macOS용 다운로드