데이터 URI 스킴
(Data URI 스킴에서 넘어옴)
데이터 URI 스킴(data URI scheme)은 마치 외부 자원인 것처럼 웹 페이지의 데이터 인라인을 포함하는 방법을 제공하는 통합 자원 식별자(URI) 스킴이다. 파일 리터럴 또는 히어 도큐먼트의 일종이다. 이 기법은 이미지와 스타일 시트와 같은 구별된 요소들이 하나의 HTTP 요청 안에 페치(fetch)될 수 있게 하며, 복수의 HTTP 요청보다 더 효율적일 수 있으며[1] 문서 저장을 목적으로 이미지뿐 아니라 다른 멀티미디어 콘텐츠를 하나의 HTML 파일 안에 패키징하기 위한 여러 브라우저 확장 기능에 사용된다.[2][3] 2022년 기준으로 데이터 URI는 대부분의 주요 브라우저에서 완전하게 지원되며 인터넷 익스플로러에서는 부분적으로 지원된다.[4]
문법[편집]
data:[<media type>][;base64],<data>
사용 예시[편집]
HTML[편집]
<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />
CSS[편집]
ul.checklist li.complete {
padding-left: 20px;
background: white url('data:image/png;base64,iVB\
ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\
AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\
yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\
FTkSuQmCC') no-repeat scroll left top;
}
자바스크립트[편집]
window.open('data:text/html;charset=utf-8,' +
encodeURIComponent( // Escape for URL formatting
'<!DOCTYPE html>'+
'<html lang="en">'+
'<head><title>Embedded Window</title></head>'+
'<body><h1>42</h1></body>'+
'</html>'
)
);
SVG[편집]
<svg>
<image width="64" height="24" href="data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k="/>
</svg>
각주[편집]
- ↑ “Using Data URIs to Speed Up Your Website”. Treehouse Blog. 2014년 3월 27일.
- ↑ “SingleFile - Chrome Web Store”. 《Chrome Web Store》. 2018년 8월 25일에 확인함.
- ↑ “SingleFile – Add-ons for Firefox”. 《Firefox Add-ons》. 2018년 8월 25일에 확인함.
- ↑ Deveria, Alexis (July 2015). “Can I use...”. 2015년 8월 31일에 확인함.