HTML에서 다운로드 링크를 만드는 것은 생각보다 간단합니다. 핵심은 <a>(앵커) 태그에 download 속성을 추가하는 것입니다. 이 속성이 지정되면 브라우저는 링크된 파일을 열지 않고 사용자의 기기에 바로 다운로드하도록 안내합니다.
download 속성이란?
<a> 태그의 download 속성은 HTML5에서 도입된 기능으로, href로 연결된 리소스를 탐색하는 대신 다운로드하도록 브라우저에 지시합니다. 속성 값으로 파일 이름을 지정하면 저장될 때 그 이름으로 저장되며, 값을 비워두면 원본 파일 이름이 그대로 사용됩니다.
예제 코드
아래는 이미지를 클릭하면 해당 이미지가 다운로드되도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>다운로드 링크 예제</h1>
<a href="https://i.picsum.photos/id/225/800/800.jpg" download>
<img src="https://i.picsum.photos/id/225/800/800.jpg" style="width: 300px; height: 300px;">
</a>
<h2>위 이미지를 클릭하면 다운로드됩니다</h2>
</body>
</html>코드 설명
- <a href="..." download>: 이미지 파일 경로를 href로 지정하고, download 속성을 추가하여 클릭 시 다운로드가 실행되도록 설정했습니다.
- <img>: 앵커 태그 내부에 이미지를 배치하여, 텍스트 대신 이미지 자체가 클릭 가능한 다운로드 버튼 역할을 하도록 했습니다.
- style: 인라인 스타일로 이미지 크기를 300×300픽셀로 조절해 화면에 보기 좋게 표시했습니다.
실행 결과
위 코드를 브라우저에서 실행하면 300×300 크기의 이미지가 화면에 표시됩니다. 사용자가 해당 이미지를 클릭하면 페이지가 이동하지 않고, 이미지 파일이 즉시 로컬 컴퓨터로 다운로드됩니다.
참고 사항
download 속성은 동일 출처(same-origin)의 URL에 대해서만 작동합니다. 즉, 다른 도메인의 파일에는 보안 정책상 적용되지 않을 수 있으므로, 외부 리소스를 다운로드 링크로 제공하려면 서버 측에서 Content-Disposition 헤더를 설정하는 방법을 함께 고려하는 것이 좋습니다. 또한 파일 이름을 직접 지정하고 싶다면 download="파일명.jpg"처럼 속성 값에 원하는 이름을 넣으면 됩니다.