작성일자
카테고리 CSS/CSS기초

웹디자인을 하다보면 이미지나 텍스트가 필요한데 대부분 텍스트는 Lorem ipsum이라는 곳에서 더미 텍스트(dummy text)를 복사해서 붙여넣고 사용하죠. 이미지는 어떨까요. 보통 무료 이미지 사이트에서 내려받아서 포토샵으로 자르고 저장해서 HTML 코드로 붙여넣고 사용합니다. 그런데 원하는 사이즈를 입력하면 자동으로 이미지를 만들어주는 사이트가 있어서 참 편리합니다. 이름도 Lorem pixel입니다.


http://lorempixel.com/


위 링크로 가면 아래와 같은 화면이 나옵니다.



슬라이더가 있는 곳에서 숫자를 더블 클릭하고 원하는 가로 사이즈를 입력하거나 슬라이더로 수치를 조정합니다. 세로 사이즈도 마찬가지로 수정하고 어떤 이미지를 만들 것인지 선택합니다. 그런 다음 컬러나 그레이 이미지를 선택하면 이미지가 나타납니다.



이미지 위에 오른쪽 마우스 클릭하고 이미지를 다른 이름으로 저장을 클릭해서 내 컴퓨터에 저장하든가 이미지 URL을 복사해서  HTML 코드로 삽입하면 됩니다. 여기서는 두번째 방법을 사용해봅니다.


<!DOCTYPE html>

 

<html lang="ko">

 

  <head>

  <meta charset="utf-8">

</head>

 

<body>

<img src="http://lorempixel.com/output/animals-q-c-640-480-4.jpg">

</body>

</html>


코드에 붙여넣고 사용하면 됩니다. 그런데 이 이미지가 계속 저장돼있는지 궁금하군요. 아마도 고유한 파일 이름이라서 서버에 계속 저장돼 있을 것 같기도 합니다. 아래 이미지는 위처럼 링크 URL로 붙여넣은 이미지입니다. 언제 사라질지 시험중입니다.



여기서 사용하는 이미지는 시험용으로 사용하는데는 무료지만 각 이미지마다 저작권이 있어서 상업용으로 사용하려면 해당 저작권자에게 문의를 해야한다는군요. 라이센스가 CC(creative common)로 돼있기 때문이죠.

저작자 표시 비영리 변경 금지
신고

티스토리 툴바