고급 기능 — 대화형 API 디버거

60개 이상의 다국어 글꼴, 5000개 이상의 아이콘, 9가지 이미지 형식, 그라데이션 텍스처, 텍스트 하이라이트 — 모든 매개변수를 실시간으로 미리볼 수 있습니다

MockImg 플레이스홀더 실시간 미리보기
기본 설정
×
비율
패딩 없음—
초소형1/20
콤팩트1/10
보통1/8
여유1/6
기본1/5
매우 여유1/4
최대1/3
상하 + 좌우
짧은 텍스트1/10,1/20
배너1/4,1/20
상 / 우 / 하 / 좌
타이틀 영역40,10,5,10
좌측 내비20,10,20,60
텍스트 스타일
자동
배경 및 테두리
100%
끄기
85
아이콘 설정
자동
텍스트 하이라이트 [가이드 보기]

아이콘 시스템

Outline 및 Filled 스타일의 5000개 이상의 Tabler Icons, 크기 사용자 지정 가능

아이콘 크기 48
Tabler Icons 미리보기

문서 및 참조

완전한 API 매개변수 참조, 텍스트 하이라이트 가이드, 아이콘 전용 표시 모드

기본 문법

text 매개변수에 {{...}}를 사용하여 하이라이트할 부분을 감쌉니다. 모든 하이라이트 구간은 동일한 스타일을 공유합니다. 팁: 상단의 텍스트 내용 입력란에 {{...}}를 직접 입력할 수도 있습니다 — 시스템이 자동으로 감지하여 하이라이트를 적용합니다.

# 구문 형식
?text=일반 텍스트{{하이라이트 텍스트}}일반 텍스트 계속
&hlcolor=FF5733

매개변수 상세

hlcolor 하이라이트 색상

하이라이트 색상을 설정합니다. HEX 형식(예: FF5733) 또는 색상 이름(예: red)을 지원합니다.

예제： ?text=Mock{{Img}}.Dev&hlcolor=FF5733
hlcolor2 하이라이트 그라데이션 색상 2

그라데이션 하이라이트의 두 번째 색상을 설정합니다. 이 값을 설정하면 hlcolor을 시작 색상으로 하는 그라데이션 효과가 자동으로 활성화됩니다.

예제： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6
hlgradient 하이라이트 그라데이션 방향

그라데이션 방향을 설정합니다. 미설정 시 기본값은 horizontal입니다.

horizontal 수평 (왼쪽에서 오른쪽) vertical 수직 (위에서 아래) diagonal 대각선 (왼쪽 위에서 오른쪽 아래)
예제： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical
hlfont 하이라이트 글꼴

하이라이트 텍스트에 독립적인 글꼴을 지정합니다. 값은 글꼴 파일 이름입니다 (.ttf 확장자 제외).

예제： ?text={{Brand}}&hlfont=Poppins-Bold
hlbold 하이라이트 굵게

하이라이트 텍스트를 굵게 표시합니다. 값: true 또는 1.

예제： ?text={{Important}}&hlbold=true

전체 예제

예제 1：단색 하이라이트
https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

효과:"MockImg.Dev" — Img가 빨간색으로 표시

예제 2：그라데이션 하이라이트
https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

효과: "Gradient"가 핑크에서 보라색으로 수평 그라데이션 표시

예제 3：사용자 지정 글꼴 하이라이트
https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

효과: "MockImg"가 Poppins-Bold 폰트로 파란색 표시

예제 4：굵은 하이라이트
https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

효과: "Important"가 빨간색 굵게 표시

예제 5：결합 (그라데이션 + 글꼴 + 굵게)
https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

효과: "Premium"이 대각선 그라데이션(금색에서 빨간색)으로 Montserrat-Bold 폰트 표시

예제 6：다중 구간 하이라이트
https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

효과: "MockImg"와 플레이스홀더 텍스트가 모두 파란색 표시 (공통 하이라이트 스타일)

예제 7：CJK 텍스트 하이라이트
https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

효과: "MockImg"가 녹색으로 표시, 나머지 텍스트는 기본 색상 사용

예제 8：다크 테마 + 하이라이트
https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

효과: 다크 테마에서 "Mode"가 금색 하이라이트로 표시

참고 사항

  • {{...}} 마커는 텍스트 너비 계산에 포함되지 않으며 레이아웃에 영향을 주지 않습니다
  • 중첩된 {{...}} 마커는 지원되지 않습니다 — 내부 마커는 일반 텍스트로 처리됩니다
  • 모든 하이라이트 구간은 동일한 hl* 스타일 설정을 공유합니다
  • 하이라이트는 모든 출력 형식에서 동작합니다 (SVG, PNG, JPEG, WebP, AVIF 등)
  • 하이라이트 마커는 여러 줄 텍스트에서도 동작합니다 (줄 바꿈에 \n 사용)

트리거 조건

  • icon 매개변수 제공됨
  • text 매개변수 없음, 또는 text가 비어 있음

아이콘 크기 규칙

