이미지 영역에 임시 이미지를 넣어보자(Placehold, placeimg)

코딩을 하다보면 굳이 시안의 이미지를 자를 필요는 없지만

이미지 삽입할 영역을 만들어야 할 때가 있어 찾아보고 사용하게 되었다.

(이름을 누르면 해당 사이트로 접속할 수 있다.)

---

1. Placehold.it

 

placehold는 원하는 이미지 사이즈를 입력하면 바로 출력되는 가장 간편하게 사용할 수 있는 방법이다.

텍스트 형식으로 제공해 사이즈가 어떻게 되는지 한 번에 볼 수 있다.

<img src="http://placehold.it/320x100" />
<img src="http://placehold.it/100" /><!-- 정사각형이 필요한 경우 1번만 -->

텍스트와 배경색이 필요하면 아래와 같이 적용하면 된다.

<img src="http://placehold.it/320x100?text=text" />
<img src="http://placehold.it/320x100/ff0000/ffffff?text=text" />

---

 

2. placeimg

 

이미지 사이즈 뒤에 이미지의 카테고리를 설정 후 디폴트는 any 혹은 Animals, Architecture, Nature, People, Tech의 5개의 카테고리에 Grayscale, Sepia형식의 필터 2가지의 조합으로 된 서비스다.

 

placehold와 같은 텍스트 형식은 지원하지 않는 것 같으며, 임의로 특정이미지를 지정이 불가하다.

기본값인 any의 적용상태로 페이지를 새로 고침을 하면 할 때마다 새로운 이미지로 변경된다.

<img src="https://placeimg.com/320/100/any" />

여기에 grayscale, sepia 필터를 넣었을 때

<img src="https://placeimg.com/320/100/any/grayscale" />
<img src="https://placeimg.com/320/100/any/sepia" />