임시 이미지(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개 이상이면 텍스트와 텍스트 사이에 띄어쓰기 불가(반드시 +로 연결해야 함) ✅ 배경색과 텍스트 변경하고 글자도 변경한 임시 이미지 만들기<img src="https://placehold.co/600x400/000/fff?text=Slider+Image" alt="Placeholder Image">
