Plaacehold.it를 사용하여 가상 이미지를 순간적으로 준비합니다.
3376 단어 HTMLplaceholderplacehold.itCSS
Placehold.it
Placehold.it
간단한 위조 이미지를 순간적으로 준비할 수 있는 웹 서비스.또 가장 큰 특징은 그림을 손에 넣지 않아도 사용할 수 있다는 것이다.
사용법
사용법이 아주 간단하다
일반적인 이미지 삽입과 마찬가지로 <img src="◯◯◯">
의 URL 부분에 템플릿에 따라 임의의 URL을 추가하면 사용할 수 있습니다.
1. 치수 지정
Template
<img src="http://placehold.it/[width]x[height]">
Sample
<img src="http://placehold.it/500x200">
이것은 가장 기본적인 사용 방법이다.
URL의 [width] 및 [height]에 숫자를 추가하여 해당 크기의 이미지를 삽입할 수 있습니다.
2. 크기 지정(사각형) Template
<img src="http://placehold.it/[width]">
Sample
<img src="http://placehold.it/300">
그림width와height값이 같은 정사각형 그림을 삽입할 때 [width]값만 입력하면 생략할 수 있습니다.
3. 색상 지정 Template
<img src="http://placehold.it/300/[배경색]/[텍스트 색]]
sample
<img src="http://placehold.it/300/79b74a/fff">
16진수 태그의 컬러 코드를 삽입하여 배경색과 문자 색상을 수정할 수 있습니다.
표기 방법은 앞쪽은 배경색이고 뒤쪽은 문자색이다.
4. 텍스트 지정 Template
<img src="http://placehold.it/500/?text=텍스트 >
sample
<img src="http://placehold.it/300/?text=text">
기본적으로 이미지 크기만 표시되지만 임의의 문자로 수정할 수도 있습니다.
5. 서식 변경
Template<img src="http://placehold.it/300.[拡張子]">
sample<img src="http://placehold.it/300.jpg">
기본 확장자는 pg이며 jpeg로 변경할 수도 있습니다.
크기와 색상을 지정할 때는 사선으로 구분하지만 확장자 앞에는 점으로 구분됩니다.
6.모두
Template<img src="http://placehold.it/[width]x[height]/[背景色]/[文字色].[拡張子]/?text=[テキスト]">
Sample<img src="http://placehold.it/500x200/79b74a/fff.jpg/?text=Qiita">
1~5를 모두 합치면 이 같은 내용이다.
끝말
어때?URL의 일부만 변경하면 이미지를 삽입할 수 있습니다.이미지를 삽입할 시간은 없었지만 레이아웃을 확인하려는 경우나 손 옆에 불필요한 이미지를 가지고 있을 때도 유용한 서비스였고, 저 자신도 실제 개발에서 많은 배려를 받았습니다.
이 보도에는 Plaacehold도 있다.나는 it가 모두의 인코딩에 약간의 도움을 줄 수 있기를 바란다.
링크
placehold.it
영어는 placehold입니다.it의 사용 방법을 기록했습니다.
Reference
이 문제에 관하여(Plaacehold.it를 사용하여 가상 이미지를 순간적으로 준비합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/oreo/items/6bb6a7046e510503e3d4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<img src="http://placehold.it/300.[拡張子]">
<img src="http://placehold.it/300.jpg">
<img src="http://placehold.it/[width]x[height]/[背景色]/[文字色].[拡張子]/?text=[テキスト]">
<img src="http://placehold.it/500x200/79b74a/fff.jpg/?text=Qiita">
Reference
이 문제에 관하여(Plaacehold.it를 사용하여 가상 이미지를 순간적으로 준비합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/oreo/items/6bb6a7046e510503e3d4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)