(HTML)임시이미지 간단히 넣는 방법

가상의 샘플이미지를 쉽게 넣을 수 있는 방법

아직 웹사이트의 적용할 이미지가 나오지 않았을때 위치만 잡아 놓기 위치 쓸 수 있는 아주 유용한 방법이다. 이미지를 따로 제작하지 않아도 URL로만 쉽게 이용가능하다. 

사용방법

이미지 경로에 해당 url과 정보(사이즈 등)를 적으면 플레이스홀더의 이미지를 위 이미지처럼 나온다.

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

 

예시

<img src="https://via.placeholder.com/150" alt="샘플이미지">

요렇게 파일경로에 해당 유알엘을 적어주고, 원하는 이미지의 사이즈를 적어준다. 

 

이미지 사이즈 적용 방법

https://via.placeholder.com/150 -> 150 x 150 px 의 이미지 생성

https://via.placeholder.com/150x200 -> 150 x 200 px 의 이미지 생성

 

확장자

.GIF .JPG .JPEG .PNG .WEBP( gif가 기본값)
- 적용예시

https://via.placeholder.com/150.jpg

 

텍스트 적용방법

https://via.placeholder.com/728x90.png?text=Visit+WhoIsHostingThis.com+Buyers+Guide

위 url 적용시 728x90px 사이즈의 이미지의 png 확장자를 가지며, 안에 문구가 입력된다.

 

배경 색과 텍스트 색상 적용 방법

https://via.placeholder.com/사이즈/배경색/텍스트색/문구

https://via.placeholder.com/150/0000FF/808080 ?Text=Digital.com

https://via.placeholder.com/150/FF0000/FFFFFF?Text=Down.com
https://via.placeholder.com/150/FFFF00/000000?Text=WebsiteBuilders.com

https://via.placeholder.com/150/000000/FFFFFF/?text=IPaddress.net 

 

배경색, 텍스트컬러, 이미지사이즈, 텍스트 삽입도 가능하니, 해당이미지가 만들어지기 전까지 임시로 사용하기 좋을 듯 싶다. 

 

참고 출처 : https://placeholder.com/