본문 바로가기
코딩

html_iframe 활용하기(파일 인크루드 include)

by 행운월드 2020. 11. 11.
반응형

 

 

이번 포스팅은, 지난번에 iframe에 대한 내용의 후속편인 iframe 활용하기 입니다.

 

iframe은 html문서내에, 다른 html문서를 특정한 부분에 보여지게 하는 기능입니다.

 

index파일 하나만 작성하건, 파일의 길이가 짧을 경우에는 굳이 iframe을 사용할 필요가 없습니다.

 

하지만, 우리들이 html코딩을 하다보면, 항상 index파일의 길이가 짧거나, 문서 하나로 사이트를 만들 수 없다는것을 알게 됩니다.

 

그럴때는 파일의 수정을 용이하게 하고, 좀 더 효율적인 업무작업을 하기 위해서 include방식인 iframe을 html에서는 사용하게 됩니다.

 

예를 들어서, 사이트 하나가 만들어질때 top의 영역, side영역, body영역, footer영역으로 나누어서 관리하려고 할때, iframe을 편리하게 사용됩니다.

 

만약에, top&side&body&footer가 하나의 파일이고 길이가 매우 길었다면, 나중에 텍스트 하나 수정하기 위해서 index파일을 열고 수정하기에는 효율적이지 않습니다.

 

 

iframe를 활용해서 html 문서내에, 다른 웹페이지를 넣는 방법 이외에, php언어에서 사용하는 include가 있는데, html코드내부에 아래와 같이 넣으면 됩니다.

<?php include '파일네임.php';?>

include는 제대로 표현되는 것을 확인하려면, 호스팅이 별도로 필요하기때문에 나중에 다루도록 하겠습니다.

 

 

iframe을 여러개 사용하여, 파일들을 불러오는 방법에 대해서 간단하게 소개하도록 하겠습니다.

 

우선, 아래의 코드블럭을 살펴봐 주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>index_iframe</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 50px 50px; padding: 0; background: #eeeeee; width: 300px;text-align: center; }
  iframe {padding: 0; margin: 0; float: left;}
  </style>
</head>
<body>

<h3>iframe 활용하기</h3>

<iframe src="top.html" width="300px" height="100px" frameborder="0" scrolling="no"></iframe>
<iframe src="side.html" width="100px" height="300px" frameborder="0" scrolling="no"></iframe>
<iframe src="body.html" width="200px" height="300px" frameborder="0" scrolling="no"></iframe>
<iframe src="footer.html" width="300px" height="100px" frameborder="0" scrolling="no"></iframe>

</body>
</html>

위의 코드가 표현된 결과 화면은 아래의 링크를 클릭하면, 확인해 볼 수 있습니다.

index_iframe 결과화면 확인하기 ▶

 

index_iframe

 

hhgongjang.cafe24.com

확인해 보면, 아래와 같은 결과화면이 나오는 것을 알 수 있습니다.

html파일들을 모두, 인크루드한 최종 index파일에서는 위의 이미지와 같은 화면으로 나오지만, 파일들을 각각 확인해 보았을 경우에는 아래와 같이 나옵니다.

 

 

* 우선, 각각 파일의 코드를 확인해 주세요.

 

* top.html의 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>top</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 0; padding: 0; background: #ffcfcf;text-align: center; }
  </style>
</head>
<body>

<h3>top</h3>

</body>
</html>

 

top.html 확인해 보기 ▶

 

top

 

hhgongjang.cafe24.com

 

* side.html의 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>side</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 0; padding: 0; background: #ffc56d;text-align: center; }
  </style>
</head>
<body>

<h3>side</h3>


</body>
</html>

 

side.html 확인해 보기 ▶

 

side

 

hhgongjang.cafe24.com

 

* body.html의 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>body</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 0; padding: 0; background: #68eedc;text-align: center; }
  </style>
</head>
<body>

<h3>body</h3>
<a href="https://hhwd.tistory.com/" target="_top"><h4>행운월드 가기</h4></a>

</body>
</html>

 

body.html 확인해 보기 ▶

 

body

 

hhgongjang.cafe24.com

 

● body.html의 코드를 보면, <a>태그가 들어가 있습니다. iframe을 활용해서 사이트를 불러올때는 <a>태그의 target를 "_top"로 해야 일반적인 사이트에서의 <a>태그처럼 보여집니다. 다른 target를 사용할때는 어떻게 표현되는지 직접 코딩해서 테스트해 볼것을 추천드립니다. 메모장을 활용해서 한번 해보세요. 필자가 지난번에 <a>태그에 대해서 포스팅한 내용을 참고해 보세요. "_top"이외에 어떤 target를 사용할때 iframe내부에서만 링크가 보여지게 되는지를 직접 확인해 보세요.

 

 

* footer.html의 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>footer</title>
  <meta charset="UTF-8">
  <meta name="description" content="행운공장이 블로그를 하는 사이트">
  <meta name="keywords" content="로또예상번호, html, 코딩, 앱, 블로그">
  <meta name="author" content="행운공장, 행운월드">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
  body {margin: 0; padding: 0; background: #ff69bb;text-align: center; }
  </style>
</head>
<body>

<h3>footer</h3>

</body>
</html>

 

footer.html 확인해 보기 ▶

 

footer

 

hhgongjang.cafe24.com

 

* 위의 4개의 html코드들을 확인해 보면, 파일들을 인트루드해서 모아놓은 index.html화면과는 차이가 있다는 것을 알 수 있습니다. 각각의 html코드로 표현된 파일들을 최종적으로 합쳤을때의 화면에 어떻게 표현될지를 생각해서, iframe코드를 잘 활용하면 매우 유용하게 사용할 수 있습니다.

 

 

궁금한 것이 있다면, 댓글에 남겨주세요.

 

 

저작자표시

'코딩' 카테고리의 다른 글

스크래치_피아노(모바일)  (0) 2020.11.25
html_input_button과 <button>  (0) 2020.11.18
html_iframe  (0) 2020.11.04
html_span 태그  (0) 2020.10.28
html_div 태그  (0) 2020.10.21

관련글



티스토리툴바