8-3-1.±¸Á¶¿Í Ç¥ÇöÀÇ ºÐ¸®

HTML·Î Àå½ÄÇÏ´Â ¹æ¹ý°ú ½ºÅ¸ÀϽÃÆ®¸¦ ¾²´Â ¹æ¹ýÀ» ºñ±³ÇØ º¸°í ½ºÅ¸ÀÏÀ» ÀÛ¼ºÇÏ´Â ¿©·¯ °¡Áö À¯Çü¿¡ ´ëÇØ ¿¬±¸ÇØ º¸¾Ò´Ù. ´ëÃæ ºÁµµ HTML ¹®¼­¿¡ ¸ðµç °ÍÀ» ´Ù ±¸°Ü³Ö´Â °Íº¸´Ù Àå½Ä ±â´ÉÀ» º°µµÀÇ ½ºÅ¸ÀÏ·Î ºÐ¸®ÇÏ´Â °ÍÀÌ ÈξÀ ´õ ÁÁ¾Æ º¸ÀδÙ. ±¸Ã¼ÀûÀ¸·Î ¾î¶² ÀåÁ¡ÀÌ ÀÖ´ÂÁö »ó¼¼ÇÏ°Ô ¾Ë¾Æ º¸°í ½ºÅ¸ÀϽÃÆ®ÀÇ È°¿ë ¹æ¾È¿¡ ´ëÇØ ¿¬±¸ÇØ º¸ÀÚ.

¼ÒÇÁÆ®¿þ¾î °øÇп¡¼­ ¾î¶² ¹®Á¦³ª ÇѰ踦 µ¹ÆÄÇÏ´Â ÀϹÝÀûÀÎ ÇعýÀº ·¹À̾ ³ª´©´Â °ÍÀÌ´Ù. Å« ´ÜÀ§¿¡¼­ ¸ðµç °ÍÀ» ´Ù ¼öÇàÇÏÁö ¾Ê°í ´õ ÀÛÀº ºÎºÐÀ¸·Î ÂÉ°³¼­ ÀÛ¾÷À» ºÐ´ãÇÏ´Â ½ÄÀÌ´Ù. ÀÛ¾÷ ´ÜÀ§¸¦ Àß°Ô ÂÉ°³¸é °¢ ·¹À̾îÀÇ Àü¹®¼ºÀÌ Áõ°¡ÇÏ°í ¹®Á¦ÀÇ ¹üÀ§°¡ Ãà¼ÒµÇ¾î ½Å·Ú¼ºÀÌ Çâ»óµÈ´Ù. ·¹À̾ÀÇ °áÇÕÀ̳ª Åë½Å °úÁ¤¿¡¼­ ¾à°£ÀÇ ºñÈ¿À²ÀÌ ¹ß»ýÇÏÁö¸¸ ´Ù¾çÇÑ ±â±³¸¦ ºÎ¸± ¼ö ÀÖ´Â ¿©Áö°¡ »ý±ä´Ù.

³×Æ®¿öÅ© °èÃþ, ¿î¿µÃ¼Á¦ÀÇ µð¹ÙÀ̽º µå¶óÀ̹ö ¸ðµ¨ µîÀÌ ºÐ¸®¿¡ ÀÇÇÑ ±â´É Çâ»óÀÇ ÁÁÀº ¿¹ÀÌ´Ù. ºñ´Ü ¼ÒÇÁÆ®¿þ¾î»Ó¸¸ ¾Æ´Ï¶ó Çϵå¿þ¾îµµ ºÐ¸®µÇ°í ±³Ã¼ °¡´ÉÇÑ °ÍÀÌ ´õ ºñ½Î°í ÀÀ¿ëÀÇ ¿©Áö°¡ ¸¹´Ù. ¸ðµç °ÍÀ» ´Ù Ç°°í ÀÖ´Â ¶ÈµüÀÌ Ä«¸Þ¶óº¸´Ù´Â ·»Á ±³Ã¼ÇÒ ¼ö ÀÖ´Â DSRLÀÌ ÈξÀ ´õ °í¼º´ÉÀÎ °Íó·³ ¸»ÀÌ´Ù. ¹°·Ð ±³Ã¼ °¡´ÉÇÏ°Ô Á¦ÀÛÇϱâ À§Çؼ­´Â ºñ¿ëÀÌ ¸¹ÀÌ µç´Ù.

À¥ °³¹ß¿¡¼­ HTML°ú CSS¸¦ ºÐ¸®ÇÏ´Â °Íµµ °°Àº ¸Æ¶ôÀÌ´Ù. HTMLÀº ±¸Á¶¸¸ ´ã´çÇÏ°í CSS´Â Ç¥ÇöÀ» Àü´ãÇϵµ·Ï ±â´É¿¡ µû¶ó ¿ÏÀüÈ÷ ºÐ¸®ÇØ ³õÀ¸¸é ¿©·¯ °¡Áö ÀÌÁ¡ÀÌ »ý±ä´Ù. ºÐ¸®ÇÏÁö ¾Ê¾ÒÀ» ¶§ °ú¿¬ ¾î¶² ¹®Á¦°¡ ÀÖ´ÂÁö HTML ÅÂ±×¿Í ¼Ó¼ºÀ¸·Î Àå½ÄÇÑ Äڵ带 ¿ä¸ð Á¶¸ð ¶â¾î º¸ÀÚ. Äڵ忡¼­ À½¿µÀ¸·Î Ç¥½ÃÇÑ ºÎºÐÀÌ Ç¥Çö°ú °ü·ÃµÈ ºÎºÐÀÌ¸ç ³ª¸ÓÁö´Â ±¸Á¶¿Í °ü·ÃµÈ ºÎºÐÀÌ´Ù.

 

