예제 2-22. 2개의 인라인 프레임을 가진 웹 페이지. 예제 2-23. <iframe>으로 2개의 신문 사이트 출력하기
WEB/HTML5-CONCEPT 2017. 11. 4. 18:39 |1 2 3 4 5 6 7 | <iframe src="URL" srcdoc="HTML 문서 텍스트" // 직접 HTML 태그로 작성된 텍스트로서 출력될 내용. name="윈도우 이름" // 프레임 윈도우의 이름. 다른 웹페이지에서 target 속성 값으로 사용. width="프레임의 폭" height="프레임의 높이"> iframe 태그를 다루지 않는 브라우저에 의해 대신 출력되는 텍스트 </iframe> | cs |
<iframe> 사용 시 주의 사항.
1. <iframe> 태그는 <body> 태그 내에서만 사용된다.
2. src 속성이 생략되면 브라우저에 <ifame> 영역이 만들어지기는 하지만 빈 상태로 존재한다.
3. 인라인 프레임이 출력할 HTML 텍스트를 srcdoc 속성에 직접 작성할수 있다. srcdoc가 있으면 src 속성은 무시된다.
4. 인라인 프레임 안에 또 다른 인라인 프레임을 중첩하여 만들 수 있다.
3. src에 지정된 iframe.html이 출력되지 않고, srcdoc 속성에 작성된 HTML 텍스트가 출력되는 사례.
1 2 3 4 5 | <h3>srcdoc에 HTML 문서 작성</h3> <hr> <iframe src="iframe1.html" width="200" height="100" srcdoc="<html><head></head><body>hello</body></html>"> </iframe> | cs |
예제 2-22. 2개의 인라인 프레임을 가진 웹 페이지
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe을 가지는 웹 페이지</title> </head> <body> <h3>2 개의 <iframe>을 가집니다.</h3> <hr> <iframe src="iframe1.html" width="200" height="150"> </iframe> <iframe src="iframe2.html" width="200" height="100"> </iframe> </body> </html> | cs |
iframe1.html // 첫번째 iframe
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <title>첫번째 iframe</title> </head> <body> <h4>첫번째 iframe</h4> </body> </html> | cs |
iframe2.html // 두번째 iframe
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <title>두번째 iframe</title> </head> <body> <h4>번째 iframe</h4> </body> </html> | cs |
예제 2-23. <iframe>으로 2개의 신문 사이트 출력하기
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iframe을 이용한 신문 사이트</title></head> <body> <h3>2 개의 신문 사이트입니다.</h3> <hr> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 2-25. <video> 태그로 비디오 삽입, <source> 태그 (0) | 2017.11.04 |
|---|---|
| 예제 2-24. target 속성으로 프레임 윈도우 활용 (0) | 2017.11.04 |
| 예제 2-21. 파일 다운로드 링크 만들기 (0) | 2017.11.04 |
| 예제 2-20. 앵커로 이동하는 링크 만들기 (0) | 2017.11.04 |
| 예제 2-19. 링크의 target 속성 활용 (0) | 2017.11.04 |