HTML의 <area> 요소에서 download 속성은 하이퍼링크를 클릭했을 때 다운로드될 파일의 이름을 지정하는 데 사용됩니다. 이미지 맵의 특정 영역을 클릭하면 해당 파일이 지정된 이름으로 저장되도록 설정할 수 있습니다.
download 속성 기본 문법
<area download="파일명">
여기서 '파일명'은 다운로드 시 저장될 파일의 이름입니다. 값을 생략하면 원본 파일 이름 그대로 저장됩니다.
예제: 이미지 맵에 download 속성 적용하기
아래 예제는 <area> 요소에 download 속성을 실제로 적용한 코드입니다.
<!DOCTYPE html> <html> <body> <h2>Learning</h2> <p>Learn these technologies with ease....</p> <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/> <map name = "tutorials"> <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" download="perl" /> <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" download="html" /> <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial" href = "/php/index.htm" target = "_blank" download="php" /> </map> </body> </html>
실행 결과
위 코드를 실행하면 이미지 맵이 표시되고, 각 영역(Perl, HTML, PHP)을 클릭할 수 있습니다.
예를 들어 이미지에서 'PERL' 영역을 클릭하면 해당 파일이 아래와 같이 다운로드됩니다.
코드 분석
위 예제에서 download 옵션은 <area> 요소의 download 속성을 통해 활성화했습니다.
<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" download="perl" />
여기서 download 속성 값으로 "perl"이 지정되어 있으며, 이 값이 곧 다운로드되는 파일의 이름이 됩니다.
download="perl"
참고 사항
download 속성은 같은 출처(same-origin)의 URL에 대해서만 작동합니다. 다른 도메인의 리소스에는 브라우저 보안 정책상 적용되지 않으므로, 실무에서 활용할 때 이 점을 유의해야 합니다.