목록

⑤ ifram 응용
 이제부턴 약간의 iframe 을 이용해서 홈페이지에서 멋찌게 사용할 수 있는 방법을 알려드리도록 하겠습니다. 
 <body bgcolor="cornflowerblue">
 <font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br>
 <iframe src="https://tagmania.net/html/m_iframe2ex2.htm" width="422" height="400" scrolling="auto" align="left"></iframe>

 자..위의 예제에서는 스크롤 속성을 auto 로 설정해서 iframe 창 안의 내용이 iframe 창의 범위를 초과했을때 자동적으로 스크롤바가 생기게 했습니다. 그럼 여기서 테이블태그와 링크태그를 이용해서 간단한 메뉴와 내용출력부분을 만들어 보도록 하겠습니다. 테이블태그와 링크태그는 배웠으니간 당근 아시겠죠? ^^

<style>
<!--
 td { font-size:10pt; font-family:돋움체;}
-->
</style> 
<body bgcolor="cornflowerblue">
 <div align="center">
 <font size="3" face="돋움체">아래는 iframe 예제입니다.</font><br><br>
 <table border="0" width="500" cellpadding="0" cellspacing="0">
 <tr>
  <td width="423">
 <iframe src="https://tagmania.net/html/m_iframe2ex2.htm" width="423" height="400" scrolling="auto" align="left" name="ses"></iframe>
 </td>
 <td align="center">
  <table border="1" cellpadding="0" cellspacing="0" bordercolorlight="black" bordercolordark="white" width="77" height="100%" align="center">
  <tr><td align="center"><a href="../img/ses1.gif" target="ses">사진1</a></td></tr>
  <tr><td align="center"><a href="../img/ses2.gif" target="ses">사진2</a></td></tr>
  <tr><td align="center"><a href="../img/ses3.gif" target="ses">사진3</a></td></tr>
  <tr><td align="center"><a href="../img/ses4.gif" target="ses">사진4</a></td></tr>
  <tr><td align="center"><a href="../img/ses5.gif" target="ses">사진5</a></td></tr>
  <tr><td align="center"><a href="../img/ses6.gif" target="ses">사진6</a></td></tr>
 </table>
</td>
</table><br>
예제 ses 이미지는 교육목적을 위해 https://www.smtown.com 에서 발췌했습니다.
</div>

 예제소스가 조금 길었네요 ^^; 지금까지 강좌 충실히 들으신 분이라면 소스만 천천히 봐도 이해를 하실 수 있을 겁니다. 맨처음 스타일시트 부분은 테이블안의 텍스트크기와 글자체를 설정해준건데 아직 신경쓰실 필요는 없구요.^^ 그 밑에 body 부분부터 보시면 1열 2행의 테이블을 만들어서 왼쪽에는 iframe 창을 넣었구요... 그리고 왼쪽에는 또 다시 작은 테이블을 넣어서 메뉴를 만들었습니다 .여기서 가장 중요한 것은 iframe 창과 메뉴링크 간의 name 과 target 설정을 제대로 해주어야 메뉴의 링크를 클릭하면 지정된 iframe 창에 내용이 뜬다는 것입니다.  iframe 태그 끝에 보면 name="ses" 라고 넣어주고 각각의 링크태그 부분에 target="ses" 를 넣어주었습니다. 이건 링크태그에서도 배웠듯이 ses 라는 이름(name)이 붙여진 iframe 창에 해당링크의 내용을 표시 해주라는 의미입니다. 이해되시죠? ^^; 이해 못하시는 분은 링크태그부분 다시 보고 오시길...^^
 위의 예제를 다 이해하시면 iframe을 이용한 홈피 꾸미기는 왠만한 건 다 하실 수 있습니다. iframe 태그는 좀 특이해 보여도 그 원리는 간단하거든요 ^^
  아..그리고 marginwidth/marginheight 속성의 경우 제가 테스트 해본결과 iframe 태그를 사용하는데 그리 큰 영향을 주지 않더군요..쉽게 말해서 쓰나마나...^^; 

이 게시물을