임시 이미지(Placeholder Image) 사용하기

안녕하세요. 코딩웍스입니다.

임시 이미지는 웹사이트 퍼블리싱에서 전체적인 레이아웃을 잡을 때도 꼭 필요합니다.

특히 상세 퍼블리싱을 할 때 이미지가 있어야 할 부분에 이미지를 넣지 않고 하면 좋지 않습니다. 이럴 때 임시 이미지로 자리를 잡아 놓으면 퍼블리싱하기 매우 좋습니다. 물론 div에 사이즈를 주어서 이미지가 들어가는 부분이나 특정 레이아웃의 크기를 잡아 놓을 수 있지만, CSS를 거쳐와야 하고 나중에 또 지워줘야 하는 번거로움이 있습니다. 이런 번거로움을 임시 이미지가 말끔하게 해결해 줍니다.

이렇게 하지 않고 퍼블리싱 중간에 굳이 이미지를 찾아 사이즈를 맞춰서 넣고 하느라고 퍼블리싱 집중도를 떨어뜨리는 작업 습관은 좋지 않습니다.

그래서 위 같은 경우에 임시 이미지를 자주 사용합니다.

그동안 잘 사용하던 임시 이미지 사이트인 http://placehold.it 이 없어져서 다른 사이트를 이용하셔야 합니다.

물론 임시 이미지 사이트는 엄청 많습니다. 아래 코딩웍스가 소개하는 사이트가 아니어도 임시 이미지를 사용하는 건 아무 상관 없습니다.

✅ 임시 이미지 기본 사용법

공식 웹사이트 : https://placehold.co/
https://placehold.co/가로x세로
<img src="https://placehold.co/600x400" alt="Placeholder Image">

✅ 정사각형 임시 이미지 만들기

가로 세로 400픽셀 임시 이미지
https://placehold.co/숫자
<img src="https://placehold.co/400" alt="Placeholder Image">

✅ 배경색과 글자 넣은 임시 이미지 만들기

https://placehold.co/배경색/글자색
<img src="https://placehold.co/600x400/000000/FFFFFF" alt="Placeholder Image">
색상 값은 000/fff로 해도 상관없음
색상 값은 색상 이름으로 사용해도 상관없음 ex) <img src="https://placehold.co/600x400/crimson/yellowgreen" alt="Placeholder Image">

✅ 글자 변경한 임시 이미지 만들기

https://placehold.co/600/400/?text=텍스트+텍스트
<img src="https://placehold.co/600x400?text=Slider+Image" alt="Placeholder Image">
단어가 2개 이상이면 텍스트와 텍스트 사이에 띄어쓰기 불가(반드시 +로 연결해야 함)

✅ 배경색과 텍스트 변경하고 글자도 변경한 임시 이미지 만들기