본문 바로가기

HTML&CSS

하이퍼링크(<a>) "download" 속성으로 문서 파일 다운로드 하기

반응형

HTML 하이퍼 문서 구조에서 다른 문서를 연결해 해당 문서로 이동하도록 하는 하이퍼링크(<a>)는 파일을 다운로드 하는 용도로도 사용합니다.

단, 하이퍼링크 된 파일이 웹브라우저에서 열 수 있는 문서 파일인 경우(html, css, txt, pdf 등) 웹 브라우저는 문서를 열어 웹브라우저에 표시합니다.

문서 파일ㅇ르 웹 브라우저에 표시하지 않고 다운로드 하려면 하이퍼링크 속성 "download" 사용하면 됩니다.

 

<a href="style.css" download>다운로드</a>

 

이렇게 "download" 속성을 부여하면 style.css 파일을 웹브라우저에서 열지 않고 다운로드 합니다.

 

다운로드 되는 파일 이름을 바꾸려면 다음과 같이 "download" 속성 값으로 이름을 추가로 부여할 수 있습니다.

"download" 속성 값에 지정한 파일 파일 이름에 확장자가 없으면 원본 하이퍼링크의 확장자를 따라가며, 확장자까지 이름에 사용했으면 해당 파일명 그대로 다운로드가 됩니다.

 

<a href="style.css" download="cssfile">다운로드</a>

 

CORS(Cros-Origin Resource Sharing) 정책 변경에 따라 같은 웹사이트에 있는 파일만 "download" 속성으로 파일을 다운로드 할 수 있습니다.

반응형

닫기