placeholder image이란?
임시로 이미지를 표시하는 서비스이다.
이미지 크기와 형식, 배경색, 텍스트 등을 지정할 수 있다.
기본 사용법
url 뒤에 /이미지사이즈 만 입력하면 끝이다.
150px * 100px 사이즈의 이미지를 표시하는 예시이다.
<img src="https://via.placeholder.com/150x100" alt="">너비와 높이 사이즈가 동일하다면 한 번만 적어도 된다.
<img src="https://via.placeholder.com/200" alt="">포맷 설정
선택 옵션이고 기본값은 gif이다.
- .gif
- .jpg
- .jpeg
- .png
<img src="https://via.placeholder.com/300.png" alt="">
텍스트 설정
기본적으로 이미지의 사이즈가 텍스트로 노출되지만 변경이 가능하다.
url 뒷부분에 파라미터 ?text=를 전달하면 된다.
<img src="https://via.placeholder.com/200?text=Hello" alt="">띄어쓰기는 +를 사용한다.
<img src="https://via.placeholder.com/320?text=Hello+World" alt="">배경색과 텍스트 칼라 설정
기본적으로 회색 계열로 노출되지만 변경이 가능하다.
/배경색/텍스트칼라 순서로 적어주면 된다.
배경색은 ff0, 텍스트 칼라는 000으로 표시하는 예시이다.
<img src="https://via.placeholder.com/320/ff0/000?text=Hello+World" alt="">
J-Web