728x90
반응형
1. a태그에 파일연결
- a태그에 파일을 바로 연결하면 그것을 페이지로 열려고 합니다.
- 특히 pdf파일을 보도록 하겠습니다.
- 예시로 제네시스 카달로그로 해보도록 하겠습니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
</head>
<body>
<h1>
<a href="genesis-gv70-catalog-kor-202106.pdf">제네시스 GV70 카달로그</a>
</h1>
</body>
</html>
## 코드 결과
- 위의 움짤처럼 파일은 다운로드 받는 것이 아니라 크롬 뷰어로 열립니다.
2. a태그의 download속성
- a태그에 download속성이 있으면 링크가 가르키는 파일을 다운로드 합니다.
- 마치 마우스 오른쪽버튼을 클릭하고 [다른 이름으로 링크 저장]을 실행하는 것과 같습니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM</title>
</head>
<body>
<h1>
<a href="genesis-gv70-catalog-kor-202106.pdf" download>제네시스 GV70 카달로그</a>
</h1>
</body>
</html>
## 코드 결과
- 클릭 시 파일로 다운로드 되는 것을 확인할 수 있습니다.
** 최근 서버에 올려서 테스트하는게 아니면 다운받아지지 않더라고요. 서버에 올려서 테스트해보세요.
728x90
반응형
'웹언어 > HTML5' 카테고리의 다른 글
| [HTML5] 23강 data-* 사용자 정의 속성 - 오쌤의 니가스터디 (3) | 2022.11.16 |
|---|---|
| [HTML5] 22강 이미지맵(Image Map) - 오쌤의 니가스터디 (7) | 2021.08.24 |
| [HTML5] 20강 playsinline - iOS비디오정책 (0) | 2021.02.12 |
| [HTML5강좌] 19강 tabindex태그속성 - 오쌤의 니가스터디 (0) | 2020.12.03 |
| [HTML기초문법] 18강 a태그의 링크의 종류 - 오쌤의 니가스터디 (0) | 2020.11.02 |
