본문 바로가기
Web 개발/Etc

Placehold.co - 임시 이미지 온라인 서비스

IT_마스터 2025. 2. 22. 10:58
  • Placehold.co 소개
  • 사용 방법
  • 작성 방법
    • 1. 크기 지정
    • 2. Retina 고해상도 이미지
    • 3. 배경색&텍스트색
    • 4. 확장자
    • 5. 텍스트 입력
    • 6. 폰트
  • 데모 화면
목표
목표 설정웹 개발에서 임시 이미지가 필요할 때, 사용할 수 있는 임시 이미지 온라인 서비스인 Placehold.co 에 대해 알아보자

# Placehold.co 소개

 

Placehold | A simple, fast and free image placeholder service

 

placehold.co

  • 임시 이미지를 생성할 수 있는 온라인 서비스
  • 경로와, url 파라미터로 색상, 텍스트, 크기 등을 설정하여 빠르게 사용자 정의 이미지를 사용할 수 있다

# 사용 방법

  • 이미지 경로에 placehold URL 작성

[HTML]

<img src="placehold URL">

 

[CSS]

.image{
  background-image: url('placehold URL');
}

# 작성 방법

템플릿 ( [ ] : 선택 항목 )

https://placehold.co/너비x높이[@배수x][/배경색/텍스트색][.확장자]?[text=입력\n텍스트]&[font=폰트명]

# 1. 크기 지정

https://placehold.co/300x200@2x/orange/white.png?text=300x200\nPNG&font=Playfair Display
  • 필수값, 최소 이미지 크기는 10px x 10px이다
  • 종류 : 정사각형, 직사각형
  • Example
    • 정사각형 : 하나의 크기만 작성 ▷ https://placehold.co/200
    • 직사각형 : '너비x높이'로 작성 ▷ https://placehold.co/200x300

 

# 2.  Retina 고해상도 이미지

https://placehold.co/300x200@2x/orange/white.png?text=300x200\nPNG&font=Playfair Display
  • 확장자 기본이 svg 이기 때문에 png, jpeg, gif의 확장자를 반드시 설정해줘야 한다
  • 작성 위치 : 크기 지정 영역 뒷부분
  • 종류 : 2배수, 3배수
  • Example
    • 2배수 : '@2x' 작성 ▷ https://placehold.co/200@2x/png
    • 3배수 : '@3x' 작성 ▷ https://placehold.co/200@3x/skyblue/white.jpg?text=JPG

 

# 3. 배경색&텍스트색

https://placehold.co/300x200@2x/orange/white.png?text=300x200\nPNG&font=Playfair Display
  • ' 배경색 / 텍스트색 ' 순으로 작성
  • 종류 : 16진수값, CSS명, transparent(배경색만 가능)
  • Example
    • 16진수값 ▷ https://placehold.co/200/FFBC0F/fff
    • CSS 명▷ https://placehold.co/200/skyblue/white
    • 배경 투명색  ▷ https://placehold.co/200/transparent/red

 

# 4. 확장자

https://placehold.co/300x200@2x/orange/white.png?text=300x200\nPNG&font=Playfair Display
  • 작성 방법 : ① . 확장자  ② / 확장자
  • 작성 위치 : 경로 끝
  • 확장자를 작성하지 않으면 svg 확장자로 설정된다
  • 종류 : SVG (기본), PNG, JPG, GIF, WebP, AVIF
  • Example
    • SVG (기본) ▷ https://placehold.co/200
    • PNG ▷ https://placehold.co/200@2x.png
    • JPG ▷ https://placehold.co/200gray/white/jpg?text=TEXT

 

# 5. 텍스트 입력

https://placehold.co/300x200@2x/orange/white.png?text=300x200\nPNG&font=Playfair Display
  • 작성 위치 : 파라미터 (파라미터 시작 : ? , 파라미터 구분 : & )
  • text 파라미터에 입력 텍스트를 입력한다 ( ? text = 입력 텍스트 & )
  • 줄바꿈 : \n

 

# 6. 폰트

https://placehold.co/300x200@2x/orange/white.png?text=300x200\nPNG&font=Playfair Display
  • 작성 위치 : 파라미터 (파라미터 시작 : ? , 파라미터 구분 : & )
  • font 파라미터에 폰트 종류를 입력한다 ( ? text = 입력 텍스트 & )
  • 종류 : Lato, Lora, Montserrat, Noto Sans, Open Sans, Oswald, Playfair Display, Poppins, PT Sans, Raleway, Roboto, Source Sans Pro

