일반 HTML5 강좌 5강 - HTML5 태그 - prograss,download

HTML5 강좌 5강 - HTML5 태그 - prograss,download

 

지난 강좌에 이어 태그를 연습해 보겠습니다.

 

*prograss 태그

prograss 태그는 meter 태그와 사용법이 흡사합니다.

 

 

 

 

 

속성값 설정에 따라 다운로드 상태가 바뀌죠.

 

 

 

 

하지만 HTML5 단독적으로 다운로드 상태의 변화를 표현할 수는 없습니다.

자바스크립트나, 제이쿼리 같은 스크립트 프로그래밍이 필요합니다.

 

*a 태그를 이용한 download

기존에는 a 태그를 이용하여 단지 페이지를 이동하였습니다.

하지만 HTML5 에서는 다운로드까지 가능합니다.

먼저 기존에 사용하던 a 태그 방식을 테스트 해보겠습니다.

 

 

 

 

 

위와 같이 코딩을 하고 실행을 해보죠~

 

 

 

 

 

그럼 위와같이 이미지가 나오고 클릭을 하면 이미지의 경로로 이동합니다.

 

 

 

 

 

이에 추가적으로 download 속성을 추가해 보겠습니다.

 

 

 

 

 

그리고 테스트를 해보죠~

 

 

 

 

 

붉은색 부분을 보면 다운로드가 완료된 것을 볼 수 있습니다.

(다운로드 경로는 브라우저의 설정 상태에 따라 상이합니다.)

 

 

(예제는 첨부파일에서 받을 수 있습니다.)

 

05.zip