ÄÜÅÙÃ÷ »ó¼¼º¸±â
PostCSS


PostCSS

PostCSS

<¿Â°³¹ßÆÀ> Àú | ¿Â³ëÆ®

Ãâ°£ÀÏ
2024-05-28
ÆÄÀÏÆ÷¸Ë
ePub
¿ë·®
562 K
Áö¿ø±â±â
PC½º¸¶Æ®ÆùÅÂºí¸´PC
ÇöȲ
½Åû °Ç¼ö : 0 °Ç
°£·« ½Åû ¸Þ¼¼Áö
ÄÜÅÙÃ÷ ¼Ò°³
¸ñÂ÷
ÇÑÁÙ¼­Æò

ÄÜÅÙÃ÷ ¼Ò°³

PostCSSÀÇ °­·ÂÇÑ ±â´ÉÀ» È°¿ëÇÏ¿© CSS °³¹ß ÇÁ·Î¼¼½º¸¦ °£¼ÒÈ­Çϱâ À§ÇÑ Á¾ÇÕ °¡À̵åÀÎ "PostCSS"¿¡ ¿À½Å °ÍÀ» ȯ¿µÇÕ´Ï´Ù. ÀÌ Ã¥¿¡¼­´Â PostCSSÀÇ ¼Ò°³ºÎÅÍ °í±Þ ±â¼ú±îÁö »ìÆ캸°í CSS ¿öÅ©Ç÷ο츦 ÃÖÀûÈ­ÇÏ´Â Áö½Ä°ú ±â¼úÀ» Á¦°øÇÕ´Ï´Ù.

1Àå, 'PostCSS ¼Ò°³'¿¡¼­´Â PostCSS¿¡ ´ëÇØ ¼Ò°³ÇÏ´Â °ÍÀ¸·Î ½ÃÀÛÇÕ´Ï´Ù. PostCSS°¡ ¹«¾ùÀÎÁö, ÁÖ¿ä ÀÌÁ¡Àº ¹«¾ùÀÎÁö, Sass ¹× LESS¿Í °°Àº Àü󸮱â¿Í ¾î¶»°Ô ºñ±³µÇ´ÂÁö »ìÆ캾´Ï´Ù. °í±Þ ±â´ÉÀ» »ìÆ캸±â Àü¿¡ PostCSSÀÇ ±âº» »çÇ×À» ÀÌÇØÇÏ´Â °ÍÀÌ Áß¿äÇÕ´Ï´Ù.

2Àå, 'ȯ°æ ¼³Á¤Çϱâ'¿¡¼­´Â PostCSS¸¦ À§ÇÑ °³¹ß ȯ°æÀ» ¼³Á¤ÇÏ´Â °úÁ¤À» ¾È³»ÇÕ´Ï´Ù. Node.js ¹× npm ¼³Ä¡, PostCSS·Î ±âº» ÇÁ·ÎÁ§Æ® ¸¸µé±â, PostCSS Ç÷¯±×ÀÎ ¼Ò°³, ÇÁ·ÎÁ§Æ®¿¡¼­ PostCSS ±¸¼ºÇϱ⠵îÀ» ´Ù·ì´Ï´Ù.

3Àå, 'ÇÙ½É °³³ä°ú ±¸¹®'¿¡¼­´Â PostCSSÀÇ ÇÙ½É °³³ä°ú ±¸¹®À» »ìÆ캾´Ï´Ù. PostCSS ±¸¹®, Áßø ±ÔÄ¢ ÀÛ¼º, º¯¼ö ¹× ¹Í½ºÀÎ È°¿ë, Á¶°ÇºÎ ¹× ·çÇÁ ±¸ÇöÀ» ÅëÇØ CSS °³¹ß ÇÁ·Î¼¼½º¸¦ °³¼±ÇÏ´Â ¹æ¹ýÀ» »ìÆ캾´Ï´Ù.

