웹페이지 액박 대처하기

웹페이지 액박 대처하기

웹 페이지를 만들다보면 아직 이미지가 없는 상태에서 위치, 크기만 지정해야할 경우가 많다. 이런 경우 크기가 맞지 않는 이미지를 가져다가 억지로 배치시켜 볼 수도 있지만 dummyimage.com 같은 사이트를 이용해보면 손쉽게 관련 처리가 가능하다.

 

dummyimage.com

dummyimage.com/은 이름그대로 동적으로 dummy 이미지를 생성해주는 사이트이다.

Dynamic Dummy Image Generator - DummyImage.com

사이트에 들어가서 적절한 크기와 전경/배경색, 포멧 표시할 텍스트 등을 입력하면 이를 서비스하기 위한 주소를 넘겨준다.

이제 우리 코드로 와서 <img>의 src 경로에 https://dummyimage.com/200x200/403030/e0d5e0.png 주소를 입력하면 끝이다.

<img src="https://dummyimage.com/420x200/403030/e0d5e0.png">

물론 URL을 직접 수정해서도 이미지를 변경시킬 수 있기 때문에 매번 사이트를 방문할 필요는 없다.

 

프로그래밍 적으로 처리하기

프로그래밍 적으로 엑박을 처리하기 위해서는 javascript를 이용하면 된다.

img 태그를 사용했는데 src에 지정한 이미지를 로드할 수 없다면 error 이벤트가 발생하는데 이를 처리할 자바스크립트를 작성해주자. 재사용할 필요가 없다면 다음처럼 간단히 처리할 수 있다.

<img src ="some img" onerror="this.src='https://dummyimage.com/420x200/403030/e0d5e0.png'">

 

즉 error가 발생했을 때 대체할 src를 지정해주는 것이다.