티스토리 뷰
적절한 사진 배치는 블로그나 홈페이지에 있어서 아주 중요한 요소입니다. 오늘은 저작권에 상관없이 사용할 수 있는 이미지 사이트들을 알아보고 등록을 하지 않고도 간단하게 api로 이미지를 불러오는 방법을 알아보겠습니다.
무료 이미지 사이트
우선 소개할 사이트는 픽사베이입니다.
이미 많은 분들이 알고있는 그 픽사베이입니다. 이미지와 비디오까지도 무료로 사용할 수 있습니다 상업적으로 사용하셔도 됩니다. 하지만 예외도 있습니다. 예를 들어 나사의 사진을 판매하는 상품 옆에 두고 나사가 추천한다는 식으로 작성하는 것은 문제가 될 수 있습니다. (이런 식으로 이용하는 분은 없겠지만요.)
또 소개할 무료 이미지 사이트는 언스플래쉬입니다. 언스플래쉬에서도 픽사베이와 마찬가지로 상업적으로도 무료 사용이 가능합니다. 픽사베이와 마찬가지로 사진을 다운로드, 복사, 수정, 배포 등 자유롭게 할 수 있지만 언스플래시의 컨텐츠를 가지고 유사하거나 경쟁 서비스를 만드는데 사용하는 것은 위에서 말한 이용에서 제외됩니다.
언스플래쉬 api 사용하기
언스플래쉬에는 등록을 하지 않고도 간단하게 api를 이용할 수 있습니다. 보통은 api를 이용하려면 여러 가지 등록할 것들이 있지만 언스플래쉬에서는 랜덤 이미지들을 보여주는 api를 회원가입도 없이 제공해줍니다.
사이트에 들어가보시면 랜덤이 클릭되어 있고 url이 하나 있는게 보이시나요? 이미지의 소스로 해당 url을 사용하면 새로고침할 때마다 새로운 이미지가 보여집니다.
<!DOCTYPE html> <html> <head> <title>언스플래쉬 랜덤이미지</title> </head> <body> <img src="https://source.unsplash.com/random"> </body> </html>
실습을 해볼까요? 위의 소스코드를 실행해주세요. <body>태그 안에는 <img>태그 하나만 있기 때문에 사진 하나만 나올겁니다. 그럼 f5를 눌러서 새로고침 해보세요! 새로운 사진으로 바뀐 모습을 볼 수 있습니다. 사이트에 접속하셔서 활용하는 방법들을 혼자서 연습해보시기 전에 하나만 더 같이 해볼까요?
몇 가지를 단어를 정해서 원하는 이미지들을 불러올 수도 있습니다. 저는 water와 mountain이라는 단어로 설정해보겠습니다. 이미지 태그를 수정해주세요
<img src="https://source.unsplash.com/featured/?water,mountain">
파일을 새로고침 해보세요. 물과 산이 계속해서 나타나나요? 이상 포스팅을 마치겠습니다.
오늘의 포스팅이 도움이 되었나요? 공감으로 표현해주세요!
공감은 제작자에게 큰 힘이 됩니다.
'Useful-tools' 카테고리의 다른 글
| git으로 버전 관리하기 3 (0) | 2018.03.16 |
|---|---|
| git으로 버전 관리하기 2 (0) | 2018.03.16 |
| git으로 버전 관리하기 (0) | 2018.03.15 |
| cdn을 이용해서 홈페이지에 아이콘 무료 사용 - 폰트어썸 (1) | 2018.01.24 |
| 구글 폰트 이용하기 (0) | 2018.01.22 |