위 이미지는 https://via.placeholder.com/150/FFFF00/000000 로 만들었습니다.
테스트용 이미지가 필요하거나, 기타 웹 작업할 때, placeholder라고 하죠?
임시 이미지들을 제공하는 유용한 서비스입니다.
급히 텍스트를 이미지로 넣어야 할 때도 쓸 수 있습니다.
주소만 기억했다가 <img 의 src="" 나 배경 이미지의 url 로 맞춰 넣으면 됩니다.
가로x세로 크기, 배경색, 글자색, 글자, 이미지 확장자를 손쉽게 지정할 수 있습니다.
이용 방법은 아래와 같습니다.
https://via.placeholder.com/300x100/FFFF00/000000.png?text=Test+Image
- 가로x세로/배경색/글자색.확장자?text=텍스트(공백은+로)
필요 없는 옵션은 않넣으면 되기에 간단하게는 https://via.placeholder.com/150 요런 정도로도 쓸 수 있습니다.
사이트 메인: placeholder.com/
그 외, 테스트용 텍스트도 제공합니다. placeholder.com/text/
그런데, 구글에 찾아보면 유사한 서비스가 매우 많습니다.
텍스트의 폰트 지정도 가능한 placehold.co/ 도 좋고
이미지의 테마를 고를 수 있는 placeimg.com/ 도 좋고
흑백이냐 컬러냐 선택해서 원하는 크기의 랜덤이미지를 불러 올 수 있는 lorempixel.com/ 도 좋고
특정 사진으로 지정할 수 있고 이미지 목록이나 이미지 상세정보를 api로 제공하는 picsum.photos/ 도 좋고
고양이 이미지만 필요하다면 placekitten.com/ 도 좋습니다.
'웹 코딩 > 그 외' 카테고리의 다른 글
clipboard.js - 클립보드로 복사하기 (0) | 2020.10.07 |
---|---|
현재 접속자 현황 - whos.amung.us (0) | 2020.09.14 |
microlight.js - 독특한 단색 코드 강조 (0) | 2020.08.25 |
pixi.js - 웹에서 쉽게 애니메이션 구현하기 (0) | 2020.08.10 |
스크롤 활용도 극강 UP! - 스크롤매직 (ScrollMagic) (0) | 2020.08.07 |
댓글