4Àå, 'Àαâ ÀÖ´Â PostCSS Ç÷¯±×ÀÎ'¿¡¼­´Â ¿öÅ©Ç÷ο츦 Å©°Ô Çâ»ó½Ãų ¼ö ÀÖ´Â °¡Àå Àαâ ÀÖ´Â PostCSS Ç÷¯±×ÀÎ ¸î °¡Áö¸¦ ¼Ò°³ÇÕ´Ï´Ù. ÀÚµ¿ °ø±Þ¾÷ü Á¢µÎ»ç¸¦ À§ÇÑ autoprefixer, CSS ÃÖÀûÈ­¸¦ À§ÇÑ cssnano, Sass¿Í À¯»çÇÑ ±â´ÉÀ» À§ÇÑ precss, ÃֽŠCSS ±â´ÉÀ» À§ÇÑ postcss-preset-env¿¡ ´ëÇØ ¼³¸íÇÕ´Ï´Ù.

5Àå, '°í±Þ ±â´É ¹× ±â¹ý'¿¡¼­´Â °í±Þ ±â´É ¹× ±â¹ýÀ» »ìÆ캽À¸·Î½á PostCSS ±â¼úÀ» ÇÑ ´Ü°è ¾÷±×·¹À̵åÇÕ´Ï´Ù. »ç¿ëÀÚ Á¤ÀÇ PostCSS Ç÷¯±×ÀÎ ¸¸µé±â, ¹Ìµð¾î Äõ¸® ¹× ¹ÝÀÀÇü µðÀÚÀΠó¸®, CSS ±×¸®µå ¹× Flexbox ÀÛ¾÷, JavaScript ÇÁ·¹ÀÓ¿öÅ©¿ÍÀÇ ÅëÇÕ¿¡ ´ëÇØ ´Ù·ì´Ï´Ù.

6Àå, '¿öÅ©Ç÷Π°³¼±'¿¡¼­´Â PostCSS·Î ¿öÅ©Ç÷θ¦ °³¼±ÇÏ´Â µ¥ ÁßÁ¡À» µÓ´Ï´Ù. CSS¸¦ ÀÚµ¿À¸·Î ÄÄÆÄÀÏÇϱâ À§ÇÑ °¨½Ã ÀÛ¾÷ ¼³Á¤, µð¹ö±ëÀ» À§ÇÑ ¼Ò½º ¸Ê »ç¿ë, Webpack ¹× Gulp¿Í °°Àº ºôµå µµ±¸¿Í PostCSS ÅëÇÕ, È®Àå °¡´ÉÇÏ°í À¯Áö °ü¸® °¡´ÉÇÑ CSS¸¦ À§ÇÑ ¸ð¹ü »ç·Ê¿¡ ´ëÇØ ¼³¸íÇÕ´Ï´Ù.

7Àå, '»ç·Ê ¿¬±¸ ¹× ½ÇÁ¦ ¿¹½Ã'¿¡¼­´Â ´ë±Ô¸ð ÇÁ·ÎÁ§Æ®¿¡¼­ PostCSS¸¦ »ç¿ëÇÑ ½ÇÁ¦ ÀλçÀÌÆ®¸¦ Á¦°øÇÕ´Ï´Ù. PostCSS°¡ ¾î¶»°Ô È°¿ëµÇ´ÂÁö ºÐ¼®ÇÏ°í, Àü󸮱⿡¼­ PostCSS·Î ¸¶À̱׷¹À̼ÇÇÏ´Â ¹æ¹ý¿¡ ´ëÇØ ³íÀÇÇϸç, ¾÷°è Àü¹®°¡ÀÇ ÆÁ°ú ¿ä·ÉÀ» °øÀ¯ÇÏ¿© CSS ¿öÅ©Ç÷θ¦ È¿°úÀûÀ¸·Î ÃÖÀûÈ­ÇÏ´Â µ¥ µµ¿òÀ» ÁÝ´Ï´Ù.

ÀÌ Ã¥À» ´Ù ÀÐ°í ³ª¸é PostCSS¸¦ ¿ÏÀüÈ÷ ÀÌÇØÇÏ°í ±× ±â´ÉÀ» È°¿ëÇÏ¿© CSS °³¹ß ÇÁ·Î¼¼½º¸¦ °£¼ÒÈ­ÇÏ°í ÄÚµå À¯Áö °ü¸®¼ºÀ» °³¼±Çϸç È¿À²ÀûÀÌ°í Çö´ëÀûÀÎ À¥ ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µå´Â ¹æ¹ýÀ» ÀÍÈ÷°Ô µÉ °ÍÀÔ´Ï´Ù. ÀÌÁ¦ PostCSSÀÇ ¼¼°è·Î ¶Ù¾îµé¾î CSS ÀÛ¼º ¹æ½ÄÀ» Çõ½ÅÇØ º¸¼¼¿ä!

