HTML개발하다보면,
img 태그를 사용하면서 수많은 사이즈에 맞는 이미지를 미리 적용해둬야 할 때가 있다.
매번 그런 이미지를 편집해서 사용하는건 대단히 번거로운 일이다.
그럴 때 사용하기 좋은 방법이 있다.
사이즈별 더미? 샘플? 이미지를 제공해주는 사이트를 이용하는 것인데,
아래처럼 이미지 소스 경로를 설정해주면 된다.
<img src = "http://placehold.it/150X150" />
http://placehold.it/ 경로(url) 뒤에 원하는 가로X세로 사이즈를 설정해주면 된다.
즉, 아래 html 파일을 실행해보면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 사이즈별 이미지url 제공 사이트 활용 -->
<img src="http://placehold.it/150X150"/>
<img src="http://placehold.it/300X200"/>
</body>
</html>
아래와 같은 결과가 나온다.
아주 유용하게 img태그에 샘플 이미지를 미리 적용해 둘 수 있는 방법이다.
더 자세한 사용 방법은 아래 사이트를 참고
'개발(Development) > HTML, CSS' 카테고리의 다른 글
| [Meta태그 og] 카카오톡 링크 공유 미리보기 반영 안될 때, 캐시 초기화 방법 (0) | 2022.08.23 |
|---|---|
| [HTML] input:number 의 숫자 최대값, 최소값 설정 방법 (0) | 2021.07.07 |
| [HTML/CSS] 자식 태그의 margin-top이 부모 div에 적용되는 현상 해결 방법 (2) | 2021.06.07 |
| HTML Canvas 왜곡현상(선 두께 불일치, 비대칭, 비율 불균형 등) 해결 방법 (0) | 2021.03.28 |
| [HTML] number타입 INPUT입력창에 소수점 입력 허용 방법(step속성 활용) (0) | 2021.01.22 |
댓글