기본 콘텐츠로 건너뛰기

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

웹사이트를 개발하다 보면 이미지 영역을 잡는 경우가 있습니다. 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" />

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

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

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

Google캘린더(달력)에 대한민국 휴일 표시하기

구글 캘린더에 대한민국 휴일을 표시하는 설정에 대해서 소개합니다. 네이버 달력이라면 그냥 기본으로 나오겠지만 구글캘린더의 경우는 별도의 설정을 해 주어야 합니다. 휴일의 표시는 각 나라의 휴일을 구글에서 미리 작성해 놓은 것을 내 캘린더에 불러와 적용하는 방식으로 되어 있습니다. 대한민국 공유일 표시하기 먼저 설정화면으로 이동합니다. 캘린더 화면의 우측상단의 설정 아이콘을 클릭합니다. 메뉴 중 설정 을 클릭합니다. 설정화면 중 좌측 메뉴에서 캘린더 추가 메뉴를 선택합니다. 관심분야와 관련된 캘린더를 선택합니다. 지역 공휴일의 모두 둘러보기 를 선택하면 각나라의 휴일을 선택할 수 있습니다. 우리는 대한민국의 휴일 을 선택합니다. 캘린더에서 공휴일 보기 대한민국 휴일에 대한 설정을 했다면 이제 보기 좋게 표시하면 됩니다. 설정을 정상적으로 했다면 좌측메뉴에 대한민국의 휴일 이라는 캘린더가 보입니다. 캘린더명의 우측끝에 더보기 아이콘 을 선택합니다. 색상을 빨간색으로 선택합니다. (보통 공휴일은 빨간색이므로.. ㅎ) 그러면 캘린더에 휴일의 명칭이 빨간색 으로 표시되게 됩니다. 감사합니다.
댓글 쓰기
자세한 내용 보기

맥북 한영 전환키를 윈도우처럼 변경하는 방법

윈도우를 사용하다가 맥 OS로 넘어가게 되면 당장 키보드 사용에서 불편함을 겪게 됩니다. 앞으로 맥 OS만 계속 사용한다면 맥 OS의 한영 전화키인 Command + Sppace 버튼을 사용하거나 키보드의 왼쪽에 있는 한/A 키를 익숙하게 사용하면 됩니다. 하지만 저같이 윈도즈와 맥 OS를 번갈아 사용할 경우는 맥 OS의 한영 전환키를 윈도우즈의 키처럼 스페이스바 옆에 있는 command 버튼으로 변경하는 것이 편리합니다. 한영 전환키를 기본 시스템에서는 변경할 수 없고 Karabiner라는 유틸리티 프로그램의 도움을 받아야 합니다. 먼저 https://karabiner-elements.pqrs.org 에 접속을 합니다. 다운로드 및 설치하기 자신의 OS 버전에 맞는 설치 파일을 다운로드하고 설치를 합니다. 설정하기 응용프로그램에서 karabiner를 실행시킵니다. 먼저 Simple modifications 탭을 선택합니다. Add item 을 선택하여 추가합니다. right_command를 선택하고 F18을 추가합니다. 이번에는 시스템 환경설정 으로 들어가서 키보드 항목을 실행합니다. 단축키 > 입력 소스 > 이전 입력 소스 선택을 클릭하여 F18(right Command)를 선택합니다. 이렇게 하면 오른쪽 Command 키를 누르면 한영 키가 전환이 됩니다. 보안 설정 위의 설명대로 설정을 하면 되지만 맥 OS는 보안사항으로 인해 기본적으로 설정을 막아 놓습니다. 그래서 아래의 방법으로 2가지를 설정 해제해야 합니다. Karabiner-Elements 용 가상 장치를 제공하는 시스템 소프트웨어 허용 Karabiner-Elements Preferences를 열면 다음 경고가 표시됩니다. 보안 및 개인 정보 보호 시스템 환경 설정 열기 버튼을 클릭한 다음 허용 버튼을 누릅니다 Karabiner-Elements 프로세스에 대한 입력 모니터링 부여 커널 확장을 허용한 후 macOS Catal...
댓글 쓰기
자세한 내용 보기