{"id":346,"date":"2011-12-31T02:26:40","date_gmt":"2011-12-31T02:26:40","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=346"},"modified":"2011-12-31T02:26:40","modified_gmt":"2011-12-31T02:26:40","slug":"html-%ec%9b%b9-%ed%91%9c%ec%a4%80-%ec%bd%94%eb%94%a9%ec%9d%98-%ec%9e%a5%ec%a0%90-table-for-layout%ea%b3%bc-css-layout%ec%9d%98-%eb%b9%84%ea%b5%90-%ec%8b%a4%ed%97%98","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=346","title":{"rendered":"html : \uc6f9 \ud45c\uc900 \ucf54\ub529\uc758 \uc7a5\uc810. Table for Layout\uacfc CSS Layout\uc758 \ube44\uad50 \uc2e4\ud5d8."},"content":{"rendered":"

\uc6f9 \ud45c\uc900 \ucf54\ub529\uc758 \uc7a5\uc810. Table for Layout\uacfc CSS Layout\uc758 \ube44\uad50 \uc2e4\ud5d8.<\/a><\/h1>\n

\ubcf8\ubb38 \uac74\ub108 \ub6f0\uae30<\/a><\/p>\n

\n

\uc57d 1\ub144 \uc804 \ub124\uc774\ubc84 \ube14\ub85c\uadf8\ub97c \uc0ac\uc6a9\ud558\uba74\uc11c \ub3d9\uc77c\ud55c \uc2e4\ud5d8\uc744 \ud588\ub358 \uc801\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uadf8 \ub2f9\uc2dc\uc5d0\ub294 Table Layout\uacfc DIV Layout\uc744 \ube44\uad50\ud55c\ub2e4\uace0 \ub9d0\ud588\uc5c8\uc9c0\ub9cc \uc0ac\uc2e4 Table Layout \uc774\ub77c\ub294 \ub9d0\uacfc DIV Layout \uc774\ub77c\ub294 \ub9d0\uc740 \ubaa8\ub450 \uc798\ubabb\ub41c \ud45c\ud604\uc785\ub2c8\ub2e4. Table Layout \uc774\ub77c\ub294 \uc6a9\uc5b4\ub294 Table\uc774 \uaca9\uc790\ud615\uc758 2\ucc28\uc6d0 \ub370\uc774\ud130\ub97c \ub9c8\ud06c\uc5c5 \ud558\ub294 \uc6a9\ub3c4\ub97c \uc9c0\ub2c8\uace0 \uc788\ub2e4\ub294 \uc810\uc5d0\uc11c Layout \uc774\ub77c\ub294 \ud45c\ud604\uacfc \ud568\uaed8 \uc0ac\uc6a9\ud55c \uac83\uc774 \uc798\ubabb\ub41c \ud45c\ud604\uc774\uba70, DIV Layout \uc774\ub77c\ub294 \uc6a9\uc5b4\ub294 DIV\uac00 \uc758\ubbf8\ub97c \uadf8\ub8f9\uc9d3\ub294 \uc6a9\ub3c4\ub97c \uc9c0\ub2c8\uace0 \uc788\ub2e4\ub294 \uc810\uc5d0\uc11c \uc5ed\uc2dc Layout\uacfc \uacb0\ud569\ud55c \uac83\uc740 \uc798\ubabb\ub41c \ud45c\ud604 \uc785\ub2c8\ub2e4. \uacb0\uad6d Layout \uc774\ub77c\ub294 \uac83\uc740 \ud654\uba74\ubc30\uce58\ub97c \uc704\ud55c \ud45c\ud604\uc5d0 \ud574\ub2f9\ud558\uae30 \ub54c\ubb38\uc5d0 \uc5b4\ub5a4 (X)HTML \uc694\uc18c\uc640\ub3c4 \uc870\ud569\ud558\uc5ec \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \uc798\ubabb\ub41c \ud45c\ud604\uc774\ub77c\uace0 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Table Layout \uc774\ub77c\ub294 \ub9d0\uc740 \uc0ac\uc2e4 \u2018Table for Layout\u2019 \uc989, \u2018\ub808\uc774\uc544\uc6c3\uc744 \uc704\ud558\uc5ec \uc0ac\uc6a9\ub41c \ud14c\uc774\ube14\u2019 \uc815\ub3c4\ub85c \ubc16\uc5d0 \ud45c\ud604\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. \ub450 \uac00\uc9c0 \ud45c\ud604\uc774 \ubcc4\ubc18 \ucc28\uc774\uac00 \uc5c6\ub294 \uac83\ucc98\ub7fc \ub290\uaef4\uc9c0\ub294 \ubd84\ub4e4\ub3c4 \uacc4\uc2e4\ud14c\uc9c0\ub9cc \uc0ac\uc2e4 \uc5c4\uccad\ub09c \ucc28\uc774\uac00 \uc874\uc7ac\ud569\ub2c8\ub2e4. \uc804\uc790\ub294 Table\uc774 Layout\uc744 \uc704\ud558\uc5ec \uc0ac\uc6a9\ub418\uace0 \uc788\uace0 \ub610 \uadf8\ub7f4 \uc218\ub3c4 \uc788\ub2e4\ub294 \uac83\uc744 \uc804\uc81c \ud558\uc9c0\ub9cc \ud6c4\uc790\ub294 Table\uc774 Layout \uc6a9\ub3c4\ub85c \uc0ac\uc6a9\ub418\ub294 \uac83\uc744 \ud655\uc2e4\ud558\uac8c \uacbd\uacc4\ud558\uc600\uae30 \ub54c\ubb38\uc5d0 \uc0ac\uc6a9\ub418\ub294 \ud45c\ud604\uc785\ub2c8\ub2e4. \uc5b4\uca0c\uac70\ub098 \uc774\ubbf8 \ub124\uc774\ubc84\uc5d0\uc11c\ub9cc 162\ubd84\uc774\ub098 \uc2a4\ud06c\ub7a9\uc744 \ud558\uc168\uace0 \uc800\ub294 1\ub144\uc774 \uc9c0\ub09c \ucd5c\uadfc\uc5d0\uc11c\uc57c \ud574\ub2f9 \ud3ec\uc2a4\ud2b8\ub97c \uc218\uc815\ud558\uc600\ub294\ub370 1\ub144\ub3d9\uc548 \uc5ec\ub7ec \ubd84\ub4e4\uaed8 \uc798\ubabb\ub41c \uc815\ubcf4\ub97c \uc81c\uacf5\ud588\ub2e4\ub294 \uc0ac\uc2e4 \ub54c\ubb38\uc5d0 \uc57d\uac04\uc758 \uc8c4\ucc45\uac10\uc744 \uac00\uc9c0\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uadf8\uac83\uc744 \ub9cc\ud68c\ud560 \uc694\ub7c9\uc73c\ub85c \ub2e4\uc2dc \ud574\ub2f9 \ucf54\ub4dc\ub97c \uc190\uc9c8\ud558\uace0 \uc774\uacf3\uc5d0 \uc62c\ub824\ub193\uc2b5\ub2c8\ub2e4. \uc774\uc81c\ub294 \uc790\uc218\ud558\uc5ec \uad11\uba85\ucc3e\uace0 \uc2f6\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n\n
Table for Layout?\uc608\uc81c\ubcf4\uae30<\/a><\/th>\nCSS Layout?\uc608\uc81c\ubcf4\uae30<\/a><\/th>\n<\/tr>\n
\"Table<\/td>\n\"CSS<\/td>\n<\/tr>\n<\/thead>\n<\/table>\n

\uc6f9 \ud45c\uc900 \ubc29\uc2dd\uc758 CSS Layout\uc740 \ucf58\ud150\ud2b8\uac00 \ub17c\ub9ac\uc801\uc73c\ub85c \uc120\ud615\ud654 \ub429\ub2c8\ub2e4.<\/h3>\n

\uc0c1\uae30 \ub450 \uac1c\uc758 \uc774\ubbf8\uc9c0\ub294 \ub3d9\uc77c\ud55c Layout\uc744 \uc81c\uacf5\ud558\uace0 \uc788\uc9c0\ub9cc \ucf54\ub4dc\ub294 \uac01\uac01 \ub2e4\ub985\ub2c8\ub2e4. \uc774\ubbf8 \uc9d0\uc791\ud558\uace0 \uacc4\uc168\uaca0\uc9c0\ub9cc \uc774\ubc88\uc5d0\ub294 CSS\ub97c \uc81c\uac70\ud55c \uc0c1\ud0dc\ub85c \ud55c\ubc88 \ubcf4\uc5ec\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. CSS\ub97c \uc81c\uac70\ud558\uac8c \ub418\uba74 \ucf58\ud150\ud2b8\uac00 \uc120\ud615\ud654 \ub418\ub294 \ubaa8\uc2b5\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ud655\uc778\ud560 \uc218 \uc788\uace0 \uc120\ud615\ud654 \ud558\uc600\uc744 \ub54c \ucf58\ud150\ud2b8\uc758 \ub098\uc5f4 \uc21c\uc11c\uc5d0 \ubb34\ub9ac\uac00 \uc5c6\ub2e4\uba74 \uadf8\uac83\uc740 \uc5b4\ub5a4 \uc7a5\uce58\uc5d0\uc11c \ubcf4\ub354\ub77c\ub3c4 \ub17c\ub9ac\uc801\uc73c\ub85c \ubc14\ub974\uac8c \uc774\ud574\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc67c\ucabd\uc740 \ud654\uba74\ubc30\uce58\ub97c \uc704\ud558\uc5ec Table\uc774 \uc0ac\uc6a9\ub41c \ud398\uc774\uc9c0\uc774\uba70 \uc624\ub978\ucabd\uc774 CSS\ub97c \uc774\uc6a9\ud558\uc5ec Layout\ub41c \ud398\uc774\uc9c0 \uc785\ub2c8\ub2e4.Opera Mini<\/a>\uc640 \uac19\uc740 \ud734\ub300\uc6a9 \uc6f9 \ube0c\ub77c\uc6b0\uc9d5 \uc7a5\uce58\ub294 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub80c\ub354\ub9c1 \ud560 \ub54c Table\uc744 \ubaa8\ub450 \uac77\uc5b4\ub0b4\uace0 CSS\uc870\ucc28 \uc81c\uac70\ub41c \uc0c1\ud0dc\ub85c \ud45c\uc2dc\ud569\ub2c8\ub2e4. \ub530\ub77c\uc11c \uc544\ub798 \ub450 \uac00\uc9c0 \uacbd\uc6b0\uc758 \ud398\uc774\uc9c0 \uac00\uc6b4\ub370 \uc5b4\ub5a4 \ud398\uc774\uc9c0\uac00 \ub17c\ub9ac\uc801\uc73c\ub85c \uc120\ud615\ud654 \ub420 \uac83\uc778\uc9c0\ub294 \uad73\uc774 \ubcf4\uc9c0 \uc54a\ub354\ub77c\ub3c4 \uc27d\uac8c \ucd94\uce21\uc774 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc0ac\uc2e4 \uc774\uac83\uc740 CSS Layout\uc758 \uc601\ud5a5\uc774\ub77c\uae30 \ubcf4\ub2e4\ub294 Markup\uc744 \uc798 \ud588\uae30 \ub54c\ubb38\uc5d0 \ubcfc \uc218 \uc788\ub294 \uacb0\uacfc \uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uac70\uafb8\ub85c \uc0dd\uac01\ud558\uba74 \ud45c\ud604\uc694\uc18c\uac00 Markup\uc73c\ub85c\ubd80\ud130 \uc644\uc804\ud788 \ubd84\ub9ac\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc774\ub807\uac8c \ub17c\ub9ac\uc801\uc73c\ub85c Markup \ud558\ub294\uac83\uc774 \uac00\ub2a5\ud574 \uc9d1\ub2c8\ub2e4. Layout\uc5d0 Table\uc744 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\ub294 \ub9c8\ud06c\uc5c5\uc774 \ud45c\ud604\uc694\uc18c\ub97c \ud3ec\ud568\ud558\uace0 \uc788\uae30 \ub54c\ubb38\uc5d0 \ucf58\ud150\ud2b8\ub97c \ub17c\ub9ac\uc801\uc73c\ub85c \ubc30\uce58\ud558\ub824\uace0 \uc2dc\ub3c4\ud558\uba74 \ud45c\ud604\ubb38\uc81c\uc640 \ucda9\ub3cc\ud558\uac8c \ub418\uace0 \uacb0\uad6d \ub17c\ub9ac\ubcf4\ub2e4\ub294 \ud45c\ud604\uc744 \uc704\ud55c \uc6a9\ub3c4\ub85c \ub9c8\ud06c\uc5c5\uc744 \uc0ac\uc6a9\ud558\uac8c \ub418\uc5b4 \ub17c\ub9ac\uc801\uc778 \ubc30\uce58\uc640\ub294 \uac70\ub9ac\uac00 \uba40\uc5b4\uc9c0\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n\n
CSS\uac00 \uc81c\uac70\ub41c Table for Layout?\uc608\uc81c\ubcf4\uae30<\/a><\/th>\nCSS\uac00 \uc81c\uac70\ub41c Web Standard Layout?\uc608\uc81c\ubcf4\uae30<\/a><\/th>\n<\/tr>\n
\"Table<\/td>\n\"CSS<\/td>\n<\/tr>\n<\/thead>\n<\/table>\n

\ubcf4\ud1b5 Table\uc744 \uc120\ud615\ud654 \ud558\ub354\ub77c\ub3c4 \ucf58\ud150\ud2b8\uc758 \uc21c\uc11c\uac00 \uc644\uc804\ud788 \ub4a4\uc8fd\ubc15\uc8fd\uc73c\ub85c \uc778\uc2dd\ub418\uc9c0\ub294 \uc54a\uc2b5\ub2c8\ub2e4. \uc65c\ub0d0\ud558\uba74 Table\uc744 \uac77\uc5b4\ub0b4\ub294 \uacbd\uc6b0 \uc88c\uce21 \uc0c1\ub2e8\uc73c\ub85c\ubd80\ud130 \uc6b0\uce21 \ud558\ub2e8\uc73c\ub85c \ucf58\ud150\ud2b8\uac00 \uc120\ud615\ud654 \ub418\ub294\ub370 \uadf8\ub7ec\ud55c \uc21c\uc11c\uc5d0 \ub9de\uac8c \ud398\uc774\uc9c0\uc758 \ucf58\ud150\ud2b8\ub97c \ubc30\uce58\ud558\ub294 \uacbd\uc6b0\ub3c4 \uc788\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uadf8\uac83\uc740 \uc6b4\uc774 \uc544\uc8fc \uc88b\uc740 \uacbd\uc6b0\uc774\uba70 \ub300\ubd80\ubd84\uc758 \uacbd\uc6b0\ub294 \ub17c\ub9ac\uc801\uc778 \uc21c\uc11c\uc5d0 \ubb38\uc81c\uac00 \uc0dd\uae30\uac8c \ub429\ub2c8\ub2e4.<\/p>\n

CSS Layout\uc740 Table for Layout\uc5d0 \ube44\ud558\uc5ec \ud30c\uc77c\uc758 \uc6a9\ub7c9\uc744 50% \uc774\uc0c1 \uc808\uac10\ud574 \uc90d\ub2c8\ub2e4.<\/h3>\n

\ubb34\uc5c7\uc778\uac00 \uc6d0\ud558\ub294 \uc704\uce58\uc5d0 \ud45c\uc2dc\ud558\uae30 \uc704\ud558\uc5ec Table\uc744 Layout\uc5d0 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\ub294 <table><tr><td>\ub0b4\uc6a9<\/td><\/tr><\/table> \ud615\uc2dd\uc73c\ub85c \ucf54\ub529 \ub418\uc9c0\ub9cc CSS Layout\uc740 <div>\ub0b4\uc6a9<\/div> \ud615\uc2dd\uc73c\ub85c \ucf54\ub529 \ub429\ub2c8\ub2e4. \uc608\uc81c\ucf54\ub4dc \uc804\uccb4\ub97c \ubcf4\uc5ec\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4. \ud654\uba74(\ub610\ub294 \uc9c0\uba74) \uad00\uacc4\uc0c1 \ucf54\ub4dc\ub97c \ubaa8\ub450 \ub2f4\uc544\ub0b4\uba74 \ud654\uba74\uc774 \ub108\ubb34 \ucee4\uc9c0\ubbc0\ub85c \ucf54\ub4dc\uc758 \uc11c\uccb4\ud06c\uae30\ub97c \uc77c\ubd80\ub7ec \uc904\uc5ec \ub193\uc558\uc2b5\ub2c8\ub2e4. \ucf54\ub4dc\ub97c \uc790\uc138\ud788 \ud655\uc778\ud558\uc2dc\ub824\uba74 \uadf8\ub0e5 \ubcf5\uc0ac\ud574\uc11c \uba54\ubaa8\uc7a5\uc5d0\uc11c \ubcfc \uac83\uc744 \uad8c\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n\n\n\n
Table for Layout<\/th>\nCSS Layout<\/th>\n<\/tr>\n
89 line<\/td>\n39 line<\/td>\n<\/tr>\n
2,661 byte<\/td>\n1,027 byte<\/td>\n<\/tr>\n
<!DOCTYPE html PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d \u201chttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d>
\n<html xmlns=\u201dhttp:\/\/www.w3.org\/1999\/xhtml\u201d>
\n<head>
\n<meta http-equiv=\u201dContent-Type\u201d content=\u201dtext\/html; charset=euc-kr\u201d \/>
\n<title>Table for Layout<\/title>
\n<link href=\u201dTableForLayout.css\u201d rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d \/>
\n<\/head>
\n<body style=\u201dmargin:0\u2033>
\n<p id=\u201dmoveTo\u201d><a href=\u201dCSSLayout.html\u201d>Go to CSS Layout<\/a><\/p>
\n<table width=\u201d100%\u201d border=\u201d0\u2033 cellspacing=\u201d0\u2033 cellpadding=\u201d20\u2033>
\n<tr>
\n<td colspan=\u201d3\u2033 valign=\u201dtop\u201d id=\u201dheader\u201d>Table for Layout<\/td>
\n<\/tr>
\n<tr>
\n<td width=\u201d20%\u201d height=\u201d300\u2033 valign=\u201dtop\u201d style=\u201dbackground:#666\u2033><table width=\u201d100%\u201d border=\u201d0\u2033 cellspacing=\u201d0\u2033 cellpadding=\u201d5\u2033 id=\u201dmenu\u201d>
\n<tr>
\n<th style=\u201dheight:30px; background:#999\u2033>2Depth Title <\/th>
\n<\/tr>
\n<tr>
\n<td>Menu1<\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<tr>
\n<td>Menu2<\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<tr>
\n<td>Menu3<\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<tr>
\n<td>Menu4<\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<tr>
\n<td>Menu5<\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<\/table><\/td>
\n<td width=\u201d60%\u201d height=\u201d300\u2033 valign=\u201dtop\u201d style=\u201dbackground:#999\u2033><table width=\u201d100%\u201d border=\u201d0\u2033 cellspacing=\u201d0\u2033 cellpadding=\u201d5\u2033 id=\u201dpageTitle\u201d>
\n<tr>
\n<th style=\u201dheight:30px\u201d>3Depth Title <\/th>
\n<\/tr>
\n<\/table>
\n<table width=\u201d100%\u201d cellspacing=\u201d0\u2033>
\n<tr>
\n<td id=\u201dtext\u201d>Content <\/td>
\n<\/tr>
\n<\/table><\/td>
\n<td width=\u201d20%\u201d height=\u201d300\u2033 valign=\u201dtop\u201d style=\u201dbackground:#CCC\u201d><table width=\u201d100%\u201d border=\u201d0\u2033 cellspacing=\u201d0\u2033 cellpadding=\u201d5\u2033 id=\u201dlinks\u201d>
\n<tr>
\n<th style=\u201dheight:30px; background:#666\u2033>Links <\/th>
\n<\/tr>
\n<tr>
\n<td>Link List 1<\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<tr>
\n<td>Link List 2 <\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<tr>
\n<td>Link List 1<\/td>
\n<\/tr>
\n<tr>
\n<td class=\u201dline\u201d><\/td>
\n<\/tr>
\n<\/table><\/td>
\n<\/tr>
\n<tr>
\n<td colspan=\u201d3\u2033 valign=\u201dtop\u201d id=\u201dfooter\u201d style=\u201dbackground:#333\u2033><a href=\u201dhttp:\/\/naradesign.net\/\u201d>naradesign.net<\/a><\/td>
\n<\/tr>
\n<\/table>
\n<\/body>
\n<\/html><\/td>\n		<!DOCTYPE html PUBLIC \u201c-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d \u201chttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d>
\n<html xmlns=\u201dhttp:\/\/www.w3.org\/1999\/xhtml\u201d>
\n<head>
\n<meta http-equiv=\u201dContent-Type\u201d content=\u201dtext\/html; charset=euc-kr\u201d \/>
\n<title>CSS Layout<\/title>
\n<link href=\u201dCSSLayout.css\u201d rel=\u201dstylesheet\u201d type=\u201dtext\/css\u201d \/>
\n<\/head>
\n<body>
\n<p id=\u201dmoveTo\u201d><a href=\u201dTableForLayout.html\u201d>Go to Table for Layout<\/a><\/p>
\n<h1>CSS Layout<\/h1>
\n<div id=\u201dcenter\u201d>
\n<div id=\u201dmenu\u201d>
\n<h2>2Depth Title <\/h2>
\n<ul>
\n<li>Menu1<\/li>
\n<li>Menu2<\/li>
\n<li>Menu3<\/li>
\n<li>Menu4<\/li>
\n<li>Menu5<\/li>
\n<\/ul>
\n<\/div>
\n<div id=\u201dcontent\u201d>
\n<h3>3Depth Title <\/h3>
\n<div id=\u201dtext\u201d> Content <\/div>
\n<\/div>
\n<div id=\u201dlinks\u201d>
\n<h3>Links<\/h3>
\n<ul>
\n<li>Link List 1<\/li>
\n<li>Link List 2<\/li>
\n<li>Link List 3 <\/li>
\n<\/ul>
\n<\/div>
\n<\/div>
\n<address id=\u201dfooter\u201d>
\n<a href=\u201dhttp:\/\/naradesign.net\/\u201d>naradesign.net<\/a>
\n<\/address>
\n<\/body>
\n<\/html><\/td>\n<\/tr>\n<\/thead>\n<\/table>\n\n\n\n\n\n\n
Table for Layout<\/th>\nCSS Layout<\/th>\n<\/tr>\n
17 line<\/td>\n23 line<\/td>\n<\/tr>\n
1,030 byte<\/td>\n1,771 byte<\/td>\n<\/tr>\n
* { font-size:small; font-family:Arial}
\na { font:inherit; color:#FFF; text-decoration:none}
\na:hover { text-decoration:underline}
\n#moveTo { position:absolute; top:4em; right:2em}
\n#header { font-size:5em; color:#FFF; font-weight:bold; background:#000}
\n#menu th { border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left}
\n#menu td { font-size:small; font-weight:bold; color:#FFF}
\n#menu td.line { height:1px; padding:0; background:#FFF}
\n#pageTitle { margin-bottom:1em; background:#999}
\n#pageTitle th,
\n#link th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666}
\n#text { color:#FFF;}
\n#links { margin-bottom:1em}
\n#links th {border-bottom:3px solid #FFF; font-size:x-large; font-weight:bold; color: #FF0; text-align:left; background:#666}
\n#links td { color:#FFF}
\n#links td.line { height:1px; padding:0; background:#FFF}
\n#footer { font-family: Verdana; font-size:x-large; font-weight:bold; font-style:italic; color:#FFF}<\/td>\n		* { margin:0; padding:0; font-size:small; font-family:Arial}
\nh1 { font-size:5em; color:#FFF; font-weight:bold; background:#000; padding:20px}
\nh2 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#999; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0}
\nh3 { padding:5px; font-size:x-large; font-weight:bold; color:#FF0; background:#666; border-bottom:3px solid #FFF; margin:20px; margin-bottom:0}
\na { font:inherit; color:#FFF; text-decoration:none}
\na:hover { text-decoration:underline}
\n#moveTo { position:absolute; top:4em; right:2em}
\n#center { position:relative; overflow:hidden}
\n#menu { position:relative; width:20%; background:#666; float:left; height:300px}
\n#menu ul { margin:20px; margin-top:0; padding:0}
\n#menu li { padding:5px; border-bottom:1px solid #FFF; font-weight:bold; color:#FFF; list-style:none}
\n#content { position:relative; background: #999; font-size:small; font-family:Verdana; color:#FFF; width:60%; float:left; height:300px}
\n#content h3 { margin-bottom:1em}
\n#text { margin:20px; margin-top:0; line-height:150%; font-family:Verdana}
\n#text table { border-left:1px solid #CCC; border-top:1px solid #CCC}
\n#text table caption { font-weight:bold; text-align:left}
\n#text table th { background:#666}
\n#text table th,
\n#text table td { padding:.5em; border-right:1px solid #CCC; border-bottom:1px solid #CCC; text-align:center}
\n#links { position:relative; float:left; background:#CCCCCC; width:20%; clear:right; height:300px}
\n#links ul { margin:20px; margin-top:0; padding:0}
\n#links li { padding:5px; border-bottom:1px solid #FFF; color:#FFF; list-style:none}
\n#footer { position:relative; clear:both; background: #333; font-family: Verdana; font-size:x-large; font-weight:bold; color:#FFF; padding:20px }<\/td>\n<\/tr>\n<\/thead>\n<\/table>\n

CSS Layout\uc758 \uacbd\uc6b0 HTML \ud30c\uc77c\uc758 \uc6a9\ub7c9\uc740 50% \uc774\uc0c1 \uc808\uac10\ub429\ub2c8\ub2e4. CSS\ud30c\uc77c\uc758 \uc6a9\ub7c9\uc740 \uc57d 70% \uc815\ub3c4 \uc99d\uac00\ud558\uc600\uc9c0\ub9cc CSS\ud30c\uc77c\uc740 \uc6f9 \uc0ac\uc774\ud2b8 \uc811\uc18d\uc2dc \ub531 \ud55c\ubc88 \ub85c\ub4dc\ub418\uace0 \ub85c\uceec PC\uc758 \uce90\uc2dc\uba54\ubaa8\ub9ac\uc5d0\uc11c \uc7ac\ud65c\uc6a9 \ub418\ubbc0\ub85c \uc804\uc1a1\ub7c9\uc5d0 \ubbf8\uce58\ub294 \ubd80\ud558\ub294 \ubb34\uc2dc\ud574\ub3c4 \uc88b\uc740 \uc218\uc900\uc785\ub2c8\ub2e4. \uc774 \uc2e4\ud5d8\uc5d0\uc11c\ub294 \ube44\ub85d \ud558\ub098\uc758 \uc6f9 \ud398\uc774\uc9c0\ub97c \ub2e8\uc21c \ube44\uad50\ud558\uc600\uc9c0\ub9cc \uc6f9 \ud398\uc774\uc9c0\uc758 \uc218\uac00 \uc99d\uac00\ud558\uba74 \uc99d\uac00\ud560 \uc218\ub85d \uc6f9 \ud45c\uc900 \ubc29\uc2dd\uc758 CSS Layout Code\ub294 \uacbd\uc81c\uc801\uc778 \ud6a8\uacfc\uac00 \ubc30\uac00\ub429\ub2c8\ub2e4.<\/p>\n

\uc0ac\ub78c\uc774\ub098 \ub85c\ubd07(\ucef4\ud4e8\ud130)\uc774 \uc774\ud574\ud558\uae30 \uc26c\uc6b4 \uad6c\uc870\uac00 \ub429\ub2c8\ub2e4.<\/h3>\n

\ucf54\ub4dc\uac00 \uc904\uc5b4\ub4e4\uae30 \ub54c\ubb38\uc5d0 \uac1c\ubc1c\uc790\ub4e4\uc774 \ucf54\ub4dc\ubcf4\uae30\uac00 \uc218\uc6d4\ud574 \uc9c4\ub2e4\ub294 \uac83\uc740 \uc27d\uac8c \ucd94\uce21\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc989, \uc0bd\uc9c8\uc744 \uc904\uc5ec\uc8fc\uc8e0. \ud558\uc9c0\ub9cc \uadf8\ub7f0 \uc810\uc740 \uaca8\uc6b0 \ubd80\uac00\uc801\uc778 \uc774\uc810\uc5d0 \ubd88\uacfc\ud569\ub2c8\ub2e4. \uc6f9 \ud45c\uc900 \ubc29\uc2dd\uc758 HTML \ucf54\ub4dc\ub294 \ubaa8\ubc14\uc77c \uc7a5\uce58\ub97c \ud3ec\ud568\ud55c \uc5b4\ub5a4 \uc885\ub958\uc758 \uc6f9 \ube0c\ub77c\uc6b0\uc800 \uc7a5\uce58\uc5d0\uc11c \ucd9c\ub825 \ub418\ub354\ub77c\ub3c4 \uadf8\uac83\uc744 \uc774\ud574\ud560 \uc218 \uc788\ub294 \uc218\uc900\uc73c\ub85c \ub80c\ub354\ub9c1 \ub429\ub2c8\ub2e4. \ub610\ud55c \uac80\uc0c9\uc5d4\uc9c4\uc73c\ub85c\ubd80\ud130 \ub192\uc740 \uc810\uc218\ub97c \ubc1b\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 Title \ud0dc\uadf8\uc640 h1~h6 \ub4f1\uc758 \uc81c\ubaa9\ud0dc\uadf8 \ubc0f alt \ud14d\uc2a4\ud2b8\ub97c \uc0ac\uc6a9\ud560 \ub54c \uadf8\ub807\uc2b5\ub2c8\ub2e4. \uac80\uc0c9\uc5d4\uc9c4\uc758 \uc811\uadfc\uc131\uc774 \ub192\uc544\uc838\uc11c \ud53c\uac80\uc0c9 \ub420 \ud655\ub960\uc774 \ub192\uc544\uc9d1\ub2c8\ub2e4.<\/p>\n

\uc720\uc9c0\ubcf4\uc218\uac00 \uc26c\uc6cc\uc9c0\uace0 \uc720\uc9c0\ubcf4\uc218 \ube44\uc6a9\uc744 \uc808\uac10\uc2dc\ucf1c \uc90d\ub2c8\ub2e4.<\/h3>\n

\uc6f9 \uc0ac\uc774\ud2b8\uc758 \ub514\uc790\uc778\ub9cc \uac1c\ud3b8\ud55c\ub2e4\uace0 \uac00\uc815\ud560 \ub54c Table \uae30\ubc18\uc73c\ub85c Layout\ub41c \ud398\uc774\uc9c0\ub4e4\uc740 Layout\uc744 \ubcc0\uacbd\ud558\uae30 \uc704\ud558\uc5ec \uc218\ucc9c \ud398\uc774\uc9c0\uc758 HTML \ubb38\uc11c\ub97c \ubaa8\ub450 \uc5f4\uc5b4\uc11c \uc218\uc815\ud574\uc57c \ud558\ub294 \uace0\ud1b5\uc774 \ub530\ub985\ub2c8\ub2e4. \ud558\uc9c0\ub9cc CSS \uae30\ubc18\uc73c\ub85c Layout\ub41c \uc6f9\uc0ac\uc774\ud2b8\ub294 HTML \ud30c\uc77c\uc740 \uc5f4\uc5b4\ubcfc \ud544\uc694\uc870\ucc28 \uc5c6\uc5b4\uc9d1\ub2c8\ub2e4. \ubd88\uacfc \uba87\uac1c\uc758 CSS\ud30c\uc77c\uc744 \uc218\uc815\ud558\ub294 \uac83\uc73c\ub85c \ub9e4\uc6b0 \uac04\ub2e8\ud558\uac8c \uc218\ucc9c\uac1c\uc758 \uc6f9 \ud398\uc774\uc9c0 \ub514\uc790\uc778\uc744 \uac1c\ud3b8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud45c\ud604\uc694\uc18c\ub97c CSS\ub85c \uc644\ubcbd\ud558\uac8c \ubd84\ub9ac\ud588\ub2e4\uba74 HTML\ud30c\uc77c\uc744 \uc218\uc815\ud574\uc57c \ud558\ub294 \uc0c1\ud669\uc740 \uc624\uc9c1 \ub370\uc774\ud130\uac00 \uc5c5\ub370\uc774\ud2b8 \ub420 \ub54c \ubfd0\uc785\ub2c8\ub2e4.<\/p>\n

\uc6f9 \uc811\uadfc\uc131 \ubb38\uc81c\ub294 \uc6f9 \ud45c\uc900\ub9cc \uc9c0\ud0a4\uba74 90% \uc774\uc0c1 \ud574\uacb0 \ub429\ub2c8\ub2e4.<\/h3>\n

\uc6f9\uc740 \ud0dc\uc5b4\ub0a0 \ub54c\ubd80\ud130 \ubcf4\ud3b8\uc131\uc744 \uc804\uc81c\ud558\uc600\uc2b5\ub2c8\ub2e4. \uc989, \uc6f9 \ud45c\uc900\ub9cc \uc9c0\ud0a4\uba74 \ub204\uad6c\ub098 \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \uc774\ubbf8 \uadf8\ub807\uac8c \uc124\uacc4 \ub418\uc5b4 \uc788\ub2e4\ub294 \uc758\ubbf8 \uc785\ub2c8\ub2e4. \uac00\uc7a5 \uc9e7\uc740 \uc2dc\uac04\uc5d0 \uc811\uadfc\uc131\uc744 \ud06c\uac8c \uc99d\uc9c4\uc2dc\ud0ac \uc218 \uc788\ub294 \ubc29\ubc95\uc73c\ub85c\uc11c image \uc694\uc18c\uc5d0 \ub300\ud55c alt \ud14d\uc2a4\ud2b8\ub97c \uac15\uc870\ud558\uace0 \uc788\ub294\ub370 \uc774\uac83\uc740?WCAG<\/a>?\uc9c0\uce68\uc774\uae30 \uc774\uc804\uc5d0 XHTML \ud45c\uc900 \ubb38\ubc95\uc785\ub2c8\ub2e4. \uc2e4\uc81c\ub85c WCAG \uc9c0\uce68\uc740 XHTML\uc758 \ud45c\uc900 \ubb38\ubc95 \uac00\uc6b4\ub370 \uc811\uadfc\uc131 \uc774\uc288\ub9cc \ucd94\ub824\ub0b4 \ub193\uace0 \uadf8\uac83\uc744 \uc9c0\ud0a4\ub77c\uace0 \ub9d0\ud558\ub294 \ubb38\uc7a5\uc774 \ub9ce\uc2b5\ub2c8\ub2e4.<\/p>\n

 <\/p>\n

\ucd9c\ucc98 \ud83d\ude15http:\/\/naradesign.net\/wp\/2007\/02\/03\/113\/<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

\uc6f9 \ud45c\uc900 \ucf54\ub529\uc758 \uc7a5\uc810. Table for Layout\uacfc CSS Layout\uc758 \ube44\uad50 \uc2e4\ud5d8. \ubcf8\ubb38 \uac74\ub108 \ub6f0\uae30 \uc57d 1\ub144 \uc804 \ub124\uc774\ubc84 \ube14\ub85c\uadf8\ub97c \uc0ac\uc6a9\ud558\uba74\uc11c \ub3d9\uc77c\ud55c \uc2e4\ud5d8\uc744 \ud588\ub358 \uc801\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uadf8 \ub2f9\uc2dc\uc5d0\ub294 Table Layout\uacfc DIV… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/346"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=346"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/346\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}