웹프로그램 개발 시 필요한 샘플 이미지를 무료로 제공해 주는 사이트

-

웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. s 이때 사용할 수 있는 무의미한 더미 이미지를 무료로 제공해 주는 사이트가 있어 포스팅합니다.
더미 이미지를 제공해 주는 사이트도 있고 이미지의 글자정보만 제공해 주는 사이트도 있습니다.

더미 이미지 제공

placeimg.com

placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 사용법은 매우 간단합니다.

기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다.
특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다.

<img src="https://placeimg.com/가로크기/세로크기0/카테고리" />

디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 뿌려줍니다. 아래의 카테고리와 필터 지정에 따라서 해당 이미지를 랜덤하게 뿌려줍니다.

  • 카테고리종류 : animals, arch, nature, people, tech
  • 필터 종류 : grayscale, sepia 
<img src="https://placeimg.com/200/100/any" />
<img src="https://placeimg.com/200/100/any/grayscale" />
<img src="https://placeimg.com/200/100/animals/sepia" />

텍스트 이미지영역 제공

Placehold.it

Placehold.it은 매우 간단하게 이미지영역을 잡아주고 글자를 보여줍니다.

기본 사용법은 아래와 같습니다.

<img src="http://placehold.it/320x100" />
<img src="http://placehold.it/100" />

4가지의 옵션을 추가로 지정할 수 있습니다.

  • Size : 이미지의 가로x세로 사이즈 지정
  • Format : 이미지의 포멧지정 (gif, png, jpg)
  • Color : 배경컬러와 텍스트컬러를 지정
  • Text : 기본 텍스트는 이미지의 사이즈이나 사용자가 텍스트를 변경할 수 있음
<img src="http://placehold.it/320x100?text=sample" />
<img src="http://placehold.it/320x100.png?text=sample" />
<img src="http://placehold.it/320x100.png/E8117F/ffffff" />
<img src="http://placehold.it/320x100.png/E8117F/ffffff?text=sample" />

ipsumimage.appspot.com

ipsumimage.appspot.com도 위의 Placehold.it과 거의 흡사한 기능을 제공합니다. 다만 사용법이 약간 다른 정도 입니다.

기본사용법은 아래와 같습니다.

<img src="http://ipsumimage.appspot.com/가로크기x세로크기" />

4가지의 옵션을 추가로 지정할 수 있습니다.

  • Size : 이미지으 가로x세로 사이즈 지정
  • Format : 이미지의 포멧지정 (gif, png, jpg)
  • Color : 배경컬러와 텍스트컬러를 지정
  • Text : 기본 텍스트는 이미지의 사이즈이나 사용자가 텍스트를 변경할 수 있음
  • f : 폰트의 색상 지정
  • s : 폰트의 크기 지정
<img src="http://ipsumimage.appspot.com/320x100" />
<img src="http://ipsumimage.appspot.com/320x100.png" />
<img src="http://ipsumimage.appspot.com/320x100.png,ff7700" />
<img src="http://ipsumimage.appspot.com/320x100.png,ff7700" />
<img src="http://ipsumimage.appspot.com/320x100,ff7700?l=Ipsum+Image|Hosted+on+GAE" />
<img src="http://ipsumimage.appspot.com/320x100?l=Ipsum+Image|Hosted+on+GAE&s=30" />
<img src="http://ipsumimage.appspot.com/320x100?l=Ipsum+Image|Hosted+on+GAE&s=30&f=ff7700" />

Comments

Post a Comment

Popular posts from this blog

CSS에서 ellipsis('...')를 처리하는 방법

