웹 페이지에서 링크를 클릭했을 때 해당 파일이 브라우저에서 열리지 않고 바로 다운로드되도록 만들고 싶다면, HTML5에서 제공하는 download 속성을 사용하면 됩니다. 이 속성은 <a> 태그에 추가하며, 속성 값에 다운로드될 파일의 이름을 지정할 수 있습니다.
download 속성의 기본 문법
download 속성은 다음과 같은 형태로 사용합니다.
<a href="파일경로" download="저장될_파일명">다운로드 링크</a>
속성 값을 생략하면 원본 파일명 그대로 저장되며, 값을 지정하면 지정한 이름으로 파일이 저장됩니다. 예를 들어 이미지 파일이라면 "image.jpg"처럼 확장자를 포함한 이름을 넣어주는 것이 좋습니다.
실전 예제
아래 예제는 이미지를 화면에 표시하는 동시에, 이미지를 클릭하면 해당 파일이 다운로드되도록 구현한 코드입니다.
<!DOCTYPE html> <html> <body> <h3>Java의 if문</h3> <p>아래 이미지는 <b>Java의 if문(if-statement)</b> 개념을 설명합니다. (클릭하면 다운로드됩니다)</p> <a href="https://www.tutorialspoint.com/java/images/if_statement.jpg" download> <img border="0" src="https://www.tutorialspoint.com/java/images/if_statement.jpg" alt="Java" width="400" height="450"> </a> </body> </html>
위 코드에서는 <a> 태그 안에 <img> 태그를 넣어 이미지 자체가 다운로드 버튼 역할을 하도록 했습니다. 사용자가 이미지를 클릭하면 브라우저가 새 창으로 이미지를 여는 대신 파일을 즉시 내려받습니다.
주요 특징 및 주의 사항
- 동일 출처(Same-origin) 제한: 최신 브라우저에서는 보안 정책상 같은 도메인 내의 리소스나 blob:, data: URL에만 download 속성이 적용됩니다. 외부 도메인의 파일에는 무시될 수 있습니다.
- 파일명 지정 가능: download="원하는이름.ext" 형태로 저장될 파일명을 자유롭게 변경할 수 있습니다.
- 브라우저 호환성: Chrome, Firefox, Edge 등 주요 브라우저에서 지원하지만, 일부 모바일 브라우저나 구형 브라우저에서는 동작하지 않을 수 있습니다.
이처럼 download 속성 하나만으로 별도의 서버 스크립트 없이 간편하게 다운로드 기능을 구현할 수 있으므로, 이미지·PDF·텍스트 파일 등을 제공하는 웹 페이지에서 유용하게 활용해 보세요.