µ¿ÀÏ µðÀÚÀÎÀÇ Table for Layout°ú CSS Layout ºñ±³
Table for Layout ¿¹Á¦º¸±â |
CSS Layout ¿¹Á¦º¸±â |
|
|
À¥ Ç¥ÁØ ¹æ½ÄÀÇ CSS LayoutÀº ÄÜÅÙÆ®°¡ ³í¸®ÀûÀ¸·Î ¼±ÇüÈ µË´Ï´Ù.
»ó±â µÎ °³ÀÇ À̹ÌÁö´Â µ¿ÀÏÇÑ LayoutÀ» Á¦°øÇÏ°í ÀÖÁö¸¸ ÄÚµå´Â °¢°¢ ´Ù¸¨´Ï´Ù. ÀÌ¹Ì ÁüÀÛÇÏ°í °è¼Ì°ÚÁö¸¸ À̹ø¿¡´Â CSS¸¦ Á¦°ÅÇÑ »óÅ·ΠÇѹø º¸¿©µå¸®°Ú½À´Ï´Ù. CSS¸¦ Á¦°ÅÇÏ°Ô µÇ¸é ÄÜÅÙÆ®°¡ ¼±ÇüÈ µÇ´Â ¸ð½ÀÀ» ½Ã°¢ÀûÀ¸·Î È®ÀÎÇÒ ¼ö ÀÖ°í ¼±ÇüÈ ÇÏ¿´À» ¶§ ÄÜÅÙÆ®ÀÇ ³ª¿ ¼ø¼¿¡ ¹«¸®°¡ ¾ø´Ù¸é ±×°ÍÀº ¾î¶² ÀåÄ¡¿¡¼ º¸´õ¶óµµ ³í¸®ÀûÀ¸·Î ¹Ù¸£°Ô ÀÌÇØÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿ÞÂÊÀº ȸé¹èÄ¡¸¦ À§ÇÏ¿© TableÀÌ »ç¿ëµÈ ÆäÀÌÁöÀÌ¸ç ¿À¸¥ÂÊÀÌ CSS¸¦ ÀÌ¿ëÇÏ¿© LayoutµÈ ÆäÀÌÁö ÀÔ´Ï´Ù. Opera Mini¿Í °°Àº ÈÞ´ë¿ë À¥ ºê¶ó¿ì¡ ÀåÄ¡´Â À¥ ÆäÀÌÁö¸¦ ·»´õ¸µ ÇÒ ¶§ TableÀ» ¸ðµÎ °È¾î³»°í CSSÁ¶Â÷ Á¦°ÅµÈ »óÅ·Πǥ½ÃÇÕ´Ï´Ù. µû¶ó¼ ¾Æ·¡ µÎ °¡Áö °æ¿ìÀÇ ÆäÀÌÁö °¡¿îµ¥ ¾î¶² ÆäÀÌÁö°¡ ³í¸®ÀûÀ¸·Î ¼±ÇüÈ µÉ °ÍÀÎÁö´Â ±»ÀÌ º¸Áö ¾Ê´õ¶óµµ ½±°Ô ÃßÃøÀÌ °¡´ÉÇÕ´Ï´Ù. »ç½Ç ÀÌ°ÍÀº CSS LayoutÀÇ ¿µÇâÀ̶ó±â º¸´Ù´Â MarkupÀ» Àß Ç߱⠶§¹®¿¡ º¼ ¼ö ÀÖ´Â °á°ú ÀÔ´Ï´Ù. ÇÏÁö¸¸ °Å²Ù·Î »ý°¢Çϸé Ç¥Çö¿ä¼Ò°¡ MarkupÀ¸·ÎºÎÅÍ ¿ÏÀüÈ÷ ºÐ¸®µÇ¾î Àֱ⠶§¹®¿¡ ÀÌ·¸°Ô ³í¸®ÀûÀ¸·Î Markup Çϴ°ÍÀÌ °¡´ÉÇØ Áý´Ï´Ù. Layout¿¡ TableÀ» »ç¿ëÇÏ´Â °æ¿ì´Â ¸¶Å©¾÷ÀÌ Ç¥Çö¿ä¼Ò¸¦ Æ÷ÇÔÇÏ°í Àֱ⠶§¹®¿¡ ÄÜÅÙÆ®¸¦ ³í¸®ÀûÀ¸·Î ¹èÄ¡ÇÏ·Á°í ½ÃµµÇϸé Ç¥Çö¹®Á¦¿Í Ãæµ¹ÇÏ°Ô µÇ°í °á±¹ ³í¸®º¸´Ù´Â Ç¥ÇöÀ» À§ÇÑ ¿ëµµ·Î ¸¶Å©¾÷À» »ç¿ëÇÏ°Ô µÇ¾î ³í¸®ÀûÀÎ ¹èÄ¡¿Í´Â °Å¸®°¡ ¸Ö¾îÁö°Ô µË´Ï´Ù.
CSS Á¦°Å »óÅ ºñ±³
CSS°¡ Á¦°ÅµÈ Table for Layout ¿¹Á¦º¸±â |
CSS°¡ Á¦°ÅµÈ Web Standard Layout ¿¹Á¦º¸±â |
|
|
º¸Åë TableÀ» ¼±ÇüÈ ÇÏ´õ¶óµµ ÄÜÅÙÆ®ÀÇ ¼ø¼°¡ ¿ÏÀüÈ÷ µÚÁ×¹ÚÁ×À¸·Î ÀνĵÇÁö´Â ¾Ê½À´Ï´Ù. ¿Ö³ÄÇϸé TableÀ» °È¾î³»´Â °æ¿ì ÁÂÃø »ó´ÜÀ¸·ÎºÎÅÍ ¿ìÃø ÇÏ´ÜÀ¸·Î ÄÜÅÙÆ®°¡ ¼±ÇüÈ µÇ´Âµ¥ ±×·¯ÇÑ ¼ø¼¿¡ ¸Â°Ô ÆäÀÌÁöÀÇ ÄÜÅÙÆ®¸¦ ¹èÄ¡ÇÏ´Â °æ¿ìµµ Àֱ⠶§¹®ÀÔ´Ï´Ù. ±×·¯³ª ±×°ÍÀº ¿îÀÌ ¾ÆÁÖ ÁÁÀº °æ¿ìÀÌ¸ç ´ëºÎºÐÀÇ °æ¿ì´Â ³í¸®ÀûÀÎ ¼ø¼¿¡ ¹®Á¦°¡ »ý±â°Ô µË´Ï´Ù.
CSS LayoutÀº Table for Layout¿¡ ºñÇÏ¿© ÆÄÀÏÀÇ ¿ë·®À» 50% ÀÌ»ó Àý°¨ÇØ ÁÝ´Ï´Ù.
¹«¾ùÀΰ¡ ¿øÇÏ´Â À§Ä¡¿¡ Ç¥½ÃÇϱâ À§ÇÏ¿© TableÀ» Layout¿¡ »ç¿ëÇÏ´Â °æ¿ì´Â <table><tr><td>³»¿ë</td></tr></table> Çü½ÄÀ¸·Î ÄÚµù µÇÁö¸¸ CSS LayoutÀº <div>³»¿ë</div> Çü½ÄÀ¸·Î ÄÚµù µË´Ï´Ù. ¿¹Á¦ÄÚµå Àüü¸¦ º¸¿©µå¸®°Ú½À´Ï´Ù. ȸé(¶Ç´Â Áö¸é) °ü°è»ó Äڵ带 ¸ðµÎ ´ã¾Æ³»¸é ȸéÀÌ ³Ê¹« Ä¿Áö¹Ç·Î ÄÚµåÀÇ ¼Ã¼Å©±â¸¦ ÀϺη¯ ÁÙ¿© ³õ¾Ò½À´Ï´Ù. Äڵ带 ÀÚ¼¼È÷ È®ÀÎÇϽ÷Á¸é ±×³É º¹»çÇؼ ¸Þ¸ðÀå¿¡¼ º¼ °ÍÀ» ±ÇÇÕ´Ï´Ù.
HTML Code ºñ±³
Table for Layout |
CSS Layout |
89 line |
39 line |
2,661 byte |
1,027 byte |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> <title>Table for Layout</title> <link href="TableForLayout.css" rel="stylesheet" type="text/css" /> </head> <body style="margin:0"> <p id="moveTo"><a href="CSSLayout.html">Go to CSS Layout</a></p> <table width="100%" border="0" cellspacing="0" cellpadding="20"> <tr> <td colspan="3" valign="top" id="header">Table for Layout</td> </tr> <tr> <td width="20%" height="300" valign="top" style="background:#666"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="menu"> <tr> <th style="height:30px; background:#999">2Depth Title </th> </tr> <tr> <td>Menu1</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu2</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu3</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu4</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Menu5</td> </tr> <tr> <td class="line"></td> </tr> </table></td> <td width="60%" height="300" valign="top" style="background:#999"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="pageTitle"> <tr> <th style="height:30px">3Depth Title </th> </tr> </table> <table width="100%" cellspacing="0"> <tr> <td id="text">Content </td> </tr> </table></td> <td width="20%" height="300" valign="top" style="background:#CCC"><table width="100%" border="0" cellspacing="0" cellpadding="5" id="links"> <tr> <th style="height:30px; background:#666">Links </th> </tr> <tr> <td>Link List 1</td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Link List 2 </td> </tr> <tr> <td class="line"></td> </tr> <tr> <td>Link List 1</td> </tr> <tr> <td class="line"></td> </tr> </table></td> </tr> <tr> <td colspan="3" valign="top" id="footer" style="background:#333"><a href="http://naradesign.net/">naradesign.net</a></td> </tr> </table> </body> </html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> <title>CSS Layout</title> <link href="CSSLayout.css" rel="stylesheet" type="text/css" /> </head> <body> <p id="moveTo"><a href="TableForLayout.html">Go to Table for Layout</a></p> <h1>CSS Layout</h1> <div id="center"> <div id="menu"> <h2>2Depth Title </h2> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> <li>Menu4</li> <li>Menu5</li> </ul> </div> <div id="content"> <h3>3Depth Title </h3> <div id="text"> Content </div> </div> <div id="links"> <h3>Links</h3> <ul> <li>Link List 1</li> <li>Link List 2</li> <li>Link List 3 </li> </ul> </div> </div> <address id="footer"> <a href="http://naradesign.net/">naradesign.net</a> </address> </body> </html> |
CSS Code ºñ±³
Table for Layout |
CSS Layout |
17 line |
23 line |
1,030 byte |
1,771 byte |
* { font-size:small; font-family:Arial} a { font:inherit; color:#FFF; text-decoration:none} a:hover { text-decoration:underline} #moveTo { position:absolute; top:4em; right:2em} #header { font-size:5em; color:#FFF; font-weight:bold; background:#000} #menu th { border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left} #menu td { font-size:small; font-weight:bold; color:#FFF} #menu td.line { height:1px; padding:0; background:#FFF} #pageTitle { margin-bottom:1em; background:#999} #pageTitle th, #link th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666} #text { color:#FFF;} #links { margin-bottom:1em} #links th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666} #links td { color:#FFF} #links td.line { height:1px; padding:0; background:#FFF} #footer { font-family: Verdana; font-size:x-large; font-weight:bold; font-style:italic; color:#FFF} |
* { margin:0; padding:0; font-size:small; font-family:Arial} h1 { font-size:5em; color:#FFF; font-weight:bold; background:#000; padding:20px} h2 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#999; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0} h3 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#666; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0} a { font:inherit; color:#FFF; text-decoration:none} a:hover { text-decoration:underline} #moveTo { position:absolute; top:4em; right:2em} #center { position:relative; overflow:hidden} #menu { position:relative; width:20%; background:#666; float:left; height:300px} #menu ul { margin:20px; margin-top:0; padding:0} #menu li { padding:5px; border-bottom:1px solid #FFF; font-weight:bold; color:#FFF; list-style:none} #content { position:relative; background: #999; font-size:small; font-family:Verdana; color:#FFF; width:60%; float:left; height:300px} #content h3 { margin-bottom:1em} #text { margin:20px; margin-top:0; line-height:150%; font-family:Verdana} #text table { border-left:1px solid #CCC; border-top:1px solid #CCC} #text table caption { font-weight:bold; text-align:left} #text table th { background:#666} #text table th, #text table td { padding:.5em; border-right:1px solid #CCC; border-bottom:1px solid #CCC; text-align:center} #links { position:relative; float:left; background:#CCCCCC; width:20%; clear:right; height:300px} #links ul { margin:20px; margin-top:0; padding:0} #links li { padding:5px; border-bottom:1px solid #FFF; color:#FFF; list-style:none} #footer { position:relative; clear:both; background: #333; font-family: Verdana; font-size:x-large; font-weight:bold; color:#FFF; padding:20px } |
CSS LayoutÀÇ °æ¿ì HTML ÆÄÀÏÀÇ ¿ë·®Àº 50% ÀÌ»ó Àý°¨µË´Ï´Ù. CSSÆÄÀÏÀÇ ¿ë·®Àº ¾à 70% Á¤µµ Áõ°¡ÇÏ¿´Áö¸¸ CSSÆÄÀÏÀº À¥ »çÀÌÆ® Á¢¼Ó½Ã µü Çѹø ·ÎµåµÇ°í ·ÎÄà PCÀÇ Ä³½Ã¸Þ¸ð¸®¿¡¼ ÀçÈ°¿ë µÇ¹Ç·Î Àü¼Û·®¿¡ ¹ÌÄ¡´Â ºÎÇÏ´Â ¹«½ÃÇصµ ÁÁÀº ¼öÁØÀÔ´Ï´Ù. ÀÌ ½ÇÇè¿¡¼´Â ºñ·Ï ÇϳªÀÇ À¥ ÆäÀÌÁö¸¦ ´Ü¼ø ºñ±³ÇÏ¿´Áö¸¸ À¥ ÆäÀÌÁöÀÇ ¼ö°¡ Áõ°¡Çϸé Áõ°¡ÇÒ ¼ö·Ï À¥ Ç¥ÁØ ¹æ½ÄÀÇ CSS Layout Code´Â °æÁ¦ÀûÀÎ È¿°ú°¡ ¹è°¡µË´Ï´Ù.
»ç¶÷À̳ª ·Îº¿(ÄÄÇ»ÅÍ)ÀÌ ÀÌÇØÇϱ⠽¬¿î ±¸Á¶°¡ µË´Ï´Ù.
Äڵ尡 ÁÙ¾îµé±â ¶§¹®¿¡ °³¹ßÀÚµéÀÌ Äڵ庸±â°¡ ¼ö¿ùÇØ Áø´Ù´Â °ÍÀº ½±°Ô ÃßÃøÇÒ ¼ö ÀÖ½À´Ï´Ù. Áï, »ðÁúÀ» ÁÙ¿©ÁÖÁÒ. ÇÏÁö¸¸ ±×·± Á¡Àº °Ü¿ì ºÎ°¡ÀûÀÎ ÀÌÁ¡¿¡ ºÒ°úÇÕ´Ï´Ù. À¥ Ç¥ÁØ ¹æ½ÄÀÇ HTML ÄÚµå´Â ¸ð¹ÙÀÏ ÀåÄ¡¸¦ Æ÷ÇÔÇÑ ¾î¶² Á¾·ùÀÇ À¥ ºê¶ó¿ìÀú ÀåÄ¡¿¡¼ Ãâ·Â µÇ´õ¶óµµ ±×°ÍÀ» ÀÌÇØÇÒ ¼ö ÀÖ´Â ¼öÁØÀ¸·Î ·»´õ¸µ µË´Ï´Ù. ¶ÇÇÑ °Ë»ö¿£ÁøÀ¸·ÎºÎÅÍ ³ôÀº Á¡¼ö¸¦ ¹Þ½À´Ï´Ù. ƯÈ÷ Title ÅÂ±×¿Í h1~h6 µîÀÇ Á¦¸ñÅÂ±× ¹× alt ÅؽºÆ®¸¦ »ç¿ëÇÒ ¶§ ±×·¸½À´Ï´Ù. °Ë»ö¿£ÁøÀÇ Á¢±Ù¼ºÀÌ ³ô¾ÆÁ®¼ ÇÇ°Ë»ö µÉ È®·üÀÌ ³ô¾ÆÁý´Ï´Ù.
À¯Áöº¸¼ö°¡ ½¬¿öÁö°í À¯Áöº¸¼ö ºñ¿ëÀ» Àý°¨½ÃÄÑ ÁÝ´Ï´Ù.
À¥ »çÀÌÆ®ÀÇ µðÀÚÀθ¸ °³ÆíÇÑ´Ù°í °¡Á¤ÇÒ ¶§ Table ±â¹ÝÀ¸·Î LayoutµÈ ÆäÀÌÁöµéÀº LayoutÀ» º¯°æÇϱâ À§ÇÏ¿© ¼öõ ÆäÀÌÁöÀÇ HTML ¹®¼¸¦ ¸ðµÎ ¿¾î¼ ¼öÁ¤ÇØ¾ß ÇÏ´Â °íÅëÀÌ µû¸¨´Ï´Ù. ÇÏÁö¸¸ CSS ±â¹ÝÀ¸·Î LayoutµÈ À¥»çÀÌÆ®´Â HTML ÆÄÀÏÀº ¿¾îº¼ ÇÊ¿äÁ¶Â÷ ¾ø¾îÁý´Ï´Ù. ºÒ°ú ¸î°³ÀÇ CSSÆÄÀÏÀ» ¼öÁ¤ÇÏ´Â °ÍÀ¸·Î ¸Å¿ì °£´ÜÇÏ°Ô ¼öõ°³ÀÇ À¥ ÆäÀÌÁö µðÀÚÀÎÀ» °³ÆíÇÒ ¼ö ÀÖ½À´Ï´Ù. Ç¥Çö¿ä¼Ò¸¦ CSS·Î ¿Ïº®ÇÏ°Ô ºÐ¸®Çß´Ù¸é HTMLÆÄÀÏÀ» ¼öÁ¤ÇØ¾ß ÇÏ´Â »óȲÀº ¿ÀÁ÷ µ¥ÀÌÅÍ°¡ ¾÷µ¥ÀÌÆ® µÉ ¶§ »ÓÀÔ´Ï´Ù.
À¥ Á¢±Ù¼º ¹®Á¦´Â À¥ Ç¥Áظ¸ ÁöÅ°¸é 90% ÀÌ»ó ÇØ°á µË´Ï´Ù.
À¥Àº ž ¶§ºÎÅÍ º¸Æí¼ºÀ» ÀüÁ¦ÇÏ¿´½À´Ï´Ù. Áï, À¥ Ç¥Áظ¸ ÁöÅ°¸é ´©±¸³ª Á¢±ÙÇÒ ¼ö ÀÖµµ·Ï ÀÌ¹Ì ±×·¸°Ô ¼³°è µÇ¾î ÀÖ´Ù´Â ÀÇ¹Ì ÀÔ´Ï´Ù. °¡Àå ªÀº ½Ã°£¿¡ Á¢±Ù¼ºÀ» Å©°Ô ÁõÁø½Ãų ¼ö ÀÖ´Â ¹æ¹ýÀ¸·Î¼ image ¿ä¼Ò¿¡ ´ëÇÑ alt ÅؽºÆ®¸¦ °Á¶ÇÏ°í Àִµ¥ ÀÌ°ÍÀº WCAG ÁöħÀ̱â ÀÌÀü¿¡ XHTML Ç¥ÁØ ¹®¹ýÀÔ´Ï´Ù. ½ÇÁ¦·Î WCAG ÁöħÀº XHTMLÀÇ Ç¥ÁØ ¹®¹ý °¡¿îµ¥ Á¢±Ù¼º À̽´¸¸ Ãß·Á³» ³õ°í ±×°ÍÀ» ÁöÅ°¶ó°í ¸»ÇÏ´Â ¹®ÀåÀÌ ¸¹½À´Ï´Ù.