공식 홈페이지 中 FONT

 

# 데모 화면

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Placeholod.co - 임시 이미지 온라인 서비스</title>
  <style>
    *{margin: 0; padding: 0; box-sizing: border-box;}
    h1{text-align: center; line-height: 3;}
    .wrap{display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1500px; margin: 0 auto; border: .5px solid #000;}
    .wrap > div { border: .5px solid #000; width: min-content; width: 100%;}
    .wrap > div > h4 {border-bottom: 1px solid #000;padding: 6px 12px; background-color: #333; color: #fff; font-size: 16px; font-weight: 400;}
    .wrap > div > p{ background-color: #eee; padding: 6px 12px; border-bottom: 1px solid #999; height: 3.8em;}
    .wrap > div > .img{padding: 12px; display: flex;align-items: center; justify-content: center;}
  </style>
</head>
<body>
<h1>Placehold.co - IMAGE</h1>
<div class="wrap">
  <div>
    <h4>[크기] 직사각형</h4>
    <p>placehold.co/200x300</p>
    <div class="img"><img src="https://placehold.co/200x300"></div>
  </div>
  <div>
    <h4>[크기] 정사각형</h4>
    <p>placehold.co/200</p>
    <div class="img"><img src="https://placehold.co/200"></div>
  </div>
  <div>
    <h4>[Retina] 고해상도 이미지</h4>
    <p>placehold.co/100@2x/gold/white/png</p>
    <div class="img"><img src="https://placehold.co/100@2x/gold/white/png"></div>
  </div>
  <div>
    <h4>[Retina] 고해상도 이미지 (+기타)</h4>
    <p>placehold.co/100@3x/skyblue/white.jpg?text=JPG 100x100</p>
    <div class="img"><img src="https://placehold.co/100@3x/skyblue/white.jpg?text=JPG 100x100"></div>
  </div>
  <div>
    <h4>[색] 16진수</h4>
    <p>placehold.co/200/FFBC0F/fff</p>
    <div class="img"><img src="https://placehold.co/200/FFBC0F/fff"></div>
  </div>
  <div>
    <h4>[색] CSS명</h4>
    <p>placehold.co/200/skyblue/white</p>
    <div class="img"><img src="https://placehold.co/200/skyblue/white"></div>
  </div>
  <div>
    <h4>[색] 배경 투명색 (텍스트는 불가능)</h4>
    <p>placehold.co/200/transparent/red</p>
    <div class="img"><img src="https://placehold.co/200/transparent/red"></div>
  </div>
  <div>
    <h4>[확장자] 확장자 지정 1 - .</h4>
    <p>placehold.co/200.svg</p>
    <div class="img"><img src="https://placehold.co/200.svg"></div>
  </div>
  <div>
    <h4>[확장자] 확장자 지정 2 - / </h4>
    <!-- png, svg(기본), jpg, gif -->
    <p>placehold.co/200/gray/white/png?text=PNG</p>
    <div class="img"><img src="https://placehold.co/200/gray/white/png?text=PNG"></div>
  </div>
  <div>
    <h4>[텍스트] 텍스트 기본 (only Eng)</h4>
    <p>placehold.co/200?text=Hello\nWorld</p>
    <div class="img"><img src="https://placehold.co/200?text=Hello\nWorld"></div>
  </div>
  <div>
    <h4>[텍스트] 텍스트 (+ 색)</h4>
    <p>placehold.co/200/orange/white?text=Hello</p>
    <div class="img"><img src="https://placehold.co/200/orange/white?text=Hello"></div>
  </div>
  <div>
    <h4>[텍스트] 텍스트 폰트</h4>
    <p>placehold.co/200/green/white?text=Hello&font=Playfair Display</p>
    <div class="img"><img src="https://placehold.co/200/green/white?text=Hello&font=Playfair Display"></div>
  </div>
</div>
</body>
</html>

'Web 개발 > Etc' 카테고리의 다른 글

README.md 파일 문법  (0) 2025.03.10

'Web 개발/Etc' Related Articles

티스토리툴바