K_blueprint
HTML5로 '파일 다운로드 링크', '인라인 프레임' 만들기 본문
( 목 차 )
- 파일 다운로드 링크 만들기
- 인라인 프레임 만들기
- 인라인 프레임을 이용하여 원하는 웹 페이지 출력하기
1. 파일 다운로드 링크 만들기
- 파일 다운로드 링크를 만들기 위해서 <a> 태그의 'download'속성을 이용한다.
- download속성은 이미지, PDF, MP3, HTML파일 등 모든 파일을 다운로드할 수 있는 링크를 만든다.
- 아래는 '예시 사진 다운로드'라는 글자를 눌렀을 때 'example.png'가 다운 받아지도록 하는 예시 코드이다.
<a href="example.png" download>예시 사진 다운로드</a>
이를 이용해서 간단하게 네이버, 다음, 구글의 이미지를 다운받을 수 있는 링크가 존재하는 페이지를 만들어 보자
- 먼저 3개의 사진을 다운받고 바탕화면에 저장한 뒤 각각의 이름을 'naver', 'daum', 'google'로 저장한다.
- 이후 아래의 코드를 통해 페이지 및 다운로드 링크가 정상 작동하는지 확인한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>이미지 파일 다운로드 링크 만들기</title>
</head>
<body>
<h3>아래의 문장을 클릭하면 이미지를 받을 수 있습니다!</h3>
<hr>
<ul>
<li><a href="naver.png" download>네이버 로고 이미지 다운로드하기</a>
<li><a href="daum.png" download>다음 로고 이미지 다운로드하기</a>
<li><a href="google.png" download>구글 로고 이미지 다운로드하기</a>
</ul>
</body>
</html>
(사파리, 인터넷 익스플로러, 엣지 등에서는 다운로드 속성이 다르게 처리될 수 있기 때문에 확인해 보는 것이 좋다.)
2. 인라인 프레임 만들기
- <iframe> 태그를 이용하여 html페이지 내에서 다른 html페이지를 출력할 수 있다.
- <iframe> 태그를 이용해서 만들어진 윈도우를 인라인 프레임(inline frame)이라 한다.
- 아래는 250*200 픽셀 크기의 인라인 프레임을 만들고 iframe1.html을 출력하는 예시코드이다.
(먼저 주가 되는 html파일 1개와 해당 파일 내에서 출력될 iframe1.html파일 1개를 만들어둬야 한다.)
<!--주가 되는 html파일의 내용-->
<iframe src="iframe.html" width="200" height="150">
오류입니다. 이 글이 보인다면 <iframe>을 지원하지 않는 브라우저입니다.
</iframe><!--iframe1.html파일의 내용-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>iframe1.html 문서입니다!</h3>
</body>
</html>
3. 인라인 프레임을 이용하여 원하는 웹 페이지 출력하기
- 여러 개의 인라인 프레임을 가지는 html 페이지를 만드는 것도 가능하기에 파일 다운로드 기능이 있는 인라인 페이지와 전자신문 웹사이트로 연결되는 인라인 페이지 2개를 출력하는 페이지를 만들어 보자.
- 코드는 아래와 같다.
<!-- main html파일의 내용입니다.-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>2개의 인라인 프레임을 가진 페이지</title>
</head>
<body>
<iframe src="http://www.etnews.com" width="500" height="400"></iframe>
<iframe src="download.html" width="500" height="400"></iframe>
</body>
</html><!-- 다운로드 링크를 제공하는 download.html문서의 내용입니다.-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>이미지 파일 다운로드 링크 만들기</title>
</head>
<body>
<h3>아래의 문장을 클릭하면 이미지를 받을 수 있습니다!</h3>
<hr>
<ul>
<li><a href="naver.png" download>네이버 로고 이미지 다운로드하기</a>
<li><a href="daum.png" download>다음 로고 이미지 다운로드하기</a>
<li><a href="google.png" download>구글 로고 이미지 다운로드하기</a>
</ul>
</body>
</html>
- 마지막으로 출력된 페이지의 모습은 아래와 같다.
<iframe> 태그 이용 시 주의사항
- <iframe> 태그는 <body> 태그 내에서만 사용 가능
- src속성이 생략되면 비어있는 인라인 프레임이 생성된다.
- 인라인 프레임을 출력할 때 html 텍스트를 srdoc속성에 직접 작성할 수 있다.(즉, 추가적인 html파일을 만들지 않아도 직접 문자를 작성해서 출력 가능하게 할 수 있다. -> 단, src속성은 무시된다.)
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML5의 문서 구조화 (10) | 2024.11.08 |
|---|---|
| 미디어(오디오, 비디오) 삽입하기 (4) | 2024.11.07 |
| HTML5로 고급 문서 만들기 (0) | 2024.02.27 |
| HTML5 기본 문서 만들기 (0) | 2024.02.21 |
| 웹 프로그래밍과 HTML5의 개요 (0) | 2024.02.19 |
