권장 브라우저 안내

이 웹사이트는 Internet Explorer 9 버전 이상에서만 이용 가능합니다.
편리한 사이트 이용을 위하여 최신 브라우저로 업그레이드해주시기 바랍니다.

저희와 함께 하시겠습니까?

프로젝트 의뢰는 아래로 문의 주시기 바랍니다.
websre@naver.com
Tel: 1800-9356

  • Portfolio

    Our work 에서 자세한 정보를 확인하세요.

  • General

    48, Dunjiro, Seo-gu, Daejeon
    대전광역시 서구 둔지로 48 (둔산동, 두림빌딩)

본문 바로가기
News
May 31, 2019
Article

사용하기 쉽고 세련된 자리 표시자 로렘 픽숨(Lorem Picsum)

본문

로렘 픽숨(Lorem Picsum)은 이미지를 활용하는 자리 표시자로 디자인 시안 기획 시 또는 , 모바일 UI 디자인 등에서 활용할 수 있는 유용한 기능이다.

최종 확정되지 않은 이미지 영역을 설명하기 위해 이미지 표시자를 설정하고 빈 공간을 보여주는 대신 임의의 이미지를 규격에 맞게 불러와 보여 주기 위해 사용자 정의할 수 있는 방법이다. 

 

사용하기 쉽고 세련된 자리 표시자 로렘픽숨(Lorem Picsum)

 

사용 방법은 다음과 같다.

 

URL 뒤에 원하는 이미지 크기(가로 및 세로)를 추가하면 임의의 이미지가 표시된다.

예시) https://picsum.photos/200/300

 

정사각형 이미지를 얻으려면 크기를 추가한다.

예시) https://picsum.photos/200

 

특정 이미지(Specific Image)

996737415CE8D9A40E


[/id/{image}] | URL의 시작 부분에 추가하여 특정 이미지를 가져온다.

https://picsum.photos/id/237/200/300

아래 링크에서 가용할 수 있는 모든 이미지의 목록을 찾을 수 있다.

로렘픽숨 이미지 갤러리 - https://picsum.photos/images

로렘픽숨(Lorem Picsum) 이미지 갤러리로렘픽숨(Lorem Picsum) 이미지 갤러리

 

그레이 스케일(Grayscale)

99CBB0335CE8D9A40F

 

[?grayscale] | URL의 끝에 추가하여 회색 음영 이미지를 가져온다.

예시) https://picsum.photos/200/300?grayscale

 

흐림(Blur)

9921C2465CE8D9A408

 

[?blur] | URL의 끝에 추가하여 흐리게 표시된 이미지를 가져온다.

예시) https://picsum.photos/200/300/?blur

 

또한, 흐림 효과의 양을 조절할 수 있다(1~10)

예시) https://picsum.photos/200/300/?blur=2

 

고급 사용(Advanced Usage)

997E8F335CE8D9A405

 

위의 옵션 중 하나를 조합할 수 있습니다.

예를 들어, 그레이 스케일 및 흐린 특정 이미지를 얻으려면

예시) 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)] 

디자인 샘플보기

궁금한게 있으신가요? 무엇이든 물어보세요.