<body bgcolor="yellow">

     <center>

         <font size="5" color="green">

              <h2>ÀÎÅͳÝÀ̶õ</h2>

         </font>

     </center>

     <p align="justify">ÀÎÅͳÝÀº ³×Æ®¿öÅ©¸¦ ¿¬°áÇÑ °Å´ë ³×Æ®¿öÅ©·Î¼­ Àü¼¼°èÀÇ ÄÄÇ»Å͸¦

         ¿¬°áÇÑ´Ù. ÀÎÅͳݿ¡ ¿¬°áµÈ ÄÄÇ»ÅÍ´Â ¾ðÁ¦ ¾îµð¼­³ª ¿øÇÏ´Â Á¤º¸¿¡ ¾×¼¼½ºÇÒ

         ¼ö ÀÖ´Ù. ÀÎÅÍ³Ý ±â¹ÝÀ¸·Î ¿©·¯ °¡Áö ¼­ºñ½º°¡ °³¹ßµÇ¾î ÀÖ´Ù.</p>

     <font size="2" color="red">

         <b>

              <ul>

                   <li>À¥ - ÇÏÀÌÆÛÅؽºÆ® ±â¹ÝÀÇ ¹®¼­ °øÀ¯ ¼­ºñ½ºÀÌ´Ù.

                   <li>FTP - ÆÄÀÏ Àü¼Û ÇÁ·ÎÅäÄÝÀ» ÀÌ¿ëÇÑ ÆÄÀÏ ±³È¯ ¼­ºñ½ºÀÌ´Ù.

                   <li>email - ÀüÀÚ ¿ìÆí ½Ã½ºÅÛÀÌ´Ù.

              </ul>

         </b>

     </font>

     <p align="justify"> ÀÎÅÍ³Ý ¼­ºñ½º Áß °¡Àå ÀαâÀÖ´Â °ÍÀº À¥ÀÌ´Ù. ±×·¡ÇÈ È¯°æ¿¡¼­

         ¸¶¿ì½º·Î ¸µÅ©¸¦ ´­·¯ ¿øÇÏ´Â Á¤º¸¸¦ ½±°Ô ãÀ» ¼ö ÀÖ¾î ¿äÁòÀº À¥ÀÌ °ð

         ÀÎÅͳÝÀ̶ó°í ÇÒ ¼ö ÀÖ´Ù. À¥ ±â¼úÀÇ Ç¥ÁØÀº

         <a href="http://www.w3.org">W3C</a>¿¡¼­ °ü¸®ÇÑ´Ù.</p>

</body>

 

 

ÇÑ´«¿¡ ºÁµµ ¸ð¾ç»õ°¡ ³­ÀâÇÏ°í ÁöÀúºÐÇØ º¸À̸ç Àå½ÄÀÌ ¸¹ÀÌ µé¾î°¥¼ö·Ï º¹Àâµµ´Â Áõ°¡ÇÑ´Ù. ¹®¼­ÀÇ ³»¿ëÀÎ ±¸Á¶ ÅÂ±×¿Í Àå½ÄÀ» ÁöÁ¤Çϴ ǥÇö űװ¡ ¸¶±¸ ¼¯¿© ÀÖ¾î ¾îµð°¡ ³»¿ëÀÌ°í ¾îµð°¡ Àå½ÄÀÎÁö ÇÑ´«¿¡ Àß ±¸ºÐµÇÁö ¾ÊÀ¸¸ç ¹®¼­¸¦ Àб⵵ ¾î·Æ´Ù. ÀÌ·± ±¸Á¶¿¡¼­´Â »ç¶÷»Ó¸¸ ¾Æ´Ï¶ó °Ë»ö ¿£Áø °°Àº ±â°èµµ ¿øÇÏ´Â Á¤º¸¸¦ ½Å¼ÓÇÏ°í Á¤È®ÇÏ°Ô »Ì¾Æ ³»±â ¾î·Æ´Ù.

