|
HTML&CSS À¥ ÇÁ·Î±×·¡¹Ö ÀÔ¹®µü! ÀÏÁÖÀÏ ¸¸¿¡ ³¡³»´Â ÇÁ·±Æ®¿£µå À¥ ±âÃÊÁ¤°¡ : 23,000¿øÆǸŰ¡ 20,700¿ø (10% ÇÒÀÎ)
Ç°¸ñÁ¤º¸
Ã¥¼Ò°³ÇÁ·±Æ®¿£µå À¥ °³¹ßÀ» À§ÇÑ HTML+CSS ÇÙ½É ¹®¹ý ±âÃÊ Å±׺ÎÅÍ ÃֽŠ¹ÝÀÀÇü À¥±îÁö ÀÏÁÖÀÏ ¿Ï¼º! ½Ç·Â ÀÖ´Â ÇÁ·±Æ®¿£µå À¥ °³¹ßÀÚ°¡ µÇ·Á¸é HTML, CSS ±âº»±â¸¦ Æ°Æ°ÇÏ°Ô ½×¾Æ¾ß ÇÕ´Ï´Ù. À¥ÀÇ °³³ä°ú ±¸Á¶¸¦ Àß ÀÌÇØÇÏ°í, À̸¦ ÀÚÀ¯ÀÚÀç·Î Ç¥ÇöÇÒ ¼ö ÀÖ´Â ´É·ÂÀ» °®Ãß´Â °ÍÀÌ ¸Å¿ì Áß¿äÇÕ´Ï´Ù. ÀÌ Ã¥Àº À¥ °³¹ß¿¡ ÇÊ¿äÇÑ ±âº» ¼Ò¾çÀ» ¸ðµÎ ´ã¾Æ, ´©±¸³ª ½±°Ô ÇÁ·±Æ®¿£µå À¥¿¡ ÀÔ¹®ÇÒ ¼ö ÀÖµµ·Ï µµ¿ÍÁÝ´Ï´Ù. ¶Ç ´Ü¼øÈ÷ À̷и¸ ÀÐ°í ³¡³»´Â °ÍÀÌ ¾Æ´Ñ È®½ÇÇÑ ÄÚµù ½Ç·Â Çâ»óÀ» À§ÇØ Á÷Á¢ µû¶ó ÇÒ ¼ö ÀÖ´Â 210°³ÀÇ Ç³¼ºÇÑ ¿¹Á¦µµ ´ã°Ü ÀÖ½À´Ï´Ù. HTML, CSSÀÇ ±âÃÊ ¹®¹ý»Ó¸¸ ¾Æ´Ï¶ó, ½ÇÀü¿¡¼ ¹Ù·Î ¾²´Â ¿¹Á¦±îÁö À¥ÀÇ ±âº»À» ÀÌ Ã¥ ÇÑ ±ÇÀ¸·Î ³¡³» º¸¼¼¿ä! ¸ñÂ÷01 À¥ °³¹ß ȯ°æ ±¸¼ºÇϱâ __1.1 ÄÚµå ¿¡µðÅÍ ¼³Ä¡Çϱâ __1.2 HTML À¥ ÇÁ·ÎÁ§Æ® ¸¸µé±â __1.3 VS Code È®Àå ÇÁ·Î±×·¥ ¼³Ä¡ ____1.3.1 ¶óÀÌºê ¼¹ö ¼³Ä¡ __1.4 À¥ ºê¶ó¿ìÀú »ìÆ캸±â ____1.4.1 Å©·Ò ºê¶ó¿ìÀú ¼³Ä¡ 02 HTML ÀÌÇØÇϱâ __2.1 ű׶õ? ____2.1.1 ¸¶Å©¾÷ ¾ð¾î °³³ä ____2.1.2 ű×ÀÇ ±âº» °³³ä ____2.1.3 ű×ÀÇ °ü°è __2.2 ű×ÀÇ ¼Ó¼º ____2.2.1 HTML ¹®¼ ¹öÀü ¸í½Ã ____2.2.2 À¥ ÆäÀÌÁö ÅÂ±× ¡´html¡µ ____2.2.3 ÆäÀÌÁö ¼³Á¤ ÅÂ±× ¡´head¡µ ____2.2.4 ÆäÀÌÁö Á¦¸ñ ÅÂ±× ¡´title¡µ ____2.2.5 Ãß°¡ Á¤º¸ ÅÂ±× ¡´meta¡µ ____2.2.6 º»¹® ÅÂ±× ¡´body¡µ ____2.2.7 HTML ÁÖ¼® 03 HTML ±âº» ÅÂ±× __3.1 ÅؽºÆ® °ü·Ã ÅÂ±× ____3.1.1 Á¦¸ñ ÅÂ±× ¡´h1¡µ~¡´h6¡µ ____3.1.2 ¹®´Ü ÅÂ±× ¡´p¡µ ____3.1.3 ÁÙ¹Ù²Þ ÅÂ±× ¡´br¡µ ____3.1.4 ¹Ì¸® Á¤ÀÇµÈ ÅÂ±× ¡´pre¡µ ____3.1.5 °Á¶ ÅÂ±× ¡´b¡µ, ¡´strong¡µ ____3.1.6 ±â¿ïÀÓ ÅÂ±× ¡´i¡µ ____3.1.7 ÷ÀÚ ÅÂ±× ¡´sup¡µ, ¡´sub¡µ ____3.1.8 ·çºñ ÁÖ¼® ÅÂ±× ¡´ruby¡µ __3.2 ¹öÆ° ÅÂ±× ____3.2.1 disabled ¼Ó¼ºÀ» ÅëÇÑ ºñÈ°¼º ¿ä¼Ò ¼³Á¤ ____3.2.2 type ¼Ó¼ºÀ» ÅëÇÑ ¹öÆ° Á¾·ù ¼³Á¤ __3.3 ¸®½ºÆ® ÅÂ±× ____3.3.1 ¼ø¼°¡ ¾ø´Â ¸®½ºÆ® ¡´ul¡µ ____3.3.2 ¼ø¼°¡ ÀÖ´Â ¸®½ºÆ® ¡´ol¡µ __3.4 Ç¥ ÅÂ±× ____3.4.1 Ç¥ÀÇ Çà ÅÂ±× ¡´tr¡µ ____3.4.2 Ç¥ÀÇ ¼¿ ÅÂ±× ¡´td¡µ __3.5 ÇÏÀÌÆÛ¸µÅ© ÅÂ±× 04 HTMLÀÇ ¹Ìµð¾î ÅÂ±× __4.1 À̹ÌÁö ÅÂ±× ____4.1.1 À̹ÌÁö¸¦ ÀÎÅͳݿ¡¼ °¡Á®¿À±â ____4.1.2 À̹ÌÁö¸¦ ·ÎÄÿ¡¼ °¡Á®¿À±â __4.2 ¿µ»ó ÅÂ±× ____4.2.1 controls ¼Ó¼ºÀ» ÅëÇÑ ÄÁÆ®·Ñ·¯ Ãß°¡ ____4.2.2 autoplay ¼Ó¼ºÀ» ÅëÇÑ ÀÚµ¿ Àç»ý ____4.2.3 poster ¼Ó¼ºÀ» ÅëÇÑ ¼¶³×ÀÏ Ãß°¡ __4.3 À½¼º ÅÂ±× ____4.3.1 controls ¼Ó¼ºÀ» ÅëÇÑ ÄÁÆ®·Ñ·¯ Ãß°¡ 05 HTMLÀÇ Æû ÅÂ±× __5.1 µ¥ÀÌÅÍ ÀÔ·Â ÅÂ±× ____5.1.1 name ¼Ó¼ºÀ» ÅëÇÑ µ¥ÀÌÅÍ ±¸ºÐ ____5.1.2 required ¼Ó¼ºÀ» ÅëÇÑ Çʼö ÀÔ·Â °ª ÁöÁ¤ ____5.1.4 type ¼Ó¼ºÀ» »ç¿ëÇÑ ¡´input¡µÀÇ º¯È ____5.1.5 checked ¼Ó¼ºÀ» ÅëÇÑ ±âº» ¼±Åà ÁöÁ¤ ____5.1.6 value ¼Ó¼ºÀ» ÅëÇÑ °ª »ðÀÔ ____5.1.7 disabled ¼Ó¼ºÀ» ÅëÇÑ ºñÈ°¼º ____5.1.8 readonly ¼Ó¼ºÀ» ÅëÇÑ Àб⠸ðµå __5.2 ´ÙÁß ÁÙ ÀÔ·Â ÅÂ±× ____5.2.1 rows ¼Ó¼ºÀ» ÅëÇÑ ÁÙ ¼ö ¼³Á¤ __5.3 µ¥ÀÌÅÍ ¼³¸í ÅÂ±× ____5.3.1 for ¼Ó¼ºÀ» ÅëÇÑ UX °³¼± __5.4 µ¥ÀÌÅÍ ¼±Åà ÅÂ±× ____5.4.1 multiple ¼Ó¼ºÀ» ÅëÇÑ ´ÙÁß ¼±Åà ÁöÁ¤ __5.5 ÀÚµ¿ ¿Ï¼º ÅÂ±× __5.6 µ¥ÀÌÅÍ Àü¼Û ÅÂ±× 06 CSSÀÇ ±âº» ½ºÅ¸ÀÏ __6.1 CSS ±âº» ¹®¹ý ____6.1.1 CSSÀÇ ÁÖ¼® __6.2 À¥ÀÇ »ö Ç¥Çö ¹æ¹ý __6.3 ±×·¹À̵ð¾ðÆ® ____6.3.1 ¼±Çü ±×·¹À̵ð¾ðÆ® ____6.3.2 ¿øÇü ±×·¹À̵ð¾ðÆ® ____6.3.3 ±×·¹À̵ð¾ðÆ® »ý¼º±â __6.4 ÅؽºÆ® ½ºÅ¸ÀÏ ____6.4.1 color: ÅؽºÆ® »ö ____6.4.2 font-size: ÅؽºÆ® Å©±â ____6.4.3 letter-spacing: ÅؽºÆ® ÀÚ°£ ____6.4.4 line-height: ÅؽºÆ® Çà°£ ____6.4.5 white-space: °ø¹é ó¸® ____6.4.6 work-break: ´Ü¾î ÁÙ¹Ù²Þ ____6.4.7 text-overflow: ÅؽºÆ® ³Ñħ ____6.4.8 text-align: ÅؽºÆ® Á¤·Ä ____6.4.9 font-weight: ÅؽºÆ® ±½±â ____6.4.10 font-family: ÆùÆ® ÁöÁ¤ ____6.4.11 @font-face ÆùÆ® Ãß°¡Çϱâ ____6.4.12 À¥ ÆùÆ® Ãß°¡Çϱâ __6.5 ¸®½ºÆ® ½ºÅ¸ÀÏ ____6.5.1 ¸®½ºÆ® ŸÀÔ ____6.5.2 À̹ÌÁö ¸®½ºÆ® ½Éº¼ 07 CSSÀÇ Box ½ºÅ¸ÀÏ __7.1 Box Å©±â ½ºÅ¸ÀÏ ____7.1.1 width: Æø ÁöÁ¤ ____7.1.2 height: ³ôÀÌ ÁöÁ¤ ____7.1.3 overflow: ¹þ¾î³ ¿ä¼Ò ¼³Á¤ ____7.1.4 aspect-ratio: °¡·Î¼¼·ÎÀÇ ºñÀ² __7.2 Box ¹è°æ ½ºÅ¸ÀÏ ____7.2.1 background: ¹è°æ __7.3 Box ¼± ½ºÅ¸ÀÏ ____7.3.1 border: Å׵θ® ____7.3.2 border-radius: µÕ±Ù ²ÀÁþÁ¡ ¼³Á¤ __7.4 BoxÀÇ ¿©¹é ¼³Á¤ ____7.4.1 margin: °Ñ ¿©¹é ____7.4.2 padding: ¼Ó ¿©¹é ____7.4.3 box-sizing: ¶Ç ´Ù¸¥ »óÀÚ Å©±â °è»ê¹ý __7.5 BoxÀÇ ±×¸²ÀÚ ½ºÅ¸ÀÏ ____7.5.1 box-shadow: ±×¸²ÀÚ 08 CSSÀÇ ¼±ÅÃÀÚ __8.1 ÅÂ±× ¼±ÅÃÀÚ __8.2 Àüü ¼±ÅÃÀÚ __8.3 ¾ÆÀ̵𠼱ÅÃÀÚ __8.4 Ŭ·¡½º ¼±ÅÃÀÚ __8.5 ¼Ó¼º ¼±ÅÃÀÚ __8.6 °¡»ó Ŭ·¡½º ¼±ÅÃÀÚ ____8.6.1 hover: ¸¶¿ì½º¸¦ ¿Ã·ÈÀ» ¶§ ____8.6.2 active: È°¼ºÈµÆÀ» ¶§ ____8.6.3 checked: üũµÇ¾úÀ» ¶§ ____8.6.4 disabled: ºñÈ°¼º ¿ä¼ÒÀÏ ¶§ ____8.6.5 enabled: È°¼º ¿ä¼ÒÀÏ ¶§ ____8.6.6 visited: ¹æ¹®ÇßÀ» ¶§ ____8.6.7 focus: Æ÷Ä¿½ÌµÉ ¶§ ____8.6.8 nth-child: N¹ø° ¿ä¼Ò __8.7 °áÇÕÀÚ ____8.7.1 ÇüÁ¦ °áÇÕÀÚ ____8.7.2 ÀÎÁ¢ ÇüÁ¦ °áÇÕÀÚ ____8.7.3 ÀÚ½Ä °áÇÕÀÚ ____8.7.4 ÀÚ¼Õ °áÇÕÀÚ 09 CSSÀÇ ·¹À̾ƿô __9.1 µð½ºÇ÷¹ÀÌ ____9.1.1 block: ºí·Ï ¿ä¼Ò ____9.1.2 inline: ÀζóÀÎ ¿ä¼Ò ____9.1.3 inline-block: ÀζóÀÎ ºí·Ï ¿ä¼Ò ____9.1.4 flexbox: Ç÷º½º ¹Ú½º ____9.1.5 grid: ±×¸®µå __9.2 Æ÷Áö¼Ç ____9.2.1 relative: »ó´ë À§Ä¡ ____9.2.2 absolute: Àý´ë À§Ä¡ ____9.2.3 fixed: °íÁ¤ À§Ä¡ ____9.2.4 sticky: ÈíÂø À§Ä¡ ____9.2.5 z-index: ¼ø¼ ¼³Á¤ 10 º¯Çü°ú ¾Ö´Ï¸ÞÀÌ¼Ç __10.1 º¯Çü ____10.1.1 rotate: ȸÀü ____10.1.2 translate: À§Ä¡ ____10.1.3 scale: Å©±â __10.2 Àüȯ È¿°ú ____10.2.1 transition-timing-function: ŸÀÌ¹Ö ÇÔ¼ö __10.3 ¾Ö´Ï¸ÞÀÌ¼Ç ____10.3.1 @keyframes: Å°ÇÁ·¹ÀÓ ____10.3.2 animation-name: Å°ÇÁ·¹ÀÓ À̸§ ____10.3.3 animation-duration: Áö¼Ó ½Ã°£ ____10.3.4 animation-iteration-count: ¹Ýº¹ Ƚ¼ö ____10.3.5 animation-direction: ¹æÇâ ____10.3.6 animation-fill-mode: Á¾·á ÈÄ ¸ðµå ____10.3.7 animation-delay: ´ë±â ½Ã°£ ____10.3.8 animation-timing-function: ŸÀÌ¹Ö ÇÔ¼ö 11 ¹ÝÀÀÇü À¥ ´Ù·ç±â __11.1 ¹ÝÀÀÇü À¥ÀÇ ±âº» ____11.1.1 ¹ÝÀÀÇü À¥À̶õ? ____11.1.2 viewport: ºä Æ÷Æ® ____11.1.3 @media: ¹Ìµð¾î Äõ¸® ____11.2 ¹ÝÀÀÇü ·¹À̾ƿô ¸¸µé±â ã¾Æº¸±â »ó¼¼ À̹ÌÁö
(°³)
1. ¹è¼Û
¹è¼ÛÀº ´çÀÏ ¿ÀÈÄ 4½ÃÀÌÀü(Åä¿äÀÏÀº ¿ÀÈÄ12½Ã)¿¡ ÁÖ¹®¹× °áÀ縦 ÇÏ½Ã¸é ´çÀϹè¼ÛµË´Ï´Ù. ¹è¼ÛÀº ÁÖ¹® ÈÄ °áÀç¿Ï·áÀÏÀ» ±âÁØÀ¸·Î 1~2ÀÏ ¾È¿¡ ¹è¼Û¿Ï·á¸¦ ¿øÄ¢À¸·Î ÇÏ°í ÀÖ½À´Ï´Ù. ´Ù¸¸ ºÎµæÀÌÇÑ °æ¿ì(ÇØ´ç»óÇ°ÀÇ Ç°Àý ¹× ÀýÆÇ) °í°´´Ô²² Àüȸ¦ µå·Á¼ 󸮸¦ ÇÕ´Ï´Ù. 2. ¹è¼Û·á ¹è¼Û·á´Â 25,000¿ø ÀÌ»óÀÌ °æ¿ì À̱×ÀëÇ÷¯½º¿¡¼ ºÎ´ãÇÏ°í, ¹Ì¸¸ÀÏ °æ¿ì °í°´ÀÌ 2,500¿øÀ» ºÎ´ãÇÕ´Ï´Ù. ´Ù¸¸ ±¸¸Å±Ý¾×ÀÌ 25,000¿ø ÀÌ»óÀε¥ Àû¸³±Ý µîÀ» »ç¿ëÇÏ¿© ½ÇÁ¦ °áÀç±Ý¾×ÀÌ 25,000¿ø ¹Ì¸¸ÀÌ µÇ´õ¶óµµ À̱×ÀëÇ÷¯½º¿¡¼ ¹è¼Û·á¸¦ ºÎ´ãÇÏ°í, Á¦ÁÖ¸¦ Á¦¿ÜÇÑ µµ¼Áö¿ªÀÇ °æ¿ì´Â 5,000¿øÀÌ Ãß°¡µË´Ï´Ù. Çؿܹè¼ÛÀº Àü¾× °í°´ºÎ´ãÀÌ µË´Ï´Ù. 5. ¹ÝÇ°/±³È¯
¹ÞÀ¸½Å ³¯ ºÎÅÍ ÀÏÁÖÀÏ À̳» ¹ÝÇ°/±³È¯ÀÌ °¡´ÉÇϽʴϴÙ. ½Ã°£ÀÌ Áö³ª¸é 󸮰¡ ºÒ°¡ÇÔÀ» ¾Ë·Á µå¸³´Ï´Ù. ´Ù¸¸ ÁÖ¹®ÇϽŠ»óÇ°°ú ´Ù¸¥ »óÇ°ÀÌ ¹è¼ÛµÇ°Å³ª Æĺ», ³«ÀåÀÌ ÀÖ´Â µµ¼ÀÇ °æ¿ì ÀÌ¿ë¾à°ü¿¡ ÁØÇÏ¿© À̱×ÀëÇ÷¯½ºÀÇ ºñ¿ëÀ¸·Î ±³È¯, ¹ÝÇ° ¹× ȯºÒ µîÀ» Çص帳´Ï´Ù. 4. ȯºÒ ¹ÞÀ¸½Å ³¯ºÎÅÍ 2ÀÏ À̳»·Î Àüȳª 1:1 °Ô½Ã±Û·Î Àû¾îÁÖ¼Å¾ß °¡´ÉÇϽʴϴÙ. 5. ÁÖÀÇ °í°´´Ô º¯½ÉÀ¸·Î ÀÎÇÑ ±³È¯/¹ÝÇ°/ȯºÒ °í°´´Ô²²¼ Åùèºñ(¿Õº¹Åùèºñ)¸¦ ºÎ´ãÀÌ µÇ´Ï ÀÌÁ¡ À¯ÀÇÇØ ÁֽʽÿÀ. ¶ÇÇÑ °ÀÇÅ×ÀÙ/¾ãÀº¹®Á¦Áý/ºñ´ÒÆ÷ÀåµÈÁ¦Ç°µîÀº Çѹø ±¸¸ÅÇÏ½Ã¸é ±³È¯/¹ÝÇ°/ȯºÒÀÌ ÀüÇô ¾ÈµË´Ï´Ù. ½ÅÁßÈ÷ »ý°¢Çϼż ±¸¸Å ºÎŹµå¸³´Ï´Ù. ´Ù¸¸ ºÒ·®Å×ÀÙÀÇ °æ¿ì ±× ºÒ·®ÀÌ µÈ °³º°Å×ÀÙÀ» À̱×ÀëÇ÷¯½ºÀÇ ºñ¿ëÀ¸·Î A/S¸¦ Çص帳´Ï´Ù. 6. ÁÖ¹®Ãë¼Ò, ±³È¯, ¹ÝÇ° ¹× ȯºÒÀº ´çÀÏ 3½Ã ÀÌÀü¿¡ ÇØÁÖ¼Å¾ß °¡´ÉÇÕ´Ï´Ù. ±× ÀÌÈÄ´Â ¹è¼Û µî¿¡ µû¸¥ Á¦ºñ¿ëÀ» ºÎ´ãÇÏ¼Å¾ß ÇÕ´Ï´Ù.
|
|
||||||||
|
||||||||
|
||||||||
* »óÇ°»çÀÌÁî Ä¡¼ö´Â Àç´Â ¹æ¹ý°ú À§Ä¡¿¡ µû¶ó 1~3cm ¿ÀÂ÷°¡ ÀÖÀ» ¼ö ÀÖ½À´Ï´Ù.