본문 바로가기
웹 코딩/그 외

placeholder - 임시 이미지 제공 서비스

by 알릭2 2020. 9. 23.

 

위 이미지는 https://via.placeholder.com/150/FFFF00/000000 로 만들었습니다.

 

테스트용 이미지가 필요하거나, 기타 웹 작업할 때, placeholder라고 하죠?

임시 이미지들을 제공하는 유용한 서비스입니다.

 

급히 텍스트를 이미지로 넣어야 할 때도 쓸 수 있습니다.

 

주소만 기억했다가 <img 의 src="" 나 배경 이미지의 url 로 맞춰 넣으면 됩니다.

 

가로x세로 크기, 배경색, 글자색, 글자, 이미지 확장자를 손쉽게 지정할 수 있습니다.

 

이용 방법은 아래와 같습니다.

 

https://via.placeholder.com/300x100/FFFF00/000000.png?text=Test+Image

 

- 가로x세로/배경색/글자색.확장자?text=텍스트(공백은+로)

 

필요 없는 옵션은 않넣으면 되기에 간단하게는 https://via.placeholder.com/150 요런 정도로도 쓸 수 있습니다.

 

사이트 메인: placeholder.com/

 

Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers

What Is Placeholder.com? Placeholder.com generates custom placeholder images on the fly, like these examples:-     How To Use Our Placeholders Just specify the image size after our URL (https://via.placeholder.com/) and you'll get a placeholder image.

placeholder.com

그 외, 테스트용 텍스트도 제공합니다. placeholder.com/text/

 

그런데, 구글에 찾아보면 유사한 서비스가 매우 많습니다.

 

www.google.com/search?newwindow=1&safe=off&rlz=1C1GCEA_enAU873AU873&ei=mfFqX5LpAtXprQHolqjgDQ&q=placeholder+image+service&oq=placeholder+image+service&gs_lcp=CgZwc3ktYWIQAzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQRzIECAAQR1AAWABgk50DaABwAXgAgAEAiAEAkgEAmAEAqgEHZ3dzLXdpesgBCMABAQ&sclient=psy-ab&ved=0ahUKEwjSmfan2f7rAhXVdCsKHWgLCtwQ4dUDCA0&uact=5

 

텍스트의 폰트 지정도 가능한 placehold.co/ 도 좋고

 

이미지의 테마를 고를 수 있는 placeimg.com/ 도 좋고

 

흑백이냐 컬러냐 선택해서 원하는 크기의 랜덤이미지를 불러 올 수 있는 lorempixel.com/ 도 좋고

 

특정 사진으로 지정할 수 있고 이미지 목록이나 이미지 상세정보를 api로 제공하는 picsum.photos/ 도 좋고

 

고양이 이미지만 필요하다면 placekitten.com/ 도 좋습니다.

댓글