iframe 태그 -3
이제부턴 약간의 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 태그를 사용하는데 그리 큰 영향을 주지 않더군요..쉽게 말해서 쓰나마나...^^;
태크매니아님의 홈에서 가져 온 것들입니다.
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