-
Image
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 '...'으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } Block레벨 테그에서만 적용됨. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함 text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함 white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능) 멀티라인 글자수 제한 멀티라인에 대해서 글자수를 제한하는 방법은 아래와 같습니다. <p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다.&nbsp; 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p> .txt_post { overflow: hidden; text-ove...
Read more

nano에디터 소개 및 사용법

-
Image
윈도우를 사용할 경우는 전용에디터를 사용하면 되는데.. 리눅스나 유닉스 같은 경우 CLI환경 에서 간단한 수정을 할 경우는 vi 애디터 만큼 편한 것이 없습니다. 다만 vi 에디터 가 사용자 친화적이 아니여서 그것을 사용하려면 별도의 학습이 필요하고 사용법을 익혔다고 하더라도 한동안 사용하지 않다가 다시 사용하려면 여간 헷갈린 것이 아닙니다. 그래서 그런 불편한 점을 해소하기 위해서 많이 사용하는 것이 nano 에디터 입니다. nano 에디터 는 사용법도 쉬울뿐만 아니라 하단에 단축키들이 설명되어 있어서 별도의 학습이 없더라도 쉽게 사용을 할 수 있습니다. nano에디터가 기본적으로 설치가 되어 있는 경우 그냥 터미널창에서 $ nano 또는 $ nano <파일명> 명령어를 입력하고 실행시키면 프로그램이 실행됩니다. $ nano $ nano test.txt 내용을 작성하는 본문 영역입니다. 단축키를 보여주는 영역입니다. 만약 nano에디터가 설치가 되어 있지 않은 경우 아래의 명령어로 설치를 하면 됩니다. 아래의 yum 은 CentOS의 패키지 설치 명령어 입니다. $ sudo yum install nano nano에디터를 기본 편집기로 설정 nano에디터를 리눅스나 Mac OS의 기본 터미널편집기인 vi대신에 사용할 수 있습니다. .bash_profile 파일을 아래와 같이 변경하면 됩니다. nano에디터를 설치했기때문에 아래와 같이 nano에디터로 .bash_profile 파일을 오픈합니다. $ nano ~/.bash_profile 그러면 아래와 비슷한 내용이 나오는데 가장 아래쪽에 기본에디터에 대한 설정을 추가해 줍니다. PATH=$PATH:$HOME/bin export PATH ### 기본 에디터를 nano로 사용 설정 추가 export EDITOR=nano 그런 다음 .bash_profile 를 아래와 같이 재로딩하거나 로그인을 다시 하면 됩니다. $ source ~/.bash_profile 단...
Read more

Google 스프레드시트로 구글캘린더에 일정 연동하는 방법

-
Image
저는 구글 제품을 많이 사용하는 편입니다. 제 주력 캘린더도 Google 캘린더 고요. 이번에 모임의 임원을 맡게 되면서 회원들의 생일을 캘린더에 등록해야 할 일이 생겼어요. 그냥 하나하나 등록을 하는 도중 "내가 지금 뭐하고 있나.." 라는 자괴감이 들기 시작했어요. 구글 시트에 있는 날짜 정보(생일)을 한 번에 쉽게 일괄 등록할 수는 없을까라는 생각이 뇌리를 스쳤습니다. 그래서 찾아봤더니.. 약간의 매크로 프로그램을 작성하면 가능할 것 같더라고요. 그래서 열심히 개발을 해봤습니다. 1시간이면 등록할 것을 8시간 걸려서 프로그램을 짜 봤어요. 결과적으로는 더 비효율적이었네요. ㅠㅠ 그러나... 나에게는 비효율 적이었지만 이코드를 공개하면 다른 사람에게는 큰 도움이 될 수 있겠구나 생각을 하고 코드를 공개해 보려고 합니다. 준비물 준비물은 Google 스프레드시트, Google 캘린더만 있으면 돼요. 당연히 무료고요. Google 캘린더 먼저 Google 캘린더를 만들거나 사용하고 있는 캘린더를 준비합니다. 적용하기 원하는 캘린더의 우측의 ... 를 클릭하고 설정 및 공유 를 선택합니다. 캘린더 ID를 잘 기억해 놓습니다. 나중에 이 ID를 활용할 예정입니다. Google 스프레드시트 회원생일 스프래드시트 공유 Google 스프레드시트로 명단과 생일을 작성합니다. ▲ 위와 같이 작성을 하면 되고 중요한 사항은.. 생년월일 이 구글 시트의 날짜 형식에 맞아야 합니다. 그리고 갤린더등록 , 캘린더상태 의 항목은 필수로 있어야 합니다. 캘린더등록 : 캘린더에 등록할지 제거할지를 표시 (ADD / DEL) 캘린더상태 : 현재 캘린더에 해당 항목이 적용되었는지 확인 (Y / ' ') 매크로 프로그램 작성하기 기본적인 준비는 끝났습니다. 이제부터 Apps Script를 제작하고 트리거를 등록하면 됩니다. Apps Script 작성하기 Apps Script 는 구글 제품에 대...
Read more