WEB디자인이야기/WEB디자인

더미 이미지를 무료로 제공해 주는 사이트를 소개합니다.

어쩌다보니여기까지~ 2018. 7. 10. 23:21
반응형

웹사이트 개발 시 더미 이미지가 필요한 경우가 있습니다.
레이아웃을 잡는 거라 특별히 의미가 없는 이미지만 필요한 경우 어디서 구하기도 힘들고 저작권도 신경쓰이고 할때 임시로 이미지를 제공해 주는 사이트가 있습니다.
사용법도 아주 쉽게 적용이 가능 합니다. 다만 인터넷이 연결이 되어 있어야 합니다.

더미 이미지 제공

placeimg.com

placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다.

기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다.
특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다.

<img src="https://placeimg.com/가로크기/세로크기0/카테고리" />

디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 뿌려줍니다.

아래의 카테고리와 필터 지정에 따라서 해당 이미지를 랜덤하게 뿌려줍니다.

  • 카테고리종류 : animals, arch, nature, people, tech
  • 필터 종류 : grayscale, sepia
<img src="https://placeimg.com/200/100/any" />
<img src="https://placeimg.com/200/100/any/grayscale" />
<img src="https://placeimg.com/200/100/animals/sepia" />

텍스트 이미지영역 제공

Placehold.it

Placehold.it은 매우 간단하게 이미지영역을 잡아주고 글자를 보여줍니다.

기본 사용법은 아래와 같습니다.

<img src="http://placehold.it/320x100" />
<img src="http://placehold.it/100" />

4가지의 옵션을 추가로 지정할 수 있습니다.

  • Size : 이미지의 가로x세로 사이즈 지정
  • Format : 이미지의 포멧지정 (gif, png, jpg)
  • Color : 배경컬러와 텍스트컬러를 지정
  • Text : 기본 텍스트는 이미지의 사이즈이나 사용자가 텍스트를 변경할 수 있음
<img src="http://placehold.it/320x100?text=sample" />
<img src="http://placehold.it/320x100.png?text=sample" />
<img src="http://placehold.it/320x100.png/E8117F/ffffff" />
<img src="http://placehold.it/320x100.png/E8117F/ffffff?text=sample" />

ipsumimage.appspot.com

ipsumimage.appspot.com도 위의 Placehold.it과 거의 흡사한 기능을 제공합니다.
다만 사용법이 약간 다른 정도 입니다.

기본사용법은 아래와 같습니다.

<img src="http://ipsumimage.appspot.com/가로크기x세로크기" />

4가지의 옵션을 추가로 지정할 수 있습니다.

  • Size : 이미지으 가로x세로 사이즈 지정
  • Format : 이미지의 포멧지정 (gif, png, jpg)
  • Color : 배경컬러와 텍스트컬러를 지정
  • Text : 기본 텍스트는 이미지의 사이즈이나 사용자가 텍스트를 변경할 수 있음
  • f : 폰트의 색상 지정
  • s : 폰트의 크기 지정
<img src="http://ipsumimage.appspot.com/320x100" />
<img src="http://ipsumimage.appspot.com/320x100.png" />
<img src="http://ipsumimage.appspot.com/320x100.png,ff7700" />
<img src="http://ipsumimage.appspot.com/320x100.png,ff7700" />
<img src="http://ipsumimage.appspot.com/320x100,ff7700?l=Ipsum+Image|Hosted+on+GAE" />
<img src="http://ipsumimage.appspot.com/320x100?l=Ipsum+Image|Hosted+on+GAE&s=30" />
<img src="http://ipsumimage.appspot.com/320x100?l=Ipsum+Image|Hosted+on+GAE&s=30&f=ff7700" />