Article Layout & Formatting | Page Layout Series Part VIIIArticle LayoutÀÌÁ¦ PLS µµ ÈĹݺο¡ ´Ù´ÞÀº °Í °°½À´Ï´Ù. ±× µ¿¾È ÁÖº¯ÀÇ È¤ÀÚ(¾î¶² »ç¶÷)´Â 'Áö±Ý±îÁö ÁøÇà ÇÑ 1 ~ 7 Æí±îÁöÀÇ ÆäÀÌÁö ºÐ·®ÀÌ ÂÀ ±ä°Ô ¾Æ´Ï³Ä.', '¿ä»õ´Â ¼ºÁúµéÀÌ ±ÞÇØ¼ ±×·¸°Ô ±æ°Ô ¸¸µé¸é ³¡±îÁö ¾È º»´Ù.' ¶ó´Â ¿ì·Á¼¯ÀÎ Ãæ°í¸¦ ÇÏ´õ±º¿ä. ¹°·Ð ÃæºÐÈ÷ ÀÌÇØ°¡ °¡´Â ¸» ÀÔ´Ï´Ù. ÇÏÁö¸¸ »ç¶÷À̶ó´Â °Ô ÀÚ±â ÀÚ½ÅÀÇ »ç°í ¹üÀ§¸¦ ¹þ¾î ³ª±â´Â Èûµç ¸ð¾ç ÀÔ´Ï´Ù. ¿å½ÉÀÎÁö ½À°üÀÎÁö Á¦°¡ ¼³¸íÇÏ°í ½ÍÀº ºÎºÐÀ» ´Ù ¼³¸íÇÏ·Á´Ù º¸´Ï ÆäÀÌÁö°¡ ±æ¾îÁö°Ô µÇ¾ú´Âµ¥, ±×³ª¸¶ ¿¹Á¦ code ¼Ó¿¡ ³ª¿À´Â DHTML button µéÀ» ³Ö¾î¼ ±æÀ̸¦ ÁÙÀδٰí ÁÙÀÎ°Ô ±× Á¤µµ ºÐ·®ÀÌ µÇ´Â±º¿ä.
±×·¸´Ù¸é º»¹® design¿¡ ÇÊ¿äÇÑ ÇüÅÂÀûÀÎ ¿ä¼Òµé¿¡´Â ¾î¶² °Í µéÀÌ ÀÖÀ»±î¿ä. ¹°·Ð µðÀÚÀÎ ÇÏ·Á°í ÇÏ´Â »çÀÌÆ®ÀÇ contents°¡ ¾î¶² °ÍÀ̳Ŀ¡ µû¶ó ´Þ¶óÁö°Ú½À´Ï´Ù¸¸ Å©°Ô ³ª´©¸é
¸ñ·ÏÀÇ Á¤¸®·Î ºÐ·ù ÇÒ ¼ö ÀÖ½À´Ï´Ù. ¿ì¼± ¸ñ·Ï¿¡ ´ëÇØ ¾Ë¾Æ º¸¸é, ¸ñ·ÏÀ̶õ ÀÛ°Ô´Â ÀÌ »çÀÌÆ®ÀÇ HTML > Áß±Þ °úÁ¤ > AnchorÀÇ ÇöÀç ¹®¼¿¡¼ÀÇ Bookmark(Ã¥°¥ÇÇ) ¿¡¼ ¼³¸íÇÑ °Í ó·³ ¹®¼ ³»ºÎÀÇ link ·Î¼ <a name="Ã¥°¥ÇÇ À̸§">¸µÅ© À̸§</a> À¸·Î ±¸¼ºµÇ°í, ÇÑ ´Ü°è È®ÀåÇϸé <a href="¹®¼ÀÇ uri">¸µÅ© À̸§</a>À» »ç¿ëÇÏ´Â ¹®¼µéÀÇ ¸ñ·Ï, Å©°Ô´Â »çÀÌÆ® ÀüüÀÇ ¹®¼ ¸ñ·Ï(Site map)ÀÌ µÉ °Í ÀÔ´Ï´Ù. ÀÌ·¯ÇÑ ¸ñ·ÏÀ» Á¤¸®Çϴµ¥´Â ¿©·¯ °¡ÀÚ ¹æ¹ýÀÌ ÀÖ°ÚÁö¸¸ ¹¹´Ï ¹¹´Ï ÇØµµ <ol> À̳ª <ul> ·Î Á¤¸®ÇÏ´Â ¹æ¹ýÀÌ °¡Àå º¸ÆíÀûÀ̸鼵µ ÁÁÀº ¹æ¹ýÀ̶ó°í »ý°¢ÇÕ´Ï´Ù. µû¶ó¼ ÇÑ °¡Áö ¿¹Á¦¸¦ º¸¸é ¸ñ·ÏÀ» UL·Î Á¤¸®
<body>
<ul style="list-style-type:disc;">
<li><a href="#">Ç׸ñ 1</a></li>
<li><a href="#">Ç׸ñ 2</a> <!-- Ç׸ñ 2 liÀÇ start tag -->
<ul style="list-style-type:square;">
<li><a href="#">ºÎ Ç׸ñ 2.1</a></li>
<li><a href="#">ºÎ Ç׸ñ 2.2</a></li>
</ul>
</li> <!-- Ç׸ñ 2 liÀÇ end tag -->
<li><a href="#">Ç׸ñ 3</a></li>
</ul>
</body>
ÀÌ·¸°Ô À§¿Í °°ÀÌ Á¤¸®ÇÒ ¼ö ÀÖ½À´Ï´Ù. ´Ù¸¸ ¿©±â¼ ÁÖÀÇÇØ¾ß ÇÒ °ÍÀº À§ÀÇ codeÁß¿¡ ±½°Ô Ç¥½ÃÇÑ ºÎ Ç׸ñÀÌ µé¾î°¡´Â li ÀÇ end tagÀ» ¹Ýµå½Ã ´Ý¾Æ¾ß XHTML ÀÇ ¹®¹ý¿¡ ¸Â´Â´Ù´Â »ç½Ç ÀÔ´Ï´Ù. ¹®´ÜÀÇ Á¤¸®º»¹®ÀÇ ¹®´Ü¿¡ »ç¿ëÇÏ´Â tagÀº P(Paragraph) tag ÀÔ´Ï´Ù. ¾î¶² block level box ¹®¼¿¡ ¹èÄ¡(layout) Çϴµ¥ ÀÖ¾î¼ ¾Ë°í ÀÖ¾î¾ß ÇÒ Áß¿äÇÑ »ç½ÇÀº ±× block level box°¡ °¡Áö°í ÀÖ´Â ÃʱⰪÀÌ ¾ó¸¶³ª µÇ´À³Ä ÇÏ´Â °Í ÀÔ´Ï´Ù. ÃʱⰪÀ» ¸ð¸£°í¼´Â ¿©·¯ °³ÀÇ block level box µéÀÌ ¹®¼¿¡ ³ª¿ µÇ¾úÀ» ¶§ ¼·Î °£ÀÇ À§Ä¡³ª ¿©¹éÀÇ Å©±â µîÀ» Á¤È®È÷ Á¶ÀýÇÒ ¼ö ¾ø±â ¶§¹® ÀÔ´Ï´Ù. µû¶ó¼ block level box°¡ È¸é »ó¿¡ Â÷ÁöÇÏ´Â ¸éÀû(width, height)°ú ¿©¹é(margin)À» ´«À¸·Î È®ÀÎÇÒ ¼ö ÀÖ¾î¾ß µÇ´Âµ¥ ¾Æ·¡¿Í °°ÀÌ <p>³»°¡ Â÷ÁöÇÏ´Â ¸éÀûÀÌ ¾ó¸¶³ª µÇÁö?</p> ó·³ codingÀ» Çϸé p tag ÀÚüÀÇ ¸éÀû Á¶Â÷µµ ´«À¸·Î È®ÀÎÇÒ ¼ö ¾ø½À´Ï´Ù. µû¶ó¼ block tag ÀÚüÀÇ ¸éÀûÀ» ´«À¸·Î È®ÀÎÇϱâ À§Çؼ´Â border³ª background-color¸¦ CSS·Î ÁöÁ¤ÇÏ´Â °ÍÀÌ °¡Àå È®½ÇÇÑ ¹æ¹ýÀ̶ó ÇÒ ¼ö ÀÖ½À´Ï´Ù. div ¼Ó¿¡ p tagÀ» ³Ö°í border¸¦ ÁöÁ¤ÇÏ¿© margin º¸±â
<body>
<div style="border:1px solid #ccc;">
<p style="background-color:#999;">¹®´Ü¿¡´Â P tagÀ» »ç¿ëÇÕ´Ï´Ù.</p>
</div>
</body>
½ÇÇà °á°ú¸¦ º¸¸é p tagÀÇ °æ¿ì µû·Î ÁöÁ¤ÇÏÁö ¾Ê¾Æµµ margin-top, margin-bottom ÀÌ '¾î¶²' °ªÀ» °¡Áö´Â °ÍÀ» ¾Ë ¼ö ÀÖ½À´Ï´Ù. ±×·±µ¥ ÀÌ °ªÀº ºê¶ó¿ìÀú ¸¶´Ù ¾à°£ ¾¿ ´Ù¸¨´Ï´Ù¸¸ ´ë·« font-size¸¦ ÁöÁ¤ÇÏÁö ¾ÊÀº »óÅÂÀÇ ±Û¾¾ Å©±âÀÎ 12pt ¿¡ ¾Æ·¡ À§·Î 1pt Á¤µµÀÇ °ø°£À» ÇÕÃļ 14pt Á¤µµÀÇ marginÀÌ »óÇÏ¿¡ »ý±â°Ô µË´Ï´Ù. ±×·¯¸é p tagÀ» ¿¬¼ÓÀûÀ¸·Î 2°³ ÀÌ»ó »ç¿ëÇÏ¸é ¾î¶»°Ô µÇ´ÂÁö ¾Æ·¡ÀÇ code¸¦ ½ÇÇà ÇØ º¾½Ã´Ù. 2°³ÀÇ p tagÀÌ ³ª¿µÉ °æ¿ìÀÇ collapsign margins(¿©¹éÀÇ Æ÷°³¾îÁü)
<div style="border:1px solid #ccc;">
<p style="background-color:#999;">¹®´Ü¿¡´Â P tagÀ» »ç¿ëÇÕ´Ï´Ù.</p>
<p style="background-color:#999;">¹®´Ü¿¡´Â P tagÀ» »ç¿ëÇÕ´Ï´Ù.</p>
</div>
À§ÀÇ ½ÇÇà °á°ú¸¦ º¸¸é p tag°ú p tag »çÀÌ¿¡ »ý±â´Â marginÀÇ Å©±â¿Í »ó ÇÏ¿¡ »ý±â´Â marginÀÇ Å©±â°¡ °°Àºµ¥ ±× ÀÌÀ¯´Â ¼öÁ÷À¸·Î »ý±â´Â marginÀº Æ÷°³¾îÁö±â ¶§¹®À¸·Î ÀÌ¹Ì PLS Part VÀÇ collapsing margins ºÎºÐ¿¡¼ ¼³¸íÇÑ ¹Ù ÀÖ½À´Ï´Ù. ±×·±µ¥ ¿©·¯ºÐµéÀÌ ÀÚ½ÅÀÇ »çÀÌÆ® ¹®¼¸¦ ¸¸µé ¶§ À§¿Í °°ÀÌ °¢ tag¿¡ ÀÏÀÏÈ÷ style·Î border³ª background-color¸¦ ÁöÁ¤Çϱâ¶õ ¿©°£ ¹ø°Å·Î¿îµ¥ ¾Æ´Ò °Ì´Ï´Ù. ¶ÇÇÑ ´õ ±ÍÂúÀº °ÍÀº ÀÏ´Ü style·Î ÁöÁ¤ÇÏ°í ¸éÀûÀ» È®ÀÎÇÑ ÈÄ¿¡ ´õ ÀÌ»ó border µîÀ» º¼ Çʿ䰡 ¾øÀ» ¶§´Â ±× °ÍµéÀ» Áö¿ö¾ß µÈ´Ù´Â »ç½Ç ÀÔ´Ï´Ù. µû¶ó¼ Á¦°¡ ±×·± ±ÍÂúÀº ¹æ¹ý ¸»°í ¾ÆÁÖ °£´ÜÇÏ°Ô ¹®¼ ³»ÀÇ ¸ðµç tag¿¡ border¸¦ ÁöÁ¤ÇÏ´Â ¹æ¹ýÀ» ¾Ë·Á µå¸®°Ú½À´Ï´Ù. ÀÏÁ¾ÀÇ tip À̶ö ¼ö Àְڳ׿ä. ±× °£´ÜÇÑ ¹æ¹ýÀ̶õ ¾Æ·¡¿Í °°ÀÌ type selector·Î ¹®¼ ³»ÀÇ ÇØ´ç tag¿¡ style Àϰý Àû¿ë
<html>
<head>
<title>type selector·Î ¹®¼³»ÀÇ p, div¿¡ border¸¦ Àϰý ÁöÁ¤Çϱâ</title>
<style type="text/css">
<!--
p {border:1px solid #999;}
div {border:1px solid #ccc;}
-->
</style>
</head>
<body>
<div>
<p>¹®´Ü¿¡´Â P tagÀ» »ç¿ëÇÕ´Ï´Ù.</p>
<p>¹®´Ü¿¡´Â P tagÀ» »ç¿ëÇÕ´Ï´Ù.</p>
</div>
</body>
</html>
type selector¸¦ »ç¿ëÇÏ¿© HTML tag¿¡ styleÀ» ÁöÁ¤ÇÏ¸é ¾Æ¹«¸® ¸¹Àº p, div °¡ ÀÖ´Ù°í ÇÏ´õ¶óµµ ÇÑ ¹ø¿¡ border¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ°Ú½À´Ï´Ù. ¸¸¾à p, div ÀÌ¿ÜÀÇ tag ¸éÀûÀ» º¸°í ½Í¾î¼ border¸¦ ÁöÁ¤ ÇÒ ¶§, À§ÀÇ ¹æ¹ý ó·³ ÁöÁ¤ÇÏ¸é »ç¿ëµÈ tagÀÇ Á¾·ù ¸¸Å type selector¸¦ ³Ö¾î¾ß µÇ´Âµ¥, À§¿Í °°ÀÌ ÀÏÀÏÈ÷ type selector¸¦ ÁöÁ¤ ÇÏ´Â °Íµµ ±ÍÂú´Ù¸é ¾Æ·¡¿Í °°ÀÌ universal selector¸¦ »ç¿ëÇÏ¸é µÇ°Ú½À´Ï´Ù. universal selector·Î ¹®¼ ³»ÀÇ ¸ðµç tag¿¡ style Àϰý Àû¿ë
<html>
<head>
<title>universal selector·Î ¹®¼³»ÀÇ ¸ðµç tag ¿¡ border¸¦ Àϰý ÁöÁ¤Çϱâ</title>
<style type="text/css">
<!--
* {border:1px solid red;}
-->
</style>
</head>
<body>
<div>
<p>¹®´Ü¿¡´Â P tagÀ» »ç¿ëÇÕ´Ï´Ù.</p>
<p>¹®´Ü¿¡´Â P tagÀ» »ç¿ëÇÕ´Ï´Ù.</p>
</div>
</body>
</html>
º»¹®ÀÇ Á¤¸®´ÙÀ½Àº º»¹®¿¡ ´ëÇÑ Á¤¸®¸¦ Çϵµ·Ï Çϴµ¥ º»¹®ÀÌ µé¾î°¥ ºÎºÐÀº PLS Part V Positioned layout ¸¶Áö¸· ºÎºÐ¿¡ sample flie·Î º¸¿© µå·È´ø 'width 770px ·Î column 3°³¸¦ È¸é °¡¿îµ¥ Á¤·Ä½ÃŲ layout' Áß¿¡¼ 'mainText' ºÎºÐ ÀÔ´Ï´Ù. ±×·¯¹Ç·Î ±× fileÀÇ °¡¿îµ¥ ºÎºÐÀ» º»´Ù°í »ý°¢ÇÏ¸é µÇ°Ú½À´Ï´Ù. ¿ì¼± º»¹®¿¡ text ¸¸ ÀÖ´Â °æ¿ì¸¦ ¿¹·Î µé¾î º¸°Ú½À´Ï´Ù. ¾Æ·¡ÀÇ »ç¿ë¿¹¿¡´Â margin À̳ª padding µîÀÇ ¿©¹éÀ» ÁöÁ¤ÇÏÁö ¾Ê°í p tagÀ» ±×´ë·Î »ç¿ëÇß½À´Ï´Ù. p tag ¼ÓÀÇ box°¡ Å׵θ®¿¡ ºÙ¾î ÀÖ¾î¼ ´ä´äÇÑ ´À³¦À» ÁÝ´Ï´Ù. ¿¹Á¦ ¾Æ·¡ÀÇ buttonµéÀ» Ŭ¸¯Çؼ padding, text-align µîÀ» º¯°æÇØ º¾½Ã´Ù. text ¸¸ ÀÖ´Â º»¹®´Ù¾çÇÑ ±â´ÉÀ» Á¦°øÇÏ´Â ÅØ½ºÆ® ÀÔ·Â ¹æ½ÄÀÇ HTML ¿¡µðÅÍ HTML-Kit ÀÔ´Ï´Ù. HTML ű׿¡¼´Â head, body, title, meta, frame, frameset, ÅØ½ºÆ® ÆíÁý°ú °ü·ÃµÈ ÅÂ±× µî °ÅÀÇ ¸ðµç ű׸¦ Áö¿øÇϰí ASP, PHP ºí·¯Å·, ASP, CGI, SSI º¯¼ö°ªÀ» »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. À̿ܿ¡µµ ½ºÅ¸ÀÏ½ÃÆ®, À̹ÌÁö »ðÀÔ, ¹öư, ÀÚ¹Ù ½ºÅ©¸³Æ®, ÀÚ¹Ù ¾ÖÇø´ ÇÔ¼ö Æû, ºñÁÖ¾ó º£ÀÌÁ÷, TCL ½ºÅ©¸³Æ®, °¢Á¾ ¸¶¿ì½º À̺¥Æ®, µîÀ» Á¦½ÃÇØÁÖ¸ç, ´Ù¾çÇÑ form°ú input typeÀ» Áö¿øÇÕ´Ï´Ù. text ¸¸ ÀÖ´Â º»¹®ÀÇ source code
<div style="padding:10px; text-align:justify;">
<p>´Ù¾çÇÑ...</p>
<p>À̿ܿ¡µµ...</p>
<p>¹Ì¸®º¸±â...</p>
<p>¿ÀÅä ÄÄÇø®Æ®...</p>
</div>
À§ÀÇ DHTML À» º¸¸é ¾Ë ¼ö ÀÖ°ÚÁö¸¸ block box ¾È¿¡ paddingÀ» ÁÖ¸é ³»ºÎ¿¡ ¿©¹éÀÌ »ý°Ü¼ Å׵θ®¿Í ºÙ¾î ÀÖÀ» ¶§ º¸´Ù ´«ÀÌ ½¯ °÷ÀÌ »ý°Ü¼ ¹®Àå Àüü¸¦ º¸±â°¡ ½±´Ù´Â °ÍÀ» ¾Ë ¼ö ÀÖ½À´Ï´Ù. ±×¸®°í text-align : justify ÀÇ °æ¿ì´Â »ç¿ëÇÏ´Â °ÍÀÌ ÁÁ´Ù´Â ¶æÀº ¾Æ´Ï°í °³ÀÎÀÇ ÃëÇâ¿¡ µû¶ó Ãë»ç ¼±ÅÃÀ» ÇÏ¸é µÇ°Ú½À´Ï´Ù. ±×·¯¸é ÀÌ ¹ø¿¡´Â text ¿Í image °¡ block ¾È¿¡ °°ÀÌ ÀÖÀ» °æ¿ì¸¦ º¸µµ·Ï ÇϰڽÀ´Ï´Ù. text ¿Í image°¡ ÀÖ´Â º»¹®
ÀϹÝÀûÀ¸·Î image¸¦ ¹®¼¿¡ ³ÖÀ» ¶§ À§¿Í °°ÀÌ image°¡ ¼öÆòÀ¸·Î ÇϳªÀÇ blockÀ» Â÷ÁöÇÏ´Â °æ¿ì°¡ ¸¹½À´Ï´Ù. ¹°·Ð image¸¦ ¼öÆòÀ¸·Î ÇϳªÀÇ blockÀ¸·Î ó¸®ÇÏ´À³Ä ¸¶´À³Ä´Â ¹®¼ ÀÛ¼ºÀÚ°¡ ¾Ë¾Æ¼ ÆÇ´ÜÇÒ ÀÏÀÌÁö¸¸ image°¡ 'ºñ±³Àû' Å«(°¡·Î »çÀÌÁîÀÇ ¹Ý ÀÌ»óÀÌ µÇ´Â) °æ¿ì ÁÖ·Î °¡·Î·Î ÇÑ blockÀ» ÇÒ´çÇÏ°Ô µÇ°í, image°¡ À۾Ƽ ÇϳªÀÇ block À» ÇÒ´çÇϱ⿡´Â Á» ½ä··ÇÏ´Ù°í ÆÇ´ÜÀÌ µÇ¸é image¸¦ textÀÇ ¿ÞÂÊÀ̳ª ¿À¸¥ÂÊ¿¡ ³Ö°Ô µÇ´Â °æÇâÀÌ ÀÖ´Â °Í °°½À´Ï´Ù. ÀÌ µÎ °¡ÁöÀÇ °æ¿ì IMG tag°ú P tagÀÌ ¾îµð¿¡ À§Ä¡ÇÏ´ÂÁö ¾Ë¾Æ º¸°Ú½À´Ï´Ù. ¿ì¼± image¸¦ ÇϳªÀÇ block level·Î ó¸®ÇÒ °æ¿ì´Â ¾Æ·¡ÀÇ code¿Í °°ÀÌ ÀÔ·Â
<img />
<p>text</p>
´Ü¼øÈ÷ ÇϳªÀÇ blockÀ¸·Î ó¸®ÇÕ´Ï´Ù. °æ¿ì¿¡ µû¶ó IMG¿Í PÀÇ ¼ø¼°¡ ¹Ù²ð ¼öµµ ÀÖ°ÚÁÒ. ±×·±µ¥ IMG¿Í P¸¦ °¢°¢ÀÇ blockÀ¸·Î ó¸®ÇÏÁö ¾Ê°í text°¡ image ÁÖº¯À¸·Î È帣µµ·Ï ó¸®ÇÏ·Á¸é ¾Æ·¡¿Í °°ÀÌ ÀÔ·Â
<p><img style="float:left ¶Ç´Â right;" />text</p>
IMG tagÀ» P tag ¼Ó¿¡ ³Ö½À´Ï´Ù. ±×·¸Áö¸¸ À§ÀÇ code¿Í °°ÀÌ IMG tagÀÌ ¹Ýµå½Ã text º¸´Ù ¾Õ¿¡ ÀÖ¾î¾ß µÇ´Â °ÍÀº ¾Æ´Õ´Ï´Ù. ±×·³ ¾îµð¿¡ ÀÖ¾î¾ß µÇ´À³Ä±¸¿ä? ±×°Ç ¼øÀüÈ÷ coding ÇÏ´Â »ç¶÷ ¸¶À½¿¡ ´Þ·Á ÀÖ½À´Ï´Ù. Áï, text ¾Õ¿¡ ¿À°Å³ª µÚ¿¡ ¿À°Å³ª ȤÀº Áß°£¿¡ ¿À´õ¶óµµ »ó°ü ¾ø½À´Ï´Ù. ¾îÂ÷ÇÇ float:left ³ª float:right À¸·Î image¸¦ ó¸®ÇÏ¸é ±×¸² ¿ÞÂÊÀ̳ª ¿À¸¥ÂÊ¿¡ ±×¸²ÀÇ À§Ä¡°¡ ÁöÁ¤µÇ°Ô µË´Ï´Ù. Áï, image³ª table µîÀÇ block box¸¦ floatÀ¸·Î ó¸®ÇÒ °æ¿ì floatingµÈ block box°¡ center¿¡ À§Ä¡ÇÏÁö´Â ¾Ê´Â´Ù´Â ¶æ ÀÔ´Ï´Ù. ¾Æ·¡ÀÇ box ¼Ó¿¡ ÀÖ´Â pen ±×¸²Àº dragÀÌ µË´Ï´Ù. ¹°·Ð IE ¿¡¼¸¸ dragÀÌ µË´Ï´Ù¸¸, ¾Æ·¡ÀÇ ±×¸²À» drag ÇØ¼ '´Ù¾çÇÑ' À̶ó´Â ´Ü¾îÀÇ '´Ù' ¿Í '¾ç' »çÀÌ·Î cursor¸¦ ²ø¾î´Ù ³õ¾Æ º¸½ÃÁ®. ±×¸®°í float:left ³ª float:right buttonÀ» Ŭ¸¯Çϸé image°¡ µÎ ¹øÂ° ÁÙ·Î ³»·Á°¡ ÀÖ´Â °ÍÀ» ¾Ë ¼ö ÀÖ½À´Ï´Ù. ÀÌ°Ç ¹«¾ùÀ» ÀÇ¹Ì ÇÒ±î¿ä. ÀÌ °á°ú´Â image ¸¦ ¾Æ·¡ÀÇ code¿Í °°ÀÌ ÀÔ·Â
<p>´Ù<img />¾çÇÑ ...</p>
ó·³ codingÀ» ÇØµµ '´Ù' ÀÚ°¡ ÇÑ ÁÙÀ» Â÷ÁöÇÏ°í ´ÙÀ½ ÁÙ¿¡ image °¡ À§Ä¡ÇÏ´Â °ÍÀÌ ¾Æ´Ï°í, IMG tagÀÌ µé¾î°£ ÁÙÀÌ ÁÖ¾îÁø width ¸¸ÅÀ» text·Î ä¿ì°í image´Â ´ÙÀ½ ÁÙ¿¡ À§Ä¡ÇÑ´Ù´Â °Í ÀÔ´Ï´Ù. ¾Æ·¡ÀÇ DHTML·Î padding, float µîÀÌ ÁöÁ¤ µÇ¾úÀ» ¶§¿Í ¾Æ¹« °Íµµ ÁöÁ¤ÇÏÁö ¾Ê¾ÒÀ» °æ¿ì¸¦ ºñ±³ÇØ º¸½ÃÁÒ.
Div
<div style="">
<p style="">
<img style="" src="images/application.gif" />
º»¹® ³»¿ë
</p>
</div>
text ¿Í image ±×¸®°í imageÀÇ Á¦¸ñÀÌ ÀÖ´Â º»¹®´ÙÀ½Àº text¿Í image »Ó¸¸ ¾Æ´Ï¶ó image¿¡ Á¦¸ñÀÌ ºÙ´Â °æ¿ì¸¦ º¸°Ú½À´Ï´Ù. ÀÌ °æ¿ì¿¡´Â ¾Æ·¡ÀÇ code°ú °°ÀÌ div¸¦ »ç¿ëÇØ¼ image¿Í Á¦¸ñÀÌ µé¾î°¥ div¸¦ Çϳª·Î ¹½À´Ï´Ù. image Á¦¸ñ¿¡ div¸¦ »ç¿ëÇÏ´Â ÀÌÀ¯´Â º° ´Ù¸¥°Ô ¾Æ´Ï°í, ¿¹¸¦ µé¾î P tagÀ» »ç¿ëÇÏ°Ô µÇ¸é À§¿¡¼ ½ÇÇèÇØ º» °Í ó·³ p tagÀÇ ¾Æ·¡ À§·Î marginÀÌ »ý±â±â ¶§¹®¿¡ p tag ¿¡ margin:0 À» ÁöÁ¤Çؼ À§¿Í ¾Æ·¡ÀÇ marginÀÌ ¾ø¾îÁöµµ·Ï ÇØ¾ß µÇ±â ¶§¹® ÀÌÁÒ. ±×·¸´Ù°í span tagÀ» ¾²¸é span tagÀº inline text level boxÀ̱⠶§¹®¿¡ ÁÙÀÌ ¹Ù²îÁö ¾Ê°í ±×¸² ¿À¸¥ÂÊ¿¡ image Á¦¸ñÀÌ À§Ä¡ÇÏ°Ô µË´Ï´Ù. µû¶ó¼ margin ÀÌ ¾ø´Â div¸¦ »ç¿ëÇÏ´Â °ÍÀÌ °¡Àå ¼ÕÀÌ ´ú °£´Ù´Â ¸» ÀÔ´Ï´Ù. source code
<p style="text-align:justify;">
<div style="float:left;margin:0 10px 0 0;">
<img src="images/application.gif" width="48" height="48" alt="application (1K)" />
<div style="margin:0;text-align:center;">±×¸²</div>
</div>
´Ù¾çÇÑ ±â´ÉÀ»...
</p>
Ãâ·Â°á°ú
Pen
´Ù¾çÇÑ ±â´ÉÀ» Á¦°øÇÏ´Â ÅØ½ºÆ® ÀÔ·Â ¹æ½ÄÀÇ HTML ¿¡µðÅÍ HTML-Kit ÀÔ´Ï´Ù. HTML ű׿¡¼´Â head, body, title, meta, frame, frameset, ÅØ½ºÆ® ÆíÁý°ú °ü·ÃµÈ ÅÂ±× µî °ÅÀÇ ¸ðµç ű׸¦ Áö¿øÇϰí ASP, PHP ºí·¯Å·, ASP, CGI, SSI º¯¼ö°ªÀ» »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. À̿ܿ¡µµ ½ºÅ¸ÀÏ½ÃÆ®, À̹ÌÁö »ðÀÔ, ¹öư, ÀÚ¹Ù ½ºÅ©¸³Æ®, ÀÚ¹Ù ¾ÖÇø´ ÇÔ¼ö Æû, ºñÁÖ¾ó º£ÀÌÁ÷, TCL ½ºÅ©¸³Æ®, °¢Á¾ ¸¶¿ì½º À̺¥Æ®, µîÀ» Á¦½ÃÇØÁÖ¸ç, ´Ù¾çÇÑ form°ú input typeÀ» Áö¿øÇÕ´Ï´Ù. text¿Í table(µµÇ¥)°¡ ÀÖ´Â °æ¿ìÀÌ °æ¿ì´Â text¿Í image°¡ ÀÖ´Â °æ¿ì¿Í µ¿ÀÏ Çϰí, source code¿Í Ãâ·Â °á°ú´Â ¾Æ·¡¿Í °°½À´Ï´Ù. source code
<p style="text-align:justify;">
<table border="0" style="float:left;margin:0 10px 10px 0;border:1px solid #666;">
<col style="width:50px;background-color:#aaa;" />
<col style="width:50px;background-color:#ddd;" />
<tbody style="border:1px solid #888;height:25px;">
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr>
</tbody>
</table>
´Ù¾çÇÑ ±â´ÉÀ»...
</p>
Ãâ·Â°á°ú
±×·¯¸é PLS Part VIII ´Â ÀÌ Âë¿¡¼ ¸¶Ä¡µµ·Ï ÇÏ°í ´ÙÀ½ÀÇ PLS IX ¿¡¼´Â ¸ð¼¸®°¡ µÕ±Ù box¿Í bullet °°ÀÌ ¹®¼¿¡ »ç¿ëµÇ´Â Accessory µé¿¡ ´ëÇØ ¾Ë¾Æ º¸µµ·Ï ÇϰڽÀ´Ï´Ù... ÀÌ ¹®¼ÀÇ ÀúÀÛ±ÇÀº www.cadvance.org ¿¡ ÀÖ½À´Ï´Ù.
|