이전에 로렘입숨에 대해서 설명 드린 적이 있습니다.
영어, 한글로 된 의미없는 텍스트의 나열로, 전체적인 레이아웃을 살펴 보기 위해, 임의로 작성하는 텍스트라고 말씀 드렸네요.
그럼.. 이미지는 어떨까요?
이미지도 전체적인 레이아웃을 보기 위해서 임의로 넣을 수는 없을까요?
그 해답을 들고 왔습니다.
두 군데 사이트를 알려드릴께요.
먼저,
위에 그림처럼 생겼구요, 보이는 것처럼
이미지 태그 안에 src 속성에
"http://via.placeholder.com/가로길이x세로길이"
를 넣으면 된답니다. 바로 이렇게 이미지가 생성됩니다.
<img src="http://via.placeholder.com/350x250" />
이 이미지에 색상이나 글자를 넣을 수도 있어요.
<img src="http://via.placeholder.com/가로길이x세로길이/바탕색코드/글자색코드?text=이미지안글자" />
어떻게 나오는지 한번 볼까요?
<img src="http://via.placeholder.com/350x250/000000/ffffff?text=test">
깔끔하게 나왔네요^^
두번째로,
전 개인적으로 플레이스홀더닷컴보다 더미이미지닷컴이 더 직관적이어 보입니다.
여기도 한번 테스트 해볼까요?
이미지 속성에 이렇게 넣어보겠습니다.
위에랑 달리 포맷도 설정할 수가 있네요 ㅎㅎ
<img src="https://dummyimage.com/350x250/000/fff.png&text=test">
마찬가지로 깔끔합니다.
같은 이미지이지만, 안에 들어가는 텍스트 크기가 조금 다르네요.
그런데 한가지 아쉬운건 두 사이트 모두 text부분에 한글과 띄어쓰기 입력은 안되구, 꼭 영어만 적어야 합니다.
그럼 뭐 어때요, 더미 이미지로 사용하기엔 두 사이트 모두 깔끔하게 잘 실행이 됩니다^^
웹 사이트 만들 때 꼭 필요한
더미 이미지와 더미 텍스트 알아두시면 편리하게 잘 사용하실 수 있을 것 같네요.
2018/07/03 - [IT/TOOL] - 영어 한글 더미텍스트 로렘입숨(Lorem-Ipsum) 생성기 추천