ºñ½ÁÇÑ ¼Ó¼ºÀÌ ºÒÇÊ¿äÇÏ°Ô ¹Ýº¹µÇ´Â °Íµµ Å« ¹®Á¦ÀÌ´Ù. ¹®´Ü¿¡ ´ëÇØ align="justify" ¼Ó¼ºÀ» ÁöÁ¤ÇÏ¿© ¾çÂÊÀ¸·Î Á¤·ÄÇߴµ¥ ÀÌ ¼Ó¼º ´ëÀÔ¹®ÀÌ ¸Å ¹®´Ü¸¶´Ù ¹Ýº¹µÈ´Ù. ÀÌ °æ¿ì´Â ¹®´ÜÀÌ °íÀÛ 2°³»ÓÀÌ°í ¼Ó¼ºµµ ´Ü¼øÇؼ­ Å« ¹®Á¦°¡ ¾ÈµÇÁö¸¸ ¼ö¹é°³ÀÇ ¹®´ÜÀÌ ÀÖ°í °Ô´Ù°¡ ¼Ó¼º±îÁö º¹ÀâÇÏ´Ù¸é ¹®´ÜÀÇ °³¼ö¸¸Å­ ÀåȲÇÑ ¼Ó¼º ÁöÁ¤¹®ÀÌ °è¼Ó ¹Ýº¹µÉ °ÍÀÌ´Ù. ¹Ý¸é CSS·Î Ç¥ÇöÀ» ºÐ¸®ÇÑ ¹®¼­¸¦ º¸ÀÚ.

 

<head>

     <style>

         body { background:yellow }

         h2 { font-size:225%; color:green; text-align:center; }

         p { text-align:justify; }

         li { font-size:80%; color:red; font-weight:bold; }

     </style>

</head>

<body>

     <h2>ÀÎÅͳÝÀ̶õ</h2>

     <p>...</p>

     <ul>

         ...

     </ul>

     <p>...</p>

</body>

 

¾Æ·§µ¿³×ÀÇ HTMLÀº ¼ø¼öÇÏ°Ô ¹®¼­ÀÇ ±¸Á¶¸¸ ±â¼úÇϸç À­µ¿³×ÀÇ CSS´Â ¹®¼­ÀÇ Ç¥Çö¸¸ ±â¼úÇÏ´Â ½ÄÀ¸·Î ±ò²ûÇÏ°Ô ºÐ¸®µÇ¾î ÀÖ¾î ³»¿ë ÆľÇÀÌ ½±´Ù. ½ºÅ¸ÀÏÀ» ¼öÁ¤Çϱ⵵ ½¬¿îµ¥ ¿¹¸¦ µé¾î ¹®´ÜÀÇ Á¤·Ä ¹æ½ÄÀ» center·Î ¹Ù²Û´Ù°í ÇØ º¸ÀÚ.

ÀÏüÇüÀº <p> ű׿¡ ±â·ÏµÇ¾î ÀÖ´Â align="justify" ´ëÀÔ¹®À» »ô»ôÀÌ µÚÁ® align="center"·Î ¹Ù²ã¾ß ÇÑ´Ù. ÀÏÀÏÀÌ Ã£¾Æ¼­ ¹Ù²Ù´Â ½Ã°£µµ ¿À·¡ °É¸± »Ó¸¸ ¾Æ´Ï¶ó Çϳª¶óµµ »© ¸ÔÀ¸¸é ºÒÀÏÄ¡°¡ ¹ß»ýÇÏ´Â ºÎÀÛ¿ëÀÌ ÀÖ°í ¶§·Î´Â ½É°¢ÇÑ ¹ö±×·Î Á÷°áµÇ±âµµ ÇÑ´Ù. ¹Ý¸é ºÐ¸®ÇüÀº ½ºÅ¸ÀϽÃÆ®ÀÇ ¼Ó¼º ÁöÁ¤¹®¸¸ text-align:center;·Î ¼öÁ¤ÇÏ¸é µÇ¹Ç·Î °£ÆíÇÏ°í ºÒÀÏÄ¡ÀÇ À§Çèµµ ¾ø´Ù.

ºÒÇÊ¿äÇÑ ¹®ÀåÀÌ ¹Ýº¹µÇÁö ¾ÊÀ¸¹Ç·Î ¹®¼­ÀÇ Å©±â°¡ ÀÛ¾ÆÁö´Â È¿°úµµ ÀÖ´Ù. ´Ù¿î·ÎµåÇÒ ÆÄÀÏÀÌ ÀÛ¾ÆÁö¸é ³×Æ®¿öÅ© ´ë¿ªÆøÀÌ Àý¾àµÈ´Ù. °íÀÛ Àú Á¤µµ·Î ¾ó¸¶³ª Â÷ÀÌ°¡ ³¯±î ½Í°ÚÁö¸¸ ¿¹»óº¸´Ù Â÷ÀÌ°¡ ¸¹ÀÌ ³­´Ù. Å« ¹®¼­Àϼö·Ï ¿ë·® Â÷ÀÌ´Â ´õ ¹ú¾îÁö¸ç ½ÉÇÒ °æ¿ì 2¹è ÀÌ»óÀÇ Â÷ÀÌ°¡ ¹ß»ýÇÏ´Â °æ¿ìµµ ÀÖ´Ù. ´õ±¸³ª ¿ÜºÎ ½ºÅ¸ÀÏ ÆÄÀÏ·Î ºÐ¸®ÇßÀ» ¶§´Â ij½ÃÀÇ ÀÌÁ¡±îÁö ´©¸± ¼ö ÀÖ¾î Â÷ÀÌ´Â ´õ ¸¹ÀÌ ¹ú¾îÁø´Ù.