자동: 아이콘 크기 = 이미지 짧은 변의 80% (최소 24px, 최대 90%)

사용자 지정: iconsize 매개변수로 자동 계산 덮어쓰기

예제

단색 아이콘
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733

효과: 빨간색 하트 아이콘이 자동 확대 및 중앙 배치

그라데이션 아이콘
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal

효과: 별 아이콘에 금색에서 빨간색 대각선 그라데이션

투명 + 아이콘
https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

효과: 투명 배경 위의 사용자 아이콘 — 아바타에 완벽

그라데이션 배경 + 둥근 모서리
https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

효과: 핑크 그라데이션 배경 위의 흰색 하트 아이콘, 둥근 모서리 포함

다크 테마 + 아이콘
https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

효과: 어두운 배경 위의 금색 별 아이콘

원형 테두리 (아바타)
https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

효과: 테두리가 있는 원형 안의 사용자 아이콘 — 아바타 플레이스홀더에 이상적

아이콘+텍스트 vs 아이콘 전용

모드 URL 효과
아이콘 전용 (텍스트 없음) ?icon=outline/heart 아이콘이 자동 확대 및 중앙 배치, 텍스트 없음
아이콘 + 빈 텍스트 ?icon=outline/heart&text= 아이콘 전용과 동일
아이콘 + 텍스트 ?icon=outline/heart&text=Love 아이콘과 텍스트가 나란히 표시 (기존 동작)
아이콘 없음 텍스트 없음 600x400.png 크기 텍스트 (기본 동작)

참고 사항

  • 모든 출력 형식에서 동작합니다 (SVG, PNG, JPEG, WebP, AVIF 등)
  • 모든 아이콘 매개변수 (iconcolor, iconcolor2, icongradient, iconsize) 가 정상적으로 동작합니다
  • 모든 배경 효과 (투명, 그라데이션, 패턴, 노이즈, 테두리, 모서리 반경) 를 아이콘 전용 모드와 조합할 수 있습니다
  • 작은 크기에서도 동작 — 파비콘에 완벽: 32x32.ico?icon=filled/star&iconcolor=FFD700

개요

padding 매개변수는 플레이스홀더 이미지 내 텍스트와 아이콘 주변의 여백을 제어합니다. 4가지 형식을 지원합니다: 통일 픽셀값, 통일 비율, 2값(상하+좌우), 4값(CSS 시계방향).

# 지원 형식
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

기본 동작

padding 매개변수를 생략하면 기본 여백이 사용됩니다 (이전 버전과 동일):

좌우: 이미지 너비의 5% 상하: 이미지 높이의 20%

형식 상세

20 통일 픽셀값

네 면 모두 동일한 픽셀값을 사용합니다.

padding=20
1/6 통일 비율값

네 면 모두 비율을 사용합니다.상하는 이미지 높이, 좌우는 이미지 너비를 기준으로 합니다. 결과는 자동 반올림됩니다.

padding=1/6  →  600×400 → 상하 67px, 좌우 100px
10,20 2값 (상하 + 좌우)

수직 및 수평 여백을 개별 제어합니다. 픽셀과 비율을 혼합할 수 있습니다.

padding=10,20  →  상하 각 10px, 좌우 각 20px
padding=1/8,15  →  상하 = 높이/8, 좌우 각 15px
padding=30,1/10  →  상하 각 30px, 좌우 = 너비/10
10,20,30,40 4값 (CSS 시계방향)

CSS 스타일의 독립 제어: 상, 우, 하, 좌. 상하는 높이, 좌우는 너비를 기준으로 합니다. 픽셀과 비율 혼합 가능.

padding=10,20,30,40  →  상10 우20 하30 좌40 (모두 픽셀)
padding=1/8,1/6,15,1/10  →  상 h/8 우 w/6 하 15px 좌 w/10 (혼합)

사용 예

짧은 텍스트 — 여백 줄이기
https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

"IP" 같은 짧은 텍스트에 padding=1/10 사용하여 컴팩트하게.

여백 없음
https://mockimg.dev/600x400.svg?text=Full&padding=0

padding=0으로 콘텐츠를 이미지 전체에 채웁니다.

아이콘 + 텍스트 — 컴팩트 레이아웃
https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

아이콘과 텍스트를 나란히 표시, 적당한 여백.

타이틀 영역 — 상단 여백 크게
https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

상단 여백을 크게 하여 타이틀 영역 느낌을 연출, 하단은 컴팩트.

좌측 내비 — 좌측 여백 크게
https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

좌측 여백을 크게 하여 내비게이션 바에 대응.

참고 사항

  • 비율값의 분자와 분모는 양수여야 합니다
  • 픽셀값은 음수일 수 없으며, 음수는 자동으로 0으로 수정됩니다
  • 비율 계산 결과는 자동으로 정수로 반올림됩니다
  • 패딩이 너무 크면(이미지 크기의 절반 초과) 콘텐츠 영역이 매우 작아질 수 있으며, 글꼴 크기는 자동으로 최소 12px이 됩니다