도구로 건너뛰기
JoeLucky

도구의 ★를 눌러 저장하세요

도구 카테고리

코드 이미지 변환CSS 그라디언트 생성기CSS 글래스모피즘박스 섀도 생성기CSS 로더 생성기SVG 블롭 생성기SVG를 PNG로색상 대비 검사기PX / REM / EM 변환기
JoeLucky

실용적인 온라인 도구를 한곳에서

개인정보처리방침이용약관

© 2026 JoeLucky®. 모든 권리 보유.

  1. JoeLucky
  2. /CSS·디자인
  3. /코드 이미지 변환

코드 이미지 변환

코드 조각을 보기 좋은 스크린샷으로 만들어 줍니다.

안쪽 여백40px
배경
미리보기
javascript.ts
1function greet(name) {
2 // Say hello
3 const msg = `Hello, ${name}!`
4 console.log(msg)
5 return msg
6}

비슷한 CSS·디자인

전체 보기
CSS 그라디언트 생성기

선형, 방사형, 원뿔형 그라디언트를 눈으로 보며 만들고 CSS를 바로 복사합니다.

열기 →
CSS 글래스모피즘

배경 블러와 반투명 테두리 코드를 실시간으로 만들어 줍니다.

열기 →
박스 섀도 생성기

겹겹이 부드러운 그림자를 미리보기와 함께 만들어 줍니다.

💬 댓글

?

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요!

코드 이미지 변환이(가) 무엇인가요?

코드 조각을 깔끔하고 공유하기 좋은 이미지로 바꿉니다. 언어, 테마, 창 스타일, 배경을 고르고 PNG를 내려받으세요. 슬라이드, 문서, 소셜 게시물에 바로 쓸 수 있습니다.

사용 방법

  1. 입력 영역에 코드를 붙여넣고 언어(JS/TS/Python/CSS/HTML/JSON/Bash/SQL/Rust/Go)를 고르세요. 키워드, 문자열, 주석에 자동으로 색이 입혀집니다.
  2. Dracula, One Dark, GitHub Light, Solarized, Nord, Monokai의 6가지 테마 중에서 고르세요. 각각 뚜렷한 색 개성이 있습니다.
  3. “macOS” 창 스타일을 켜면 빨강/노랑/초록 신호등 버튼이 추가되어 실감 나는 에디터 모양이 됩니다. 줄 번호는 따로 켜고 끌 수 있습니다.
  4. “여백” 슬라이더(16–80px)는 코드 블록과 배경 사이 간격을 조절합니다. 그라데이션 배경 5종이나 투명 중에서 고르세요.
  5. 미리보기가 마음에 들면 “PNG 다운로드”를 클릭해 2× 고해상도 이미지를 받으세요. Twitter, LinkedIn, 기술 글에 안성맞춤입니다. “코드 복사”는 일반 텍스트를 복사합니다.

자주 묻는 질문

어떤 프로그래밍 언어를 지원하나요?

JavaScript, TypeScript, Python, HTML, CSS, JSON, SQL, Bash, Java, Go를 구문 강조와 함께 지원합니다.

내보낸 스크린샷은 어떤 형식인가요?

2× 해상도의 PNG로, 블로그, 발표 자료, 소셜 미디어에 적합합니다.

배경과 창 스타일을 바꿀 수 있나요?

네. 여러 색상 테마, macOS/테두리 없는 스타일, 배경색/그라디언트, 줄 번호, 여백을 설정할 수 있습니다.

열기 →