[HTML; 헤이치티엠엘] 임시 이미지 넣기 / 임시 사진 넣기 / 테스트 이미지 넣기 / 샘플 이미지 넣기 / <img />

사진: Unsplash 의 Fabrice Villard

개발을 하다 보면 디자이너들한테 이미지를 받아 웹 사이트에 적용을 해야 하는데 디자이너들의 작업이 늦어져서 비워둬야 하는 경우가 있다.

이럴 때 내가 자주 쓰는 방법을 소개하겠다.

via.placeholder.com

위 url을 사용하면 샘플 이미지를 불러와서 사용할 수 있다.

사용방법

https://via.placeholder.com/사이즈

위 url을 <img /> 태그의 src에 넣어주면 된다.

<img alt="sample" src="https://via.placeholder.com/100" />

이렇게 URL 마지막에 숫자를 입력하고 img 태그에 넣어주면 100x100 사이즈의 샘플 이미지가 나타난다.

샘플이미지 100x100

<여러가지 사이즈 예시>

<img alt="sample" src="https://via.placeholder.com/100" />     // 100x100
<img alt="sample" src="https://via.placeholder.com/150" />     // 150x150
<img alt="sample" src="https://via.placeholder.com/438" />     // 438x438
<img alt="sample" src="https://via.placeholder.com/100x200" /> // 100x200

원하는 사이즈를 입력하면 된다.

<확장자>

.gif, .jpg, .jpeg, .png, .webp 등.. 다양한 확장자를 사이즈 뒤에 붙여주면 된다.

<img alt="sample" src="https://via.placeholder.com/100.jpg" />     // 100x100
<img alt="sample" src="https://via.placeholder.com/150.png" />     // 150x150
<img alt="sample" src="https://via.placeholder.com/438.gif" />     // 438x438
<img alt="sample" src="https://via.placeholder.com/100x200.webp" /> // 100x200

<이미지에 글자(텍스트)넣기>

파라미터로 text를 넘겨주면 된다. 한글은 깨지는 거 같으니 영어로 작성하자.

<img alt="sample" src="https://via.placeholder.com/300.jpg?text=test text" />

<배경 색깔 & 글자 색깔>

이미지의 배경과 글자 색깔도 마음대로 할 수 있다.

<img alt="img" src="https://via.placeholder.com/300.jpg/FF0000/FFFFFF?text=test text" />
<!-- <img alt="img" src="https://via.placeholder.com/300.jpg/배경색/글자색?text=test text" /> -->

끝.