웹 프로젝트를 진행하면서 레이아웃을 구성할 때, 디자인이 완성되지 않았다면 임시 목업 이미지로 그 자리를 채우게 됩니다. GIFPNG는 목업 이미지를 손쉽게 생성하기 때문에 포토샵 같은 이미지 편집툴을 이용해서 하나하나 만들어서 사용할 필요가 없습니다.

사용법은 아주 간단합니다. 다음의 HTML 태그와 같이 URL 뒤에 원하는 이미지의 크기와 속성을 작성한 다음 태그의 속성에 지정해주면 원하는 크기의 이미지가 출력됩니다.

크기

크기는 URL의 첫 번째 옵션이어야 하며, 가로 크기 또는 세로 높이를 나타내는 값이 반드시 하나 이상 입력되어야 합니다. 세로 높이가 지정되지 않은 경우 이미지는 가로 크기에 맞추어 정사각형으로 출력됩니다.

<img src="http://gifpng.com/{가로}">
<img src="http://gifpng.com/{가로}x{세로}">

색상

색상 속성은 URL의 옵션 혹은 파라미터 값을 지원합니다. 색상은 CSS에서처럼 HEX 코드로 입력되어야 합니다. (예를 들면 #ffffff는 흰색). URL 뒤에 따라오는 첫 번째 옵션은 배경 색상이며, 두 번째 옵션은 텍스트 색상 입니다. 기본으로 설정된 배경 색상은 #cccccc, 텍스트 색상은 #666666 입니다.

<img src="http://gifpng.com/300/{배경색상}/{글자색상}">
<img src="http://gifpng.com/300/?background-color={배경색상}&color={글자색상}">

속성값을 random으로 지정하면 랜덤한 색상을 불러올 수 있습니다.

<img src="http://gifpng.com/300/random/ffffff">

예제

<img src="http://gifpng.com/300">
<img src="http://gifpng.com/300/333333/ffffff">
<img src="http://gifpng.com/random/ffffff">
<img src="http://gifpng.com/random/random">

테두리 굵기

테두리 굵기의 속성 값은 숫자로 입력되어야 합니다. 0 보다 큰 경우 출력 됩니다. 기본으로 설정된 값은 1입니다.

<img src="http://gifpng.com/300/?border-width=2">

테두리 색상

색상은 CSS에서처럼 HEX 코드로 입력되어야 합니다. 기본으로 설정된 값은 #7e7e7e입니다.

<img src="http://gifpng.com/300/?border-color=ff6600">

테두리 종류

테두리 종류에 대한 지원하는 값은 rectangle, thick 입니다. 기본으로 설정된 값은 thick입니다.

<img src="http://gifpng.com/300/?border-type=rectangle">

예제

<img src="http://gifpng.com/300/?border-width=2">
<img src="http://gifpng.com/300/333333/ffffff/?border-color=ffc000&border-width=2">
<img src="http://gifpng.com/300/?border-width=10&border-type=rectangle&border-color=555555">
<img src="http://gifpng.com/300/?border-width=0">

사용자 정의 문자열

이미지에 텍스트를 렌더링 할 경우 이 값을 지정해야 합니다. 이 값을 지정하지 않으면 다른 모든 텍스트 파라미터는 무효화 됩니다. 지원하는 문자셋은 UTF-8 문자열을 비롯하여 최대한 다양한 언어와 이모티콘에 적절한 렌더링을 지원합니다.

<img src="http://gifpng.com/300/?text={사용자텍스트}">

새줄 문자

새줄 문자(newline)는 텍스트의 한 줄이 끝남을 표시하는 문자로 개행 문자, 줄바꿈 문자(line break), EOL(end-of-line)과 같습니다. 새줄 문자는 원하는 위치에서 현재에 있는 줄을 끝내고 다음 줄에서 다시 시작할 수 있습니다. 지원하는 값은 \n, \r, \r\n 입니다.

<img src="http://gifpng.com/300/?text=안녕하세요{\n}반갑습니다">

수평 정렬

이미지에 렌더링 되는 텍스트의 가로 정렬을 설정 합니다. 지원하는 값은 left, center, right 입니다. 기본으로 설정된 값은 center입니다.

<img src="http://gifpng.com/300/?text={사용자텍스트}&text-align=center">

수직 정렬

이미지에 렌더링 되는 텍스트의 세로 정렬을 설정 합니다. 지원하는 값은 top, middle, bottom 입니다. 기본으로 설정된 값은 middle입니다.

<img src="http://gifpng.com/300/?text={사용자텍스트}&vertical-align=middle">

줄 바꿈 처리

요소안에 공백 처리를 지정하는 속성 입니다. 문자열이 긴 경우 다음 단락으로 출력할 수 있습니다. 지원하는 값은 normal, nowrap 입니다. 기본으로 설정된 값은 normal입니다.

<img src="http://gifpng.com/300/?text={사용자텍스트}&white-space=nowrap">

줄 간격

인라인 요소의 높이를 설정하는 값으로 줄 간격을 설정합니다. 바로 윗줄의 글자와 아래줄의 글자 사이의 간격을 조절하는 것으로 설정 값은 숫자로 입력되어야 합니다. 기본으로 설정된 값은 1.5입니다.

<img src="http://gifpng.com/300/?text={사용자텍스트}&line-height=2.5">

글자 크기

테두리 굵기의 속성 값은 숫자로 0 보다 큰 경우 출력 됩니다. 기본으로 설정된 값은 20입니다.

<img src="http://gifpng.com/300/?font-size=10">

예제

<img src="http://gifpng.com/300/?text=English">
<img src="http://gifpng.com/300/?text=한국어&line-height=2.5">
<img src="http://gifpng.com/300/?text=中國語&text-align=right">
<img src="http://gifpng.com/300/?text=日本語&vertical-align=bottom">

추가 속성은 사용자의 요청에 따라 추가되는 기능들로 간단한 옵션으로 제공합니다.

다운로드

일반적으로 이미지 링크를 클릭 시 브라우저에서 이미지를 렌더링하여 출력하는데, 이 속성을 지정하면 <a> 태그의 경우 클릭과 동시에 브라우저에서 이미지를 다운로드 합니다.

<a href="http://gifpng.com/300/?download">다운로드</a>