16 ÇÁ·¹ÀÓ(frame) |
ÀÌÀü¼ø¼ | ´ÙÀ½¼ø¼ | ¸ñ·Ï | ¿¤·¹¸àÆ® | ¾ÖÆ®¸®ºäÆ® | »öÀÎ | ¿ø¹®¿¬°á |
HTML ÇÁ·¹ÀÓÀº Á¦ÀÛÀÚ°¡ º¹¼ö·Î º¸ÀÌ°Ô ¹®¼¸¦ Ç¥Çö ÇÒ ¼ö ÀÖ°Ô Çϴµ¥, ÀÌ´Â µ¶¸³ µÈ windows ¶Ç´Â ºÎºÐ â(subwindows)ÀÌ µÉ ¼ö ÀÖ´Ù. º¹¼ö âÀº ¼³°èÀÚ¿¡°Ô ¾î¶² Á¤º¸°¡ º¸À̵µ·Ï À¯ÁöÇϸé¼, ´Ù¸¥ âÀ» ±¼¸®°Å³ª(scroll) ´ëü ÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù.
¿¹¸¦ µé¾î, °°Àº window ¾È¿¡¼, ÇÑ ÇÁ·¹ÀÓÀº °íÁ¤ µÈ(static) ±¤°í º£³Ê(banner)¸¦ º¸ÀÌ°í, µÎ¹ø °´Â Ç×ÇØ(navigation) ¸Þ´º¸¦ º¸ÀÌ°í, ¼¼¹ø °¿¡¼´Â º» ¹®¼¸¦ ±¼¸®°Å³ª µÎ¹ø° ÇÁ·¹ÀÓÀÇ Ç×ÇØ¿¡ µû¶ó ³»¿ëÀ» ¹Ù²Ù¾î °¥ ¼ö ÀÖ´Ù. °£´ÜÇÑ ÇÁ·¹ÀÓ ¹®¼ÀÇ ¿¹¸¦ µé¾îº¸¸é:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>°£´ÜÇÑ ÇÁ·¹ÀÓ ¹®¼</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.gif"> </FRAMESET> <FRAME src="contents_of_frame3.html"> <NOFRAMES> <P>ÀÌ ÇÁ·¹ÀÓ¼¼Æ®(frameset)´Â ´ÙÀ½ ¹®¼µéÀ» Æ÷ÇÔÇÑ´Ù. <UL> <LI><A href="contents_of_frame1.html">¸ÚÀÖ´Â ¸ñÂ÷</A> <LI><IMG src="contents_of_frame2.gif" alt="¸ÚÀÖ´Â À̹ÌÁö"> <LI><A href="contents_of_frame3.html">´Ù¸¥ ³»¿ëÀÇ ¸ÚÀִ ǥÇö</A> </UL> </NOFRAMES> </FRAMESET> </HTML>
ÀÌ´Â ´ÙÀ½°ú °°Àº ÇÁ·¹ÀÓÀ» Çü¼º ÇÒ °ÍÀÌ´Ù.
--------------------------------------- | | | | | | | Frame 1 | | | | | | | | |---------| | | | Frame 3 | | | | | | | | | | | Frame 2 | | | | | | | | | | | | | | ---------------------------------------
¸¸ÀÏ »ç¿ëµµ±¸°¡ ÇÁ·¹ÀÓ(frame)À» Ç¥½Ã ÇÒ ¼ö ¾ø°Å³ª Ç¥½ÃÇÏÁö ¾Êµµ·Ï ±¸¼ºµÇ¾î ÀÖÀ¸¸é, NOFRAMES ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀ» Ç¥Çö ÇÒ °ÍÀÌ´Ù.
ÇÑ HTML ¹®¼°¡ ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼¶ó ºÒ¸®¿ì´Â ÇÁ·¹ÀÓ ¹è¿À» Á¤ÀÇÇϸé, ÇÁ·¹ÀÓÀÌ ¾ø´Â HTML ¹®¼¿Í´Â ÀÛ¼º(makeup) ¹æ½ÄÀÌ ´Ù¸£´Ù. Ç¥ÁØ ¹®¼´Â ÇϳªÀÇ HEAD Ç׸ñ°ú ÇϳªÀÇ BODY¸¦ °®´Â´Ù. ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼´Â ÇϳªÀÇ HEAD¿Í BODY ÀÚ¸®¿¡ ±× ´ë½Å ÇϳªÀÇ FRAMESET¸¦ °®´Â´Ù.
¹®¼ÀÇ FRAMESET Ç׸ñÀº »ç¿ëµµ±¸ÀÇ ÁÖ µÈ window¿¡ âµéÀÇ ¹èÄ¡¸¦ ÁöÁ¤ÇÑ´Ù. Ãß°¡ÀûÀ¸·Î, FRAMESET Ç׸ñÀº ÇÁ·¹ÀÓÀ» Áö¿øÇÏÁö ¸øÇÏ´Â »ç¿ëµµ±¸ ¶Ç´Â ÇÁ·¹ÀÓÀÌ Ç¥½ÃµÇÁö ¾Êµµ·Ï ±¸¼º µÈ °æ¿ì, ´ëü(alternate) ³»¿ëÀ» Á¦°øÇϱâ À§ÇÏ¿© NOFRAMES ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔ ÇÒ ¼ö ÀÖ´Ù.
Á¤»óÀûÀ¸·Î BODY ¿¤·¹¸àÆ®¿¡ À§Ä¡ÇÏ´Â ¿¤·¹¸àÆ®µéÀº ù¹ø° FRAMESET ¿¤·¹¸àÆ® ÀÌÀü¿¡ ³ª¿ÀÁö ¸»¾Æ¾ßÇÑ´Ù. ±×·¸Áö ¾ÊÀ¸¸é FRAMESET´Â ¹«½Ã µÉ °ÍÀÌ´Ù.
<![ %HTML.Frameset; [ <!ELEMENT FRAMESET - - ((FRAMESET | FRAME)+ & NOFRAMES?) -- windowÀÇ ±¸ºÐ(subdivision) --> <!ATTLIST FRAMESET %coreattrs; -- id, class, style, title -- rows %MultiLengths; #IMPLIED -- ±æÀ̵éÀÇ ¸ñ·Ï, µðÆúÆ®´Â 100% (1 ¿) -- cols %MultiLengths; #IMPLIED -- ±æÀ̵éÀÇ ¸ñ·Ï, µðÆúÆ®´Â 100% (1 °É·³) -- onload %Script; #IMPLIED -- ¸ðµç ÇÁ·¹ÀÓµéÀÌ ·Îµå(load) µÇ¸é -- onunload %Script; #IMPLIED -- ¸ðµç ÇÁ·¹ÀÓµéÀÌ Á¦°Å(removed) µÇ¸é -- > ]]>
¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ
FRAMESET ¿¤·¹¸àÆ®´Â »ç°¢Çü ºÎºÐ °ø°£À¸·Î »ç¿ëÀÚÀÇ ÁÖ µÈ windowÀÇ ¹è¿À» ÁöÁ¤ÇÑ´Ù.
rows ¾ÖÆ®¸®ºäÆ®ÀÇ ¼³Á¤Àº ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¾ÈÀÇ ¼öÆò ºÎºÐ °ø°£ÀÇ °¹¼ö¸¦ ÁöÁ¤ÇÑ´Ù. cols ¾ÖÆ®¸®ºäÆ®ÀÇ ¼³Á¤Àº ÇÁ·¹ÀÓ¼¼Æ® ¾ÈÀÇ ¼öÁ÷ ºÎºÐ °ø°£ÀÇ °¹¼ö¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ µÎ ¾ÖÆ®¸®ºäÆ®¸¦ µ¿½Ã¿¡ ¼³Á¤ÇÏ¿© ĵéÀ» ¸¸µé ¼ö ÀÖ´Ù.
¸¸ÀÏ rows ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇÁö ¾Ê¾ÒÀ¸¸é, °¢ Ä÷³Àº ÆäÀÌÁöÀÇ Àüü Æø¿¡ È®´ëµÇ°í, cols ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇÁö ¾Ê¾ÒÀ¸¸é, °¢ ¿Àº ÆäÀÌÁöÀÇ ÀüüÀÇ ¸Ç À§¿¡¼ ¸Ç ¾Æ·¡ ±îÁö È®´ëµÈ´Ù. ¸¸ÀÏ ¾ÖÆ®¸®ºäÆ®°¡ µÑ ´Ù ¼³Á¤ µÇÁö ¾Ê¾ÒÀ¸¸é, ±× ÇÁ·¹ÀÓÀº Àüü ÆäÀÌÁöÀÇ Å©±â¿Í °°¾ÆÁø´Ù.
ÇÁ·¹ÀÓÀº Ä÷³µéÀ» ¿ÞÂÊ¿¡¼ ¿À¸¥ÂÊÀ¸·Î, ¿À» À§¿¡¼ ¾Æ·¡·Î Çü¼ºÇÑ´Ù. ¾ÖÆ®¸®ºäÆ®°¡ µÑ ´Ù ¼³Á¤ µÇ¾úÀ¸¸é, ¸Ç À§ ¿¿¡¼ ¿ÞÂÊ¿¡¼ ¿À¸¥ÂÊÀ¸·Î, ´ÙÀ½ ¿¿¡¼ ¿ÞÂÊ¿¡¼ ¿À¸¥ÂÊÀ¸·Î µîÀ¸·Î Çü¼ºµÈ´Ù.
ù¹ø° ¿¹Á¦´Â ½ºÅ©¸°À» ¼öÁ÷ÀÇ µÎ ºÎºÐÀ¸·Î ³ª´©¾î À§ÂÊ ¹Ý°ú ¾Æ·¡ÂÊ ¹ÝÀ» ¸¸µç´Ù.
<FRAMESET rows="50%, 50%"> ... ³ª¸ÓÁö Á¤Àǵé ... </FRAMESET>
´ÙÀ½ ¿¹Á¦´Â ¼¼°³ÀÇ Ä÷³µéÀ» ¸¸µå´Âµ¥, µÎ¹ø°´Â Å©±â¸¦ ¾Æ´ÂÀ̹ÌÁö¸¦ À§ÇÏ¿© À¯¿ëÇÑ ¹æ½ÄÀ¸·Î 250 Çȼ¿(pixel)ÀÇ °íÁ¤ ³Êºñ¸¦ °®´Â´Ù. ù¹ø°´Â ³ª¸ÓÁö °ø°£ÀÇ 25% , ¼¼¹ø°´Â 75%¸¦ ÇÒ´ç ¹Þ´Â´Ù.
<FRAMESET cols="1*,250,3*"> ... ³ª¸ÓÁö Á¤Àǵé ... </FRAMESET>
´ÙÀ½ ¿¹Á¦´Â 2x3 ĵéÀÇ ºÎºÐ °ø°£µéÀ» ¸¸µç´Ù.
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ... ³ª¸ÓÁö Á¤Àǵé ... </FRAMESET>
´ÙÀ½ ¿¹Á¦¿¡¼, ºê¶ó¿ìÀú window°¡ ÇöÀç 1000 Çȼ¿(pixel)ÀÇ ³ôÀ̸¦ °®´Â´Ù°í °¡Á¤ÇÏÀÚ. ù¹ø° â¿¡´Â 30%ÀÎ 300 Çȼ¿ÀÇ ³ôÀÌ°¡ ÇÒ´çµÈ´Ù. µÎ¹ø° âÀº ÁöÁ¤ÇÑ ´ë·Î 400 Çȼ¿ÀÇ ³ôÀÌ°¡ ÇÒ´çµÈ´Ù. ±×·¡¼ ³²Àº 300 Çȼ¿À» ´Ù¸¥ µÎ ÇÁ·¹ÀÓµé »çÀÌ¿¡¼ ³ª´©°Ô µÈ´Ù. ³×¹ø° ÇÁ·¹ÀÓÀÇ ³ôÀÌ°¡ "2*"·Î ¼³Á¤µÇ¾î ÀÖ¾î "*"(=1*)·Î ¼³Á¤ µÈ ¼¼¹ø° ÇÁ·¹ÀÓÀÇ ³ôÀÌÀÇ µÎ¹è°¡µÈ´Ù. ±×·¯¹Ç·Î ¼¼¹ø° ÇÁ·¹ÀÓÀÇ ³ôÀÌ´Â 100 Çȼ¿ÀÌ°í ³×¹ø°´Â 200 Çȼ¿À̵ȴÙ.
<FRAMESET rows="30%,400,*,2*"> ... ³ª¸ÓÁö Á¤Àǵé ... </FRAMESET>
Àý´ë ±æÀ̵éÀÇ ÇÕ°è°¡ ½ÇÁ¦ »ç¿ë °¡´É ÇÑ °ø°£ÀÇ 100%¸¦ ÃÊ°úÇÏ´Â °æ¿ì¿¡´Â, »ç¿ëµµ±¸¿¡ ÀÇÇÏ¿© Á¶Á¤µÇ¾î¾ß ÇÑ´Ù. ºÎÁ·ÇÏ°Ô ¼³Á¤ µÇ¾úÀ¸¸é, ³ª¸ÓÁö °ø°£Àº ÀûÁ¤ÇÏ°Ô °¢ â¿¡ ¹èºÐ µÇ¾î¾ß ÇÑ´Ù. °úµµÇÏ°Ô ¼³Á¤ µÇ¾úÀ¸¸é, °¢ âÀº Àüü °ø°£¿¡ ºñ·ÊÇÏ¿© Ãà¼Ò µÇ¾î¾ß ÇÑ´Ù.
ÇÁ·¹ÀÓ¼¼Æ®(frameset)´Â ¾î´À ¼öÁØÀÌ°Ç ³×½ºÆ®(nest) µÉ ¼ö ÀÖ´Ù.
´ÙÀ½ ¿¹Á¦¿¡¼, ¹Ù±ùÂÊ FRAMESETÀº °¡¿ë °ø°£À» °°Àº ¼¼°³ÀÇ Ä÷³(column)µé·Î ³ª´©¾ú´Ù. ±×¸®°í ¾ÈÂÊ FRAMESET´Â µÎ¹ø° Áö¿ªÀ» ³ôÀÌ°¡ ´Ù¸¥ µÎ ¿(row)·Î ³ª´©¾ú´Ù.
<FRAMESET cols="33%, 33%, 34%"> ... ù¹ø° ÇÁ·¹ÀÓÀÇ ³»¿ë ... <FRAMESET rows="40%, 50%"> ... µÎ¹ø° ÇÁ·¹ÀÓÀÇ Ã¹¹ø° ¿ÀÇ ³»¿ë ... ... µÎ¹ø° ÇÁ·¹ÀÓÀÇ µÎ¹ø° ¿ÀÇ ³»¿ë ... </FRAMESET> ...¼¼¹ø° ÇÁ·¹ÀÓÀÇ ³»¿ë ... </FRAMESET>
Á¦ÀÛÀÚ´Â OBJECT ¿¤·¹¸àÆ®¸¦ ÅëÇÏ¿©, ÀÌ µ¥ÀÌÅ͸¦ Æ÷ÇÔ ½ÃÅ´À¸·Î¼, µ¥ÀÌÅ͸¦ ¿©·¯ ÇÁ·¹ÀÓµé »çÀÌ¿¡ °øÀ¯ ½Ãų ¼ö ÀÖ´Ù. Á¦ÀÛÀÚ´Â ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼ ¾ÈÀÇ HEAD ¿¤·¹¸àÆ®¿¡ OBJECT ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔ½ÃÅ°°í, id ¾ÖÆ®¸®ºäÆ®·Î À̸§À» ÁÖ¾î¾ßÇÑ´Ù. ÇÁ·¹ÀÓ¼¼Æ® ¾ÈÀÇ ÇÁ·¹ÀÓ(frame) ³»¿ë ÀÎ ¾î¶² ¹®¼µµ ÀÌ ÁöÁ¤ÀÚ(identifier)·Î ÂüÁ¶ ÇÒ ¼ö ÀÖ´Ù.
´ÙÀ½ ¿¹Á¦´Â ½ºÅ©¸³Æ®(script)°¡ ¾î¶»°Ô Àü ÇÁ·¹ÀÓ¼¼Æ®(frameset)¸¦ À§ÇÏ¿© ÁöÁ¤ µÈ OBJECT ¿¤·¹¸àÆ®¸¦ Á¶È¸ÇÒ ¼ö Àִ°¡¸¦ ¼³¸íÇÑ´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>HEAD ¾È¿¡¼ OBJECT·Î ÇÁ·¹ÀÓ¼¼Æ®(frameset)</TITLE> <!-- ÀÌ OBJECT´Â Ç¥ÇöµÇÁö ¾Ê´Â´Ù! --> <OBJECT id="myobject" data="data.bar"></OBJECT> </HEAD> <FRAMESET> <FRAME src="bianca.html" name="bianca"> </FRAMESET> </HTML> <!-- bianca.html ÈÀÏ ¾È¿¡¼ --> <HTML> <HEAD> <TITLE>BiancaÀÇ ÆäÀÌÁö</TITLE> </HEAD> <BODY> ... ¹®¼ÀÇ ½ÃÀÛ ºÎºÐ ... <P> <SCRIPT type="text/Javascript"> parent.myobject.myproperty </SCRIPT> ... ¹®¼ÀÇ ³ª¸ÓÁö ºÎºÐ ... </BODY> </HTML>
<![ %HTML.Frameset; [ <!-- "_"·Î ½ÃÀÛÇÏ´Â °ÍÀº ¿¹¾à µÈ ÇÁ·¹ÀÓ À̸§µé, ¾Æ´Ï¸é ±ÛÀÚ·Î ½ÃÀÛ µÊ --> <!ELEMENT FRAME - O EMPTY -- ºÎºÐ â(subwindow) --> <!ATTLIST FRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- ±ä ¼³¸í¿¡ ¿¬°á (Á¦¸ñ º¸¿Ï) -- name CDATA #IMPLIED -- ¸ñÇ¥·Î »ç¿ëÇϱâ À§ ÇÑ ÇÁ·¹ÀÓ À̸§ -- src %URI; #IMPLIED -- ÇÁ·¹ÀÓ ³»¿ëÀÇ ÀÚ¿ø -- frameborder (1|0) 1 -- ÇÁ·¹ÀÓ Å׵θ®ÀÇ ¿äû -- marginwidth %Pixels; #IMPLIED -- Çȼ¿·Î Ç¥½Ã ÇÑ ¸¶Áø(margin)ÀÇ ³Êºñ -- marginheight %Pixels; #IMPLIED -- Çȼ¿(pixel)·Î Ç¥½Ã ¸¶ÁøÀÇ ÇÑ ³ôÀÌ -- noresize (noresize) #IMPLIED -- »ç¿ëÀÚÀÇ ÇÁ·¹ÀÓ Å©±â º¯°æ ºÒÇã -- scrolling (yes|no|auto) auto -- ±¼¸®±â ¹Ù(scrollbar)¸¦ Ç¥½ÃÇϳª ¾ÈÇϳª -- > ]]>
¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ
FRAME ¿¤·¹¸àÆ®´Â ÇÑ ÇÁ·¹ÀÓÀÇ ³»¿ë°ú ¸ð¾çÀ» Á¤ÀÇÇÑ´Ù.
src ¾ÖÆ®¸®ºäÆ®´Â ±× ÇÁ·¹ÀÓÀÌ Ç¥½Ã µÉ ÃÖÃÊÀÇ ¹®¼¸¦ ÁöÁ¤ÇÑ´Ù.
´ÙÀ½ ¿¹Á¦ HTML ¹®¼¿¡¼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼</TITLE> </HEAD> <FRAMESET cols="33%,33%,33%"> <FRAMESET rows="*,200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.gif"> </FRAMESET> <FRAME src="contents_of_frame3.html"> <FRAME src="contents_of_frame4.html"> </FRAMESET> </HTML>
´ÙÀ½°ú °°Àº ÇÁ·¹ÀÓÀ» »ý¼º ÇÒ °ÍÀÌ´Ù.
------------------------------------------ |Frame 1 |Frame 3 |Frame 4 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------| | | |Frame 2 | | | | | | | | | | | ------------------------------------------
±×¸®°í »ç¿ëµµ±¸´Â °¢ ÈÀÏÀ» °¢ ºÐ¸® µÈ â(view)¿¡ ·Îµù(load) ÇÒ °ÍÀÌ´Ù.
ÇÁ·¹ÀÓÀ» Á¤ÀÇ ÇÑ ¹®¼¿Í °°Àº ¹®¼¿¡ ÇÁ·¹ÀÓÀÇ ³»¿ëÀÌ ÀÖÀ¸¸é ¾ÈµÈ´Ù.
Ʋ¸° ¿¹Á¦:
´ÙÀ½ ÇÁ·¹ÀÓ¼¼Æ®(frameset) Á¤ÀÇ´Â µÎ¹ø° ÇÁ·¹ÀÓÀÇ ³»¿ëÀÌ ÇÁ·¹ÀÓ¼¼Æ®¿Í °°Àº ¹®¼ ¾È¿¡ ÀÖÀ¸¹Ç·Î Ʋ¸° HTMLÀÌ´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼</TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAME src="contents_of_frame1.html"> <FRAME src="#anchor_in_same_document"> <NOFRAMES> ... ´Ù¸¥ ÅؽºÆ® ... <H2><A name="anchor_in_same_document">Áß¿ä Ç׸ñ</A></H2> ... ´Ù¸¥ ÅؽºÆ® ... </NOFRAMES> </FRAMESET> </HTML>
´ÙÀ½ ¿¹Á¦´Â Àå½ÄÀû ¿ëµµÀÇ FRAME ¾ÖÆ®¸®ºäÆ®¸¦ ¼³¸íÇÑ´Ù. ÇÁ·¹ÀÓ 1¿¡¼ ±¼¸²¹Ù(scroll bar)¸¦ Çã¿ëÇÏÁö ¾Ê¾Ò´Ù. ÇÁ·¹ÀÓ 2´Â ±× ³»¿ë(Ãʱâ À̹ÌÁö ÈÀÏ) ÁÖÀ§¿¡ °ø°£À» ³²±â°í, ÇÁ·¹ÀÓ Å©±â º¯µ¿(resizeable)Àº Çã¿ëÇÏÁö ¾Ê´Â´Ù. ÇÁ·¹ÀÓ 3°ú 4 »çÀÌ¿¡´Â Å׵θ®(border)¸¦ ³ÖÁö ¾Ê´Â´Ù. Å׵θ®´Â µðÆúÆ®·Î ÇÁ·¹ÀÓ 1, 2¿Í 3 »çÀÌ¿¡ ±×¸°´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼</TITLE> </HEAD> <FRAMESET cols="33%,33%,33%"> <FRAMESET rows="*,200"> <FRAME src="contents_of_frame1.html" scrolling="no"> <FRAME src="contents_of_frame2.gif" marginwidth="10" marginheight="15" noresize> </FRAMESET> <FRAME src="contents_of_frame3.html" frameborder="0"> <FRAME src="contents_of_frame4.html" frameborder="0"> </FRAMESET> </HTML>
ÁÖ±â: ÇÁ·¹ÀÓÀÇ ¸ñÇ¥À» °áÁ¤ÇÏ´Â ÇöÀçÀÇ °üÇà¿¡ ´ë ÇØ, ºÎ·ÏÀÇ ÇÁ·¹ÀÓ¿¡ ´ëÇÑ ÁÖ¼®À» ÂüÁ¶Ç϶ó.
¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ
ÀÏ·ÁÁø ÇÁ·¹ÀÓ À̸§¿¡ ´ë ÇÑ Á¤º¸´Â ¸ñÇ¥ ÇÁ·¹ÀÓ À̸§À» ÂüÁ¶Ç϶ó.
ÀÌ ¿¹Á¦´Â ¸ñÇ¥µéÀÌ ¾î¶»°Ô ÇÁ·¹ÀÓ(frame) ³»¿ëÀÇ ¿ªµ¿ÀûÀÎ(dynamic) º¯°æÀ» Çã¿ëÇϴ°¡¸¦ ¼³¸íÇÑ´Ù. ¸ÕÀú ¹®¼ frameset.html ¾È¿¡ ÇÁ·¹ÀÓ¼¼Æ®(frameset)¸¦ ´ÙÀ½°ú °°ÀÌ Á¤ÀÇÇÏ¿´´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd"> <HTML> <HEAD> <TITLE>ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼</TITLE> </HEAD> <FRAMESET rows="50%,50%"> <FRAME name="fixed" src="init_fixed.html"> <FRAME name="dynamic" src="init_dynamic.html"> </FRAMESET> </HTML>
±×¸®°í, init_dynamic.html ¾È¿¡¼, "dynamic"À̶ó°í À̸§ Áö¿ö Áø ÇÁ·¹ÀÓÀ» ¿¬°á½ÃÄ×´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>ÁöÁ¤ µÈ ¸ñÇ¥(target)ÀÇ ¾ØÄ¿(anchor)¸¦ °¡Áø ¹®¼</TITLE> </HEAD> <BODY> ... ¹®¼ÀÇ ½ÃÀÛ ºÎºÐ ... <P>ÀÌÁ¦ ÁøÇà ÇÒ ¼ö ÀÖ´Ù. <A href="slide2.html" target="dynamic">slide 2.</A> ... ¹®¼ÀÇ ´Ù¸¥ ºÎºÐ ... <P>´ÙÀ½À¸·Îµµ ÁøÇà ÇÒ ¼ö ÀÖ´Ù. <A href="slide3.html" target="dynamic">slide 3.</A> </BODY> </HTML>
¾î´À ÂÊÀÌ´ø ¿¬°áÀ» È°¼ºÈ ½ÃÅ°¸é, "dynamic"À̶ó°í À̸§ Áö¿ö Áø ÇÁ·¹ÀÓ¿¡ »õ·Î¿î ¹®¼¸¦ ¿¬´Ù. ´Ù¸¥ ÇÁ·¹ÀÓ "fixed"¿¡´Â ÃÖÃÊÀÇ ³»¿ëÀ» ±×´ë·Î À¯ÁöÇÑ´Ù.
ÁÖ±â: ÇÁ·¹ÀÓ¼¼Æ®(frameset) Á¤ÀÇ´Â º¯°æµÇÁö ¾ÊÀ¸¸ç, ÇÁ·¹ÀÓµé Áß ÇϳªÀÇ ³»¿ëÀÌ º¯°æµÈ´Ù. ÀÏ´Ü ÇÑ ÇÁ·¹ÀÓÀÇ ³»¿ëÀÌ º¯°æµÇ¸é, ÇÁ·¹ÀÓ¼¼Æ® Á¤ÀÇ´Â ÇÁ·¹ÀÓµéÀÇ ÇöÀç »óŸ¦ ´õ ÀÌ»ó ¹Ý¿µÇÏÁö ¸øÇÑ´Ù.
ÇöÀç·Î¼´Â URI¿¡¼ ÇÁ·¹ÀÓ¼¼Æ® ÀüüÀÇ »óŸ¦ ¿£ÄÚµå(encode)ÇÏ´Â ¹æ¹ýÀÌ ¾ø´Ù. ±×·¡¼ ¸¹Àº »ç¿ëµµ±¸´Â »ç¿ëÀÚ¿¡°Ô ÇÁ·¹ÀÓ¼¼Æ®¿¡ ºÏ¸¶Å©(bookmark)¸¦ ÁöÁ¤ÇÏ´Â °ÍÀ» Çã¿ëÇÏÁö ¾Ê´Â´Ù.
ÇÁ·¹ÀÓ¼¼Æ®(frameset)´Â »ç¿ëµµ±¸ÀÇ ¿ª»ç(history)¸¦ Åë ÇÑ ¾ÕÀ¸·Î(forward)¿Í µÚ·Î(backward) Ç×Çظ¦ »ç¿ëÀÚ¿¡°Ô ´õ ¾î·´°Ô ¸¸µé ¼ö ÀÖ´Ù.
°°Àº ¹®¼ ¾È¿¡¼ ¸¹Àº ¿¬°á(link)µéÀÌ °°Àº ¸ñÇ¥(target)¸¦ ÁöÁ¤Çϸé, ¸ñÇ¥¸¦ ÇÑ ¹ø ¼³Á¤ÇÏ°í, °¢ ¿¤·¹¸àÆ®(element)ÀÇ target ¾ÖÆ®¸®ºäÆ®·Î ÁöÁ¤ Çؼ »ç¿ë ÇÒ ¼ö ÀÖ´Ù. À̸¦ À§ÇÏ¿© BASE ¿¤·¹¸àÆ®ÀÇ target ¾ÖÆ®¸®ºäÆ®¸¦ ÁöÁ¤ÇÑ´Ù.
À§ÀÇ ¿¹Á¦¿¡¼, À̹ø¿¡´Â ¸ñÇ¥ Á¤º¸¸¦ BASE ¿¤·¹¸àÆ®¿¡¼ ÁöÁ¤ÇÏ°í, A ¿¤·¹¸àÆ®·Î ºÎÅÍ ÀÌ°ÍÀ» Á¦°ÅÇÑ´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <HTML> <HEAD> <TITLE>BASEÀÇ Æ¯Á¤ ¸ñÇ¥(target)¸¦ °®´Â ¹®¼</TITLE> <BASE href="http://www.mycom.com/Slides" target="dynamic"> </HEAD> <BODY> ... ¹®¼ÀÇ ½ÃÀÛ ºÎºÐ ... <P>ÀÌÁ¦ ÁøÇà ÇÒ ¼ö ÀÖ´Ù. <A href="slide2.html">slide 2.</A> ... ¹®¼ÀÇ ´Ù¸¥ ºÎºÐ ... <P>´ÙÀ½À¸·Îµµ ÁøÇà ÇÒ ¼ö ÀÖ´Ù. <A href="slide3.html">slide 3.</A> </BODY> </HTML>
»ç¿ëµµ±¸´Â ¾îµð¿¡ ¿¬°á(link) µÈ ÀÚ¿øÀ» ·Îµå(load) ÇÒ °ÍÀΰ¡ ÇÏ´Â ¸ñÇ¥ ÇÁ·¹ÀÓÀ» ´ÙÀ½ÀÇ ¿ì¼± ¼øÀ§(À§ ÂÊ ¿ì¼±)¿¡ ÀÇ°ÅÇÏ¿© ÆÇÁ¤ÇÏ¿©¾ß ÇÑ´Ù.
»ç¿ëµµ±¸´Â »ç¿ëÀÚ¿¡°Ô target ¾ÖÆ®¸®ºäÆ®¸¦ µ¤¾î ¾º¿ì(override)´Â ±â´ÉÀ» Á¦°ø ÇÒ ¼ö ÀÖ´Ù.
Á¦ÀÛÀÚ´Â »ç¿ëµµ±¸°¡ ÇÁ·¹ÀÓÀ» Áö¿øÇÏÁö ¸øÇϰųª, ÇÁ·¹ÀÓ µð½ºÇ÷¹ÀÌ°¡ ¾ÈµÇµµ·Ï ±¸¼ºµÈ °æ¿ì¸¦ ´ëºñÇÏ¿© ´ëü ³»¿ëÀ» Á¦°øÇÏ¿©¾ß ÇÑ´Ù.
<![ %HTML.Frameset; [ <!ENTITY % noframes.content "(BODY) -(NOFRAMES)"> ]]> <!ENTITY % noframes.content "(%flow;)*"> <!ELEMENT NOFRAMES - - %noframes.content; -- ÇÁ·¹ÀÓ ¾ø´Â Ç¥Çö(non frame-base)À» À§ ÇÑ ´ëü ³»¿ë ¿ë±â(container) --> <!ATTLIST NOFRAMES %attrs; -- %coreattrs, %i18n, %events -- >
NOFRAMES ¿¤·¹¸àÆ®´Â ÇÁ·¹ÀÓÀÌ µð½ºÇ÷¹ÀÌ µÇÁö ¾ÊÀ» ¶§, ´ÜÁö µð½ºÇ÷¹ÀÌ ¸¸ µÇ´Â ³»¿ë(content)À» Á¤ÀÇÇÑ´Ù. NOFRAMES ¼±¾ðÀÇ ³»¿ëÀ», ÇÁ·¹ÀÓÀ» Áö¿øÇÏ´Â »ç¿ëµµ±¸³ª ÇÁ·¹ÀÓÀÇ µð½ºÇ÷¹ÀÌ°¡ ¾È µÇµµ·Ï ±¸¼ºµÇ¾î ÀÖÀ» ¶§, ´ÜÁö µð½ºÇ÷¹ÀÌ ¸¸ÇÏ¿©¾ß ÇÑ´Ù. ÇÁ·¹ÀÓÀ» Áö¿øÇÏÁö ¾Ê´Â »ç¿ëµµ±¸´Â ¾î´À °æ¿ì¿¡³ª NOFRAMESÀÇ ³»¿ëÀ» µð½ºÇ÷¹ÀÌÇÏ¿©¾ß ÇÑ´Ù.
NOFRAMES´Â ÇÁ·¹ÀÓ¼¼Æ® ¹®¼ÀÇ FRAMESET Ç׸ñ ¾È¿¡¼ »ç¿ë µÉ ¼ö ÀÖ´Ù.
¿¹¸¦ µé¾î:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>NOFRAMES¸¦ °®´Â ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼</TITLE> </HEAD> <FRAMESET cols="50%, 50%"> <FRAME src="main.html"> <FRAME src="table_of_contents.html"> <NOFRAMES> <P>¿©±â¿¡ <A href="main-noframes.html"> ÇÁ·¹ÀÓ ¾ø´Â(non-frame based) ¹®¼°¡ ÀÖ´Ù.</A> </NOFRAMES> </FRAMESET> </HTML>
longdesc ¾ÖÆ®¸®ºäÆ®´Â Á¦ÀÛÀÚ°¡ º¸ÀÌÁö ¾Ê´Â(non-visual) »ç¿ëµµ±¸¸¦ »ç¿ëÇÏ´Â »ç¶÷µéÀÌ ´õ Á¢±ÙÇϱ⠽¬¿î ÇÁ·¹ÀÓ ¹®¼¸¦ ¸¸µé ¼ö ÀÖ°Ô ÇÑ´Ù. ÀÌ ¾ÖÆ®¸®ºäÆ®´Â ÇÁ·¹ÀÓ(frame)ÀÇ ±ä ¼³¸íÀ» Á¦°øÇÏ´Â ÀÚ¿øÀ» ÁöÁ¤ÇÑ´Ù. Á¦ÀÛÀÚ´Â ÇÁ·¹ÀÓ°ú ¿¬°ü µÈ ±ä ¼³¸íÀº frame¿¡ ÷ºÎÇÏ°í, ÇÁ·¹ÀÓÀÇ ³»¿ëÀÌ ¾Æ´Ï¶ó´Â °Í¿¡ ÁÖÀÇÇÏ¿©¾ß ÇÑ´Ù. ±× ³»¿ëÀº ½Ã°£¿¡ µû¶ó ´Ù¸¦ ¼ö°¡ ÀÖÀ¸¹Ç·Î, ÃÖÃÊÀÇ ±ä ¼³¸íÀº ÇÁ·¹ÀÓÀÇ Çâ ÈÄ ³»¿ë¿¡´Â Àû´çÇÏÁö ¾Ê°Ô µÇ±â ½±´Ù. ƯÈ÷, Á¦ÀÛÀÚ´Â À̹ÌÁö ¸¸À¸·Î ÇÁ·¹ÀÓ ³»¿ëÀ» ±¸¼ºÇÏÁö ¸»¾Æ¾ßÇÑ´Ù.
´ÙÀ½ ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼´Â µÎ ÇÁ·¹ÀÓÀ» ¼³Á¤ÇÏ¿´´Ù. ¿ÞÂÊ ÇÁ·¹ÀÓÀº ¸ñÂ÷¸¦ °¡Áö°í, ¿À¸¥ÂÊ ÇÁ·¹ÀÓÀº ÃÖÃÊ Å¸Á¶ÀÇ À̹ÌÁö¸¦ °®´Â´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>À߸ø ¼³°è µÈ ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich.gif" longdesc="ostrich-desc.html"> </FRAMESET> </HTML>
À̹ÌÁö°¡ ¾î¶² HTML ¿¤·¹¸àÆ®¿¡µµ °ü°è¾øÀÌ ÇÁ·¹ÀÓ¿¡ Æ÷ÇÔ µÇ¾ú½¿À» ÁÖ½ÃÇ϶ó. ±×·¡¼ Á¦ÀÛÀÚ´Â longdesc ¾ÖÆ®¸®ºäÆ®¸¦ »ç¿ëÇÏ´Â ÀÌ¿Ü¿¡´Â ´ëü(alternate) ÅؽºÆ®¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ´Â ¹æ¹ýÀÌ ¾ø´Ù. ¸¸ÀÏ ¿¹¸¦ µé¾î, »ç¿ëÀÚ°¡ ¸ñÂ÷·Î ºÎÅÍ ¹ìÀ» ¼±ÅÃÇÏ¿© ¿À¸¥ÂÊ ÇÁ·¹ÀÓÀÇ ³»¿ëÀÌ º¯°æµÇ¸é, »ç¿ëÀÚ´Â ÇÁ·¹ÀÓÀÇ »õ·Î¿î ³»¿ë¿¡ ÅؽºÆ®·Î Á¢±Ù ÇÒ ¼ö ¾øÀ» °ÍÀÌ´Ù.
±×·¡¼ Á¦ÀÛÀÚ´Â ÇÁ·¹ÀÓ ¾È¿¡ À̹ÌÁö¸¦ Á÷Á¢ ³ÖÁö ¸»¾Æ¾ßÇÑ´Ù. ±× ´ë½Å ±× À̹ÌÁö¸¦ º°µµÀÇ HTML ¹®¼ ¾È¿¡ ÁöÁ¤ÇÏ¿©¾ß ÇÏ°í, ±× ¾È¿¡ Àû´çÇÑ ´ëü ÅؽºÆ®·Î Å並 ´Þ¾Æ µÎ¾î¾ßÇÑ´Ù.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40"> <HTML> <HEAD> <TITLE>Àß ¼³°è µÈ ÇÁ·¹ÀÓ¼¼Æ®(frameset) ¹®¼</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="table_of_contents.html"> <FRAME src="ostrich-container.html"> </FRAMESET> </HTML>
<!-- ostrich-container.html ÈÀÏ¿¡¼: --> <HTML> <HEAD> <TITLE>ºü¸£°í °ÇÑ Å¸Á¶</TITLE> </HEAD> <P> <OBJECT data="ostrich.gif" type="image/gif"> ÀÌ Å¸Á¶µéÀº ¸ÂÀÌ ÁÁÀ» °ÍÀÌ´Ù! </OBJECT> </HTML>
<!ELEMENT IFRAME - - (%flow;)* -- ÀζóÀÎ(inline) ºÎºÐ â(subwindow) --> <!ATTLIST IFRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- ±ä ¼³¸í¿¡ ¿¬°á (Á¦¸ñ º¸¿Ï) -- name CDATA #IMPLIED -- ¸ñÇ¥·Î »ç¿ëÇϱâ À§ ÇÑ ÇÁ·¹ÀÓ À̸§ -- src %URI; #IMPLIED -- ÇÁ·¹ÀÓ ³»¿ëÀÇ ÀÚ¿ø -- frameborder (1|0) 1 -- ÇÁ·¹ÀÓ Å׵θ®ÀÇ ¿äû -- marginwidth %Pixels; #IMPLIED -- Çȼ¿·Î Ç¥½ÃÇÑ ¸¶Áø(margin)ÀÇ ³Êºñ -- marginheight %Pixels; #IMPLIED -- Çȼ¿(pixel)·Î Ç¥½ÃÇÑ ¸¶ÁøÀÇ ÇÑ ³ôÀÌ -- scrolling (yes|no|auto) auto -- ±¼¸®±â ¹Ù(scrollbar)¸¦ Ç¥½ÃÇϳª ¾ÈÇϳª -- align %IAlign; #IMPLIED -- ¼öÁ÷ ¶Ç´Â ¼öÆò Á¤·Ä -- height %Length; #IMPLIED -- ÇÁ·¹ÀÓ ³ôÀÌ -- width %Length; #IMPLIED -- ÇÁ·¹ÀÓ ³Êºñ -- >
¾ÖÆ®¸®ºäÆ®ÀÇ Á¤ÀÇ
IFRAME ¿¤·¹¸àÆ®(element)´Â Á¦ÀÛÀÚ°¡ ÅؽºÆ® ºí·°(block) ¾È¿¡ ÇÁ·¹ÀÓ(frame)À» ³ÖÀ» ¼ö ÀÖ°Ô ÇÑ´Ù. ÀζóÀÎ(inline) ÇÁ·¹ÀÓÀ» ÅؽºÆ®ÀÇ ºÎºÐ¿¡ »ðÀÔÇÏ´Â °ÍÀº OBJECT ¿¤·¹¸àÆ®À» ÅëÇÏ¿© ¿ÀºêÁ§Æ®À» »ðÀÔÇÏ´Â °Í°ú °ÅÀÇ °°´Ù. ¿¹¸¦ µé¾î, µÑ ´Ù HTML ¹®¼¸¦ ´Ù¸¥ HTML ¹®¼ ÇÑ °¡¿îµ¥¿¡ »ðÀÔ Çϵµ·Ï Çϸç, µÑ ´Ù ÁÖÀ§ÀÇ ÅؽºÆ®¿Í ÇÔ²² Á¤·Ä µÉ ¼ö ÀÖ´Ù.
ÀζóÀÎÀ¸·Î »ðÀÔÇÏ°íÀú ÇÏ´Â Á¤º¸´Â ÀÌ ¿¤·¹¸àÆ®ÀÇ src ¾ÖÆ®¸®ºäÆ®·Î ÁöÁ¤ÇÑ´Ù. ÀÌ¿¡ ¹ÝÇØ, IFRAME ¿¤·¹¸àÆ®ÀÇ ³»¿ëÀº »ç¿ëµµ±¸°¡ ÇÁ·¹ÀÓÀ» Áö¿øÇÏÁö ¾È°Å³ª ÇÁ·¹ÀÓÀÌ µð½ºÇ÷¹ÀÌ ¾ÈµÇµµ·Ï ±¸¼ºÇÑ °æ¿ì¿¡ ¸¸ Ç¥½Ã µÇ¾î¾ß ÇÑ´Ù.
ÇÁ·¹ÀÓÀ» Áö¿øÇÏ´Â »ç¿ëµµ±¸¿¡¼, ´ÙÀ½ ¿¹Á¦´Â ÀζóÀÎ ÇÁ·¹ÀÓÀ» ÅؽºÆ® °¡¿îµ¥ Å׵θ®·Î µÑ·Á½Î¿© ³ªÅ¸³¯ °ÍÀÌ´Ù.
<IFRAME src="foo.html" width="400" height="500" scrolling="auto" frameborder="1"> [±ÍÇÏÀÇ ºê¶ó¿ìÀú(»ç¿ëµµ±¸)´Â ÇÁ·¹ÀÓÀ» Áö¿øÇÏÁö ¾Ê°Å³ª, ÇöÀç ÇÁ·¹ÀÓÀÌ µð½ºÇ÷¹ÀÌ µÇµµ·Ï ±¸¼º(configure)µÇ¾î ÀÖÁö ¾Ê½À´Ï´Ù. ±×·¯³ª, ¹æ¹®À» °è¼Ó ÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù <A href="foo.html">°ü°è ¹®¼.</A>] </IFRAME>
ÀζóÀÎ ÇÁ·¹ÀÓÀº Å©±â¸¦ Á¶Á¤(resize)ÇÒ ¼ö ¾øÀ½À¸·Î, noresize ¾ÖÆ®¸®ºäÆ®¸¦ °¡Áú ¼ö ¾ø´Ù.
ÁÖ±â: HTML ¹®¼´Â OBJECT ¿¤·¹¸àÆ®¸¦ »ç¿ëÇÏ¿© ´Ù¸¥ HTML ¹®¼ ¾È¿¡ ±ò¸±(embedded) ¼öµµ ÀÖ´Ù. ¼¼ºÎ»çÇ×Àº ±ò¸°(embedded) ¹®¼¸¦ ÂüÁ¶Ç϶ó.
ÀÌÀü¼ø¼ | ´ÙÀ½¼ø¼ | ¸ñ·Ï | ¿¤·¹¸àÆ® | ¾ÖÆ®¸®ºäÆ® | »öÀÎ | ¿ø¹®¿¬°á |