[Free Image Placeholder ]샘플 이미지를 간단하게 무료로 사용하기

사이트 소개

개발 혹은 샘플 페이지 등 프로젝트 진행 시 수많은 이미지가 필요합니다

이미지가 준비되어 있어서 프로젝트의 성격에 맞는 이미지를 사용할 수 있으면 좋겠지만

이미지가 준비되지 않은 환경이거나 혹은 이미지를 정하기 전 이미지의 크기(size) 성격에 맞춰서

이미지 위치를 정하기 위해서 임시 이미지를 넣을 때가 있습니다

그럴 때마다 이미지를 찾아서 넣지 않고 지정한 경로만 입력하면

그 자리에서 바로 사용 가능한 이미지를 제공하는 사이트가 있습니다

아래 링크를 클릭하면 바로 해당 사이트로 이동 가능합니다

사이트 주소 : https://placeholder.com/

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

링크를 통해 접속하면 아래와 같은 사이트가 연결됩니다

사용법

placeholders를 사용하는 방법은 간단합니다

지정한 이미지(img) 혹은 HTML 태그의 배경 주소로 https://via.placeholder.com/를 입력합니다

그리고 / 뒤에 원하는 크기를 입력합니다 예) img 태그에 width, height 150px의 크기의 이미지가 필요한 경우 아래와 같이 입력 가능합니다

<img src="https://via.placeholder.com/150">

이렇게 입력하면 너비, 높이 150px의 이미지가 생깁니다

1. 같은 너비와 높이를 가진 이미지를 만들 경우

예)<img src="https://via.placeholder.com/150">

2. 너비와 높이가 다른 이미지를 만들 경우

너비 먼저 입력하고 x를 입력한 다음 높이를 입력합니다 

(경로/너비 x 높이)

예)<img src="https://via.placeholder.com/150x130">

3. 배경색이 있는 이미지를 만들 경우

"/" 붙이고 그 뒤에 6 자리된 색상 값을 주면 됩니다

기존의 색상 코드에서 #을 빼고 입력만 해주면 됩니다

<img src="https://via.placeholder.com/150x150/123456">

 

4. 텍스트 색상이 다른 이미지를 만들 경우

"/"를 두번 붙이고 6자리 색상 값을 입력합니다

보통 단독으로 사용하지 않고 배경색을 주고 글씨 색상을 따로 줍니다

<img src="via.placeholder.com/150x150//000000/">

5. 배경색과 텍스트 색상이 다른 이미지를 만들 경우

3, 4 방법을 같이 쓰는 방식으로 "/" 통해서 배경과 텍스트 색상을 구분합니다

예) 주소/배경색/텍스트색

<img src="https://via.placeholder.com/150x150/8715bf/e30707">

 

6. 이미지에 원하는 텍스트 내용을 적은 이미지를 만들 경우

이미지 크기 대신 이미지 안에 텍스트를 입력하는 방법으로

"/?text=" 입력하고 뒤에 원하는 내용을 적어줍니다

text color를 예로 들겠습니다 띄어쓰기는 "+"로 대체합니다

<img src="https://via.placeholder.com/150x150/8715bf/e30707/?text=text+color">