HTML 또는 CSS에서 Base64 문자열 사용하기
Leibniz Li
@leibnizliHTML과 CSS 파일은 모두 Base64 데이터 문자열을 지원합니다. 아래 코드를 복사하고 "YOUR_BASE64_STRING"을 자신의 Base64 문자열로 바꾸세요.
HTML에서 Base64 사용하기
- JPEG:
<img src="data:image/jpeg;base64,YOUR_BASE64_STRING"/> - PNG:
<img src="data:image/png;base64,YOUR_BASE64_STRING"/> - GIF:
<img src="data:image/gif;base64,YOUR_BASE64_STRING"/> - SVG:
<img src="data:image/svg+xml;base64,YOUR_BASE64_STRING"/> - JAVASCRIPTS:
<script type="text/javascript" src="data:text/javascript;base64,YOUR_BASE64_STRING"></script> - CSS:
<link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR_BASE64_STRING"/>
CSS에서 Base64 사용하기
- 이미지:
.yourclass {background: url('data:image/jpeg;base64,YOUR_BASE64_STRING');} - 글꼴:
@font-face { font-family: 'yourfontname'; src: local("yourfontname"), url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING), url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff), url(data:application/font-woff2;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff2), url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING) format('truetype'); }