Article
사용하기 쉽고 세련된 자리 표시자 로렘 픽숨(Lorem Picsum)
본문
로렘 픽숨(Lorem Picsum)은 이미지를 활용하는 자리 표시자로 웹디자인 시안 기획 시 또는 웹, 모바일 UI 디자인 등에서 활용할 수 있는 유용한 기능이다.
최종 확정되지 않은 이미지 영역을 설명하기 위해 이미지 표시자를 설정하고 빈 공간을 보여주는 대신 임의의 이미지를 규격에 맞게 불러와 보여 주기 위해 사용자 정의할 수 있는 방법이다.
사용 방법은 다음과 같다.
URL 뒤에 원하는 이미지 크기(가로 및 세로)를 추가하면 임의의 이미지가 표시된다.
예시) https://picsum.photos/200/300
정사각형 이미지를 얻으려면 크기를 추가한다.
특정 이미지(Specific Image)
[/id/{image}] | URL의 시작 부분에 추가하여 특정 이미지를 가져온다.
https://picsum.photos/id/237/200/300
아래 링크에서 가용할 수 있는 모든 이미지의 목록을 찾을 수 있다.
로렘픽숨 이미지 갤러리 - https://picsum.photos/images
로렘픽숨(Lorem Picsum) 이미지 갤러리
그레이 스케일(Grayscale)
[?grayscale] | URL의 끝에 추가하여 회색 음영 이미지를 가져온다.
예시) https://picsum.photos/200/300?grayscale
흐림(Blur)
[?blur] | URL의 끝에 추가하여 흐리게 표시된 이미지를 가져온다.
예시) https://picsum.photos/200/300/?blur
또한, 흐림 효과의 양을 조절할 수 있다(1~10)
예시) https://picsum.photos/200/300/?blur=2
고급 사용(Advanced Usage)
위의 옵션 중 하나를 조합할 수 있습니다.
예를 들어, 그레이 스케일 및 흐린 특정 이미지를 얻으려면
예시) https://picsum.photos/id/870/200/300?grayscale&blur=2
브라우저에서 동일한 크기의 여러 이미지를 요청하려면 random 이미지가 캐시 되지 않도록 쿼리 매개 변수를 추가하면된다.
예시) <img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">
파일 끝이 필요한 경우 .jpg URL의 끝에 추가할 수 있다 .
예시) https://picsum.photos/200/300.jpg
이미지 나열(List Images)
/v2/list끝점 을 사용하여 이미지 목록을 가져온다.
예시) https://picsum.photos/v2/list
API는 기본적으로 페이지 당 30개의 항목을 반환한다.
다른 페이지를 요청하려면 [?page] 매개 변수를 사용한다.
페이지 당 항목 수를 변경하려면 [?limit] 매개 변수를 사용하면 된다.
예시) https://picsum.photos/v2/list?page=2&limit=100
Link헤더는 이전 / 다음 페이지에 대한 페이지 매김 정보가 포함되어 있다
출처: https://www.designlog.org/2512699?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+DesignlogOfMaru+(DESIGN+LOG+-+Design+%26+Digital+Convergence+Webzine) [디자인 로그(DESIGN LOG)]