¸ñÂ÷

1Àå : PostCSS ¼Ò°³
___1. PostCSS¶õ?
___2. PostCSS »ç¿ëÀÇ ÁÖ¿ä ÀÌÁ¡
___3. PostCSS°¡ Sass ¹× LESS¿Í °°Àº Àü󸮱â¿Í ºñ±³ÇÏ´Â ¹æ¹ý
2Àå : ȯ°æ ¼³Á¤Çϱâ
___1. Node.js ¹× npm ¼³Ä¡Çϱâ
___2. PostCSS·Î ±âº» ÇÁ·ÎÁ§Æ® ¼³Á¤Çϱâ
___3. PostCSS Ç÷¯±×ÀÎ ¼Ò°³
___4. ÇÁ·ÎÁ§Æ®¿¡¼­ PostCSS ±¸¼ºÇϱâ
3Àå : ÇÙ½É °³³ä ¹× ±¸¹®
___1. PostCSS ±¸¹® ÀÌÇØÇϱâ
___2. Áßø ±ÔÄ¢ ÀÛ¼ºÇϱâ
___3. º¯¼ö ¹× ¹Í½ºÀÎ È°¿ëÇϱâ
___4. Á¶°Ç¹®°ú ·çÇÁ ±¸ÇöÇϱâ
4Àå : Àαâ ÀÖ´Â PostCSS Ç÷¯±×ÀÎ
___1. autoprefixer: ÀÚµ¿ °ø±Þ¾÷ü Á¢µÎ»ç
___2. cssnano: CSS ÃÖÀûÈ­
___3. precss: Sass¿Í À¯»çÇÑ ±â´É
___4. postcss-preset-env: ÃֽŠCSS ±â´É
5Àå : °í±Þ ±â´É ¹× ±â¹ý
___1. »ç¿ëÀÚ Á¤ÀÇ PostCSS Ç÷¯±×ÀÎ ¸¸µé±â
___2. ¹Ìµð¾î Äõ¸® ¹× ¹ÝÀÀÇü µðÀÚÀΠó¸®Çϱâ
___3. PostCSS¿¡¼­ CSS ±×¸®µå ¹× Ç÷º½º¹Ú½º·Î ÀÛ¾÷Çϱâ
___4. ÀÚ¹Ù½ºÅ©¸³Æ® ÇÁ·¹ÀÓ¿öÅ©¿Í ÅëÇÕÇϱâ
6Àå : ¿öÅ©Ç÷Π°³¼± »çÇ×
___1. CSS¸¦ ÀÚµ¿À¸·Î ÄÄÆÄÀÏÇϵµ·Ï °¨½Ã ÀÛ¾÷ ¼³Á¤Çϱâ
___2. µð¹ö±ëÀ» À§ÇÑ ¼Ò½º ¸Ê »ç¿ë
___3. PostCSS¿Í ºôµå µµ±¸(Webpack, Gulp) ÅëÇÕÇϱâ
___4. È®Àå °¡´ÉÇÏ°í À¯Áö °ü¸®°¡ ½¬¿î CSS¸¦ À§ÇÑ ¸ð¹ü »ç·Ê
7Àå : »ç·Ê ¿¬±¸ ¹× ½ÇÁ¦ ¿¹½Ã
___1. ´ë±Ô¸ð ÇÁ·ÎÁ§Æ®¿¡¼­ PostCSS »ç¿ë ºÐ¼®Çϱâ
___2. Àü󸮱⿡¼­ PostCSS·Î ¸¶À̱׷¹À̼ÇÇϱâ
___3. ¾÷°è Àü¹®°¡°¡ ¾Ë·ÁÁÖ´Â ÆÁ°ú ¿ä·É