IT/TOOL

더미 이미지 생성기 추천

김비서 2018. 7. 11. 10:09
728x90

이전에 로렘입숨에 대해서 설명 드린 적이 있습니다. 

영어, 한글로 된 의미없는 텍스트의 나열로, 전체적인 레이아웃을 살펴 보기 위해, 임의로 작성하는 텍스트라고 말씀 드렸네요. 


그럼.. 이미지는 어떨까요? 

이미지도 전체적인 레이아웃을 보기 위해서 임의로 넣을 수는 없을까요? 


그 해답을 들고 왔습니다. 


두 군데 사이트를 알려드릴께요.


먼저, 

https://placeholder.com/



위에 그림처럼 생겼구요, 보이는 것처럼

이미지 태그 안에 src 속성에


"http://via.placeholder.com/가로길이x세로길이"


를 넣으면 된답니다. 바로 이렇게 이미지가 생성됩니다.


<img src="http://via.placeholder.com/350x250" />


300x250


이 이미지에 색상이나 글자를 넣을 수도 있어요. 

<img src="http://via.placeholder.com/가로길이x세로길이/바탕색코드/글자색코드?text=이미지안글자" />


어떻게 나오는지 한번 볼까요?

<img src="http://via.placeholder.com/350x250/000000/ffffff?text=test">


300x250


깔끔하게 나왔네요^^


두번째로,

https://dummyimage.com/



전 개인적으로 플레이스홀더닷컴보다 더미이미지닷컴이 더 직관적이어 보입니다. 

여기도 한번 테스트 해볼까요?

이미지 속성에 이렇게 넣어보겠습니다. 

위에랑 달리 포맷도 설정할 수가 있네요 ㅎㅎ


<img src="https://dummyimage.com/350x250/000/fff.png&text=test">


300x250


마찬가지로 깔끔합니다. 

같은 이미지이지만, 안에 들어가는 텍스트 크기가 조금 다르네요. 


그런데 한가지 아쉬운건 두 사이트 모두 text부분에 한글과 띄어쓰기 입력은 안되구, 꼭 영어만 적어야 합니다. 

그럼 뭐 어때요, 더미 이미지로 사용하기엔 두 사이트 모두 깔끔하게 잘 실행이 됩니다^^ 

웹 사이트 만들 때 꼭 필요한

더미 이미지와 더미 텍스트 알아두시면 편리하게 잘 사용하실 수 있을 것 같네요. 


2018/07/03 - [IT/TOOL] - 영어 한글 더미텍스트 로렘입숨(Lorem-Ipsum) 생성기 추천


반응형