- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > ´Ù¾çÇÑ ¿¹Á¦·Î ¹è¿ì´Â CSS ¼³°è ½ÇÀü °¡À̵å[Á¦ÀÌÆà]
SMACSS, BEM, PRECSS µî CSS ¼³°è¿¡ °üÇÑ ´Ù¾çÇÑ »ç°í ¹æ¹ý ÇнÀ!
CSS¸¦ º¸´Ù ±íÀÌ ÀÌÇØÇÒ ¼ö ÀÖ´Â 8°¡Áö ¼³°è ¹æ¹ý!
¸¹Àº °³¹ß ÇöÀå¿¡¼ CSS¸¦ µµÀÔÇؼ »ç¿ëÇÏ°í ÀÖÁö¸¸, ¿©ÀüÈ÷ ¿©·¯ °¡Áö °í¹ÎÀÌ ³²¾Æ ÀÖ½À´Ï´Ù. ÇÁ·ÎÁ§Æ®ÀÇ ±Ô¸ð³ª Ư¼º¿¡ µû¶ó ÀûÇÕÇÑ ÇØ°áÃ¥ ¿ª½Ã õÂ÷¸¸º°ÀÎ °Ô Çö½ÇÀÔ´Ï´Ù.
ÀÌ Ã¥Àº CSSÀÇ ´Ù¾çÇÑ ¼³°è ¹æ¹ýÀ» ¼Ò°³ÇÏ¸é¼ Á¦¹Ý »ç°í¹æ½ÄÀº ¹°·Ð, ½ÇÀü Æ÷ÀÎÆ®±îÁö ¤¾î ÁÝ´Ï´Ù. À̸¦ ±â¹ÝÀ¸·Î ¹öÆ°, ¶óº§, Ä«µå, Å×ÀÌºí µî ´ëÇ¥ÀûÀÎ À¥ ¸ðµâÀ» Àü¹ÝÀûÀ¸·Î ´Ù·ç°í, ÀÌ ±¸Á¶µéÀ» Á¶ÇÕÇÏ´Â ½ÇÀüÀûÀÎ Äڵ嵵 ¼Ò°³ÇÕ´Ï´Ù.
?
CSS¸¦ º¸´Ù ±íÀÌ ÀÌÇØÇÒ ¼ö ÀÖ´Â 8°¡Áö ¼³°è ¹æ¹ý!
¸¹Àº °³¹ß ÇöÀå¿¡¼ CSS¸¦ µµÀÔÇؼ »ç¿ëÇÏ°í ÀÖÁö¸¸, ¿©ÀüÈ÷ ¿©·¯ °¡Áö °í¹ÎÀÌ ³²¾Æ ÀÖ½À´Ï´Ù. ÇÁ·ÎÁ§Æ®ÀÇ ±Ô¸ð³ª Ư¼º¿¡ µû¶ó ÀûÇÕÇÑ ÇØ°áÃ¥ ¿ª½Ã õÂ÷¸¸º°ÀÎ °Ô Çö½ÇÀÔ´Ï´Ù.
ÀÌ Ã¥Àº CSSÀÇ ´Ù¾çÇÑ ¼³°è ¹æ¹ýÀ» ¼Ò°³ÇÏ¸é¼ Á¦¹Ý »ç°í¹æ½ÄÀº ¹°·Ð, ½ÇÀü Æ÷ÀÎÆ®±îÁö ¤¾î ÁÝ´Ï´Ù. À̸¦ ±â¹ÝÀ¸·Î ¹öÆ°, ¶óº§, Ä«µå, Å×ÀÌºí µî ´ëÇ¥ÀûÀÎ À¥ ¸ðµâÀ» Àü¹ÝÀûÀ¸·Î ´Ù·ç°í, ÀÌ ±¸Á¶µéÀ» Á¶ÇÕÇÏ´Â ½ÇÀüÀûÀÎ Äڵ嵵 ¼Ò°³ÇÕ´Ï´Ù.
?
ÀúÀÚ: ÇÑ´Ù ¾ÆÃ÷½Ã (ÁöÀºÀÌ), ±è¿¬¼ö (¿Å±äÀÌ)
Chapter 1 CSSÀÇ ¿ª»ç¿Í ¹®Á¦Á¡ 1
1-1 CSSÀÇ ½ÃÀÛ 2
1-2 CSSÀÇ ¹®Á¦Á¡ 4
1-3 º¹ÀâÇØÁö´Â À¥ °³¹ß 6
1-4 ÇØ°áÃ¥À¸·Î ź»ýÇÑ CSS ¼³°è 9
1-5 CSS ¼³°è¿Í µðÀÚÀÎ ½Ã½ºÅÛ ¿¬µ¿ 11
Chapter 2 CSS ¼³°è ±âº» ¹× ½ÇÀü 17
2-1 CSS ¼³°è¿¡ µé¾î°¡±â Àü¿¡: CSS ±âº» »ó¼¼µµ¿Í ¼¿·ºÅÍ 18
2-2 CSS ¼³°è¿¡ µé¾î°¡±â Àü¿¡: ¸®¼Â CSS 24
2-3 CSS ¼³°è¿¡ µé¾î°¡±â Àü¿¡: ¿µ´Ü¾î¸¦ °áÇÕÇÏ´Â ¹æ½ÄÀÇ À̸§ 28
2-4 ÁÁÀº CSS ¼³°èÀÇ ³× °¡Áö ¸ñÇ¥ 29
2-5 CSS ¼³°è ½ÇÀü°ú ¿©´ü °¡Áö Æ÷ÀÎÆ® 31
2-6 ¸ðµâÀÇ »ó¼¼µµ¸¦ °í·ÁÇÑ´Ù 74
2-7 CSS ¼³°èÀÇ Çʿ伺 78
Chapter 3 ´Ù¾çÇÑ ¼³°è ±â¹ý 79
3-1 ÀÌ ÀåÀÇ ¼³¸í¿¡ ¾Õ¼ 80
3-2 OOCSS 81
3-3 SMACSS 86
3-4 BEM 103
3-5 PRECSS 134
Chapter 4 ·¹À̾ƿô ¼³°è 159
4-1 4~7ÀåÀÇ Äڵ带 À§ÇÑ »çÀü Áغñ 160
4-2 À̹ø Àå¿¡¼ ´Ù·ç´Â »ùÇà 162
4-3 Çì´õ 164
4-4 ǪÅÍ 167
4-5 ÄÜÅÙÃ÷ ¿µ¿ª 170
Chapter 5 CSS ¼³°è ¸ðµâÁý ¨ç ÃÖ¼Ò ¸ðµâ 179
5-1 À̹ø Àå ÀÌÈÄÀÇ ¸ðµâÁý ¼³¸í ¹æ¹ý 180
5-2 ÃÖ¼Ò ¸ðµâ Á¤ÀÇ 181
5-3 ¹öÆ° 182
5-4 ¾ÆÀÌÄÜÀÌ ºÙÀº ÀÛÀº ¹öÆ° 197
5-5 ¾ÆÀÌÄÜ 201
5-6 ¶óº§ 207
5-7 Á¦¸ñ 212
5-8 ÁÖ¼® 220
Chapter 6 CSS ¼³°è ¸ðµâÁý ¨è º¹ÇÕ ¸ðµâ 223
6-1 º¹ÇÕ ¸ðµâ Á¤ÀÇ 224
6-2 ¹Ìµð¾î 225
6-3 Ä«µå 235
6-4 Å×À̺í(¼öÆò) 256
6-5 Å×À̺í(¼öÁ÷) 263
6-6 Å×À̺í(±³Â÷) 266
6-7 ÆäÀÌÀú 270
6-8 ³»ºñ°ÔÀÌ¼Ç 276
6-9 CTA 279
6-10 °¡°ÝÇ¥ 281
6-11 FAQ 292
6-12 ¾ÆÄÚµð¾ð 298
6-13 Á¡º¸Æ®·Ð 305
6-14 Æ÷½ºÆ® ¸ñ·Ï 312
6-15 ¼ø¼°¡ ¾ø´Â ¸®½ºÆ® 315
6-16 ¼ø¼°¡ ÀÖ´Â ¸®½ºÆ® 321
Chapter 7 CSS ¼³°è ¸ðµâÁý ¨é ¸ðµâ Àç»ç¿ë 325
7-1 ÃÖ¼Ò ¸ðµâÀ» »ç¿ëÇÑ º¹ÇÕ ¸ðµâ ¸¸µé±â 326
7-2 ÃÖ¼Ò ¸ðµâ°ú º¹ÇÕ ¸ðµâ Á¶ÇÕÇϱâ 329
7-3 º¹ÇÕ ¸ðµâ °£ Á¶ÇÕÇϱâ 337
Chapter 8 CSS ¼³°è¸¦ º¸´Ù ÀßÇϱâ À§ÇÑ ½ºÅ¸ÀÏ °¡À̵å 347
8-1 ½ºÅ¸ÀÏ °¡À̵å¶õ 348
8-2 ¿Ö ½ºÅ¸ÀÏ °¡À̵尡 ÇÊ¿äÇÑ°¡? 349
8-3 ½ºÅ¸ÀÏ °¡ÀÌµå ¸¸µé±â 350
8-4 ½ºÅ¸ÀÏ °¡ÀÌµå ¸¸µé±â¸¦ À§ÇÑ Áöħ ¸ðÀ½ 363
Chapter 9 CSS °³¹ß¿¡ µµ¿òÀÌ µÇ´Â ´Ù¾çÇÑ ±â¼ú 365
9-1 CSS °³¹ß È¿À²È¿Í ½Ç¼ö ÁÙÀ̱â 366
9-2 »ç¶÷¿¡ µû¸¥ ÆíÂ÷ ¾ø¾Ö±â 369
9-3 ¸®ÆÑÅ͸µ ÈùÆ® ¾ò±â 373
9-4 CSS °æ·®È 375
9-5 HTML °³¹ß È¿À²ÈÇϱâ 381
9-6 °³¹ß¿¡ Àü´ÞÇÒ ¸¶½ºÅÍ ÀÚµ¿À¸·Î ó¸®Çϱâ 383
1-1 CSSÀÇ ½ÃÀÛ 2
1-2 CSSÀÇ ¹®Á¦Á¡ 4
1-3 º¹ÀâÇØÁö´Â À¥ °³¹ß 6
1-4 ÇØ°áÃ¥À¸·Î ź»ýÇÑ CSS ¼³°è 9
1-5 CSS ¼³°è¿Í µðÀÚÀÎ ½Ã½ºÅÛ ¿¬µ¿ 11
Chapter 2 CSS ¼³°è ±âº» ¹× ½ÇÀü 17
2-1 CSS ¼³°è¿¡ µé¾î°¡±â Àü¿¡: CSS ±âº» »ó¼¼µµ¿Í ¼¿·ºÅÍ 18
2-2 CSS ¼³°è¿¡ µé¾î°¡±â Àü¿¡: ¸®¼Â CSS 24
2-3 CSS ¼³°è¿¡ µé¾î°¡±â Àü¿¡: ¿µ´Ü¾î¸¦ °áÇÕÇÏ´Â ¹æ½ÄÀÇ À̸§ 28
2-4 ÁÁÀº CSS ¼³°èÀÇ ³× °¡Áö ¸ñÇ¥ 29
2-5 CSS ¼³°è ½ÇÀü°ú ¿©´ü °¡Áö Æ÷ÀÎÆ® 31
2-6 ¸ðµâÀÇ »ó¼¼µµ¸¦ °í·ÁÇÑ´Ù 74
2-7 CSS ¼³°èÀÇ Çʿ伺 78
Chapter 3 ´Ù¾çÇÑ ¼³°è ±â¹ý 79
3-1 ÀÌ ÀåÀÇ ¼³¸í¿¡ ¾Õ¼ 80
3-2 OOCSS 81
3-3 SMACSS 86
3-4 BEM 103
3-5 PRECSS 134
Chapter 4 ·¹À̾ƿô ¼³°è 159
4-1 4~7ÀåÀÇ Äڵ带 À§ÇÑ »çÀü Áغñ 160
4-2 À̹ø Àå¿¡¼ ´Ù·ç´Â »ùÇà 162
4-3 Çì´õ 164
4-4 ǪÅÍ 167
4-5 ÄÜÅÙÃ÷ ¿µ¿ª 170
Chapter 5 CSS ¼³°è ¸ðµâÁý ¨ç ÃÖ¼Ò ¸ðµâ 179
5-1 À̹ø Àå ÀÌÈÄÀÇ ¸ðµâÁý ¼³¸í ¹æ¹ý 180
5-2 ÃÖ¼Ò ¸ðµâ Á¤ÀÇ 181
5-3 ¹öÆ° 182
5-4 ¾ÆÀÌÄÜÀÌ ºÙÀº ÀÛÀº ¹öÆ° 197
5-5 ¾ÆÀÌÄÜ 201
5-6 ¶óº§ 207
5-7 Á¦¸ñ 212
5-8 ÁÖ¼® 220
Chapter 6 CSS ¼³°è ¸ðµâÁý ¨è º¹ÇÕ ¸ðµâ 223
6-1 º¹ÇÕ ¸ðµâ Á¤ÀÇ 224
6-2 ¹Ìµð¾î 225
6-3 Ä«µå 235
6-4 Å×À̺í(¼öÆò) 256
6-5 Å×À̺í(¼öÁ÷) 263
6-6 Å×À̺í(±³Â÷) 266
6-7 ÆäÀÌÀú 270
6-8 ³»ºñ°ÔÀÌ¼Ç 276
6-9 CTA 279
6-10 °¡°ÝÇ¥ 281
6-11 FAQ 292
6-12 ¾ÆÄÚµð¾ð 298
6-13 Á¡º¸Æ®·Ð 305
6-14 Æ÷½ºÆ® ¸ñ·Ï 312
6-15 ¼ø¼°¡ ¾ø´Â ¸®½ºÆ® 315
6-16 ¼ø¼°¡ ÀÖ´Â ¸®½ºÆ® 321
Chapter 7 CSS ¼³°è ¸ðµâÁý ¨é ¸ðµâ Àç»ç¿ë 325
7-1 ÃÖ¼Ò ¸ðµâÀ» »ç¿ëÇÑ º¹ÇÕ ¸ðµâ ¸¸µé±â 326
7-2 ÃÖ¼Ò ¸ðµâ°ú º¹ÇÕ ¸ðµâ Á¶ÇÕÇϱâ 329
7-3 º¹ÇÕ ¸ðµâ °£ Á¶ÇÕÇϱâ 337
Chapter 8 CSS ¼³°è¸¦ º¸´Ù ÀßÇϱâ À§ÇÑ ½ºÅ¸ÀÏ °¡À̵å 347
8-1 ½ºÅ¸ÀÏ °¡À̵å¶õ 348
8-2 ¿Ö ½ºÅ¸ÀÏ °¡À̵尡 ÇÊ¿äÇÑ°¡? 349
8-3 ½ºÅ¸ÀÏ °¡ÀÌµå ¸¸µé±â 350
8-4 ½ºÅ¸ÀÏ °¡ÀÌµå ¸¸µé±â¸¦ À§ÇÑ Áöħ ¸ðÀ½ 363
Chapter 9 CSS °³¹ß¿¡ µµ¿òÀÌ µÇ´Â ´Ù¾çÇÑ ±â¼ú 365
9-1 CSS °³¹ß È¿À²È¿Í ½Ç¼ö ÁÙÀ̱â 366
9-2 »ç¶÷¿¡ µû¸¥ ÆíÂ÷ ¾ø¾Ö±â 369
9-3 ¸®ÆÑÅ͸µ ÈùÆ® ¾ò±â 373
9-4 CSS °æ·®È 375
9-5 HTML °³¹ß È¿À²ÈÇϱâ 381
9-6 °³¹ß¿¡ Àü´ÞÇÒ ¸¶½ºÅÍ ÀÚµ¿À¸·Î ó¸®Çϱâ 383
SMACSS, BEM, PRECSS µî CSS ¼³°è¿¡ °üÇÑ ´Ù¾çÇÑ »ç°í ¹æ¹ý ÇнÀ!
¹öÆ°, ¶óº§, Ä«µå, Å×ÀÌºí µî ½ÇÁúÀûÀÎ ÄÚµå ´Ù¼ö ¼ö·Ï!
CSS¸¦ º¸´Ù ±íÀÌ ÀÌÇØÇÒ ¼ö ÀÖ´Â 8°¡Áö ¼³°è ¹æ¹ý!
¸¹Àº °³¹ß ÇöÀå¿¡¼ CSS¸¦ µµÀÔÇؼ »ç¿ëÇÏ°í ÀÖÁö¸¸, ¿©ÀüÈ÷ ¿©·¯ °¡Áö °í¹ÎÀÌ ³²¾Æ ÀÖ½À´Ï´Ù. ÇÁ·ÎÁ§Æ®ÀÇ ±Ô¸ð³ª Ư¼º¿¡ µû¶ó ÀûÇÕÇÑ ÇØ°áÃ¥ ¿ª½Ã õÂ÷¸¸º°ÀÎ °Ô Çö½ÇÀÔ´Ï´Ù.
ÀÌ Ã¥Àº CSSÀÇ ´Ù¾çÇÑ ¼³°è ¹æ¹ýÀ» ¼Ò°³ÇÏ¸é¼ Á¦¹Ý »ç°í¹æ½ÄÀº ¹°·Ð, ½ÇÀü Æ÷ÀÎÆ®±îÁö ¤¾î ÁÝ´Ï´Ù. À̸¦ ±â¹ÝÀ¸·Î ¹öÆ°, ¶óº§, Ä«µå, Å×ÀÌºí µî ´ëÇ¥ÀûÀÎ À¥ ¸ðµâÀ» Àü¹ÝÀûÀ¸·Î ´Ù·ç°í, ÀÌ ±¸Á¶µéÀ» Á¶ÇÕÇÏ´Â ½ÇÀüÀûÀÎ Äڵ嵵 ¼Ò°³ÇÕ´Ï´Ù.
´ëÇ¥Àû CSS ¼³°è ¹æ¹ýÀÎ ¡®BEM¡¯, ±×¸®°í ÀúÀÚ°¡ °³¹ßÇÑ ¼³°è ¹æ¹ýÀÎ ¡®PRECSS¡¯¸¦ ºñ±³ÇÏ¸é¼ ¼³°è¿Í °ü·ÃµÈ »ç°í °úÁ¤À» Ä£ÀýÇÏ°Ô ¼Ò°³ÇÏ¸é¼ ÃÖÀûÀÇ ÇØ°áÃ¥À» ã¾Æ°¡µµ·Ï µ½½À´Ï´Ù.
À¥ °³¹ß¿¡ ¶Ù¾îµç °³¹ßÀÚ, ÇÁ·±Æ®¿£µå ¿£Áö´Ï¾î ºÐµéÀ̶ó¸é ¹Ýµå½Ã ÀÐ¾î ºÁ¾ß ÇÒ Ã¥ÀÔ´Ï´Ù.
ÀÌ Ã¥ÀÇ ´ë»ó µ¶ÀÚ
- CSS ¼³°è¿¡ °üÇÑ Áö½ÄÀ» ½ÀµæÇØ ÇÑ ´Ü°è ¼ºÀåÇÏ°íÀÚ ÇÏ´Â ÁִϾî ÇÁ·±Æ®¿£µå ¿£Áö´Ï¾î
- CSS ¼³°è¿¡ °üÇÑ ±íÀº ÀÌÇظ¦ ÅëÇØ ½Ç·ÂÀ» Çâ»óÇÏ°íÀÚ ÇÏ´Â ½Ã´Ï¾î ÇÁ·±Æ®¿£µå ¿£Áö´Ï¾î
- Á¶Á÷ ¼öÁØ¿¡¼ÀÇ CSS ±ÔÄ¢À» Á¦Á¤ÇÏ°íÀÚ Çϴ åÀÓÀÚ³ª ÆÀ ¸®´õ
¹öÆ°, ¶óº§, Ä«µå, Å×ÀÌºí µî ½ÇÁúÀûÀÎ ÄÚµå ´Ù¼ö ¼ö·Ï!
CSS¸¦ º¸´Ù ±íÀÌ ÀÌÇØÇÒ ¼ö ÀÖ´Â 8°¡Áö ¼³°è ¹æ¹ý!
¸¹Àº °³¹ß ÇöÀå¿¡¼ CSS¸¦ µµÀÔÇؼ »ç¿ëÇÏ°í ÀÖÁö¸¸, ¿©ÀüÈ÷ ¿©·¯ °¡Áö °í¹ÎÀÌ ³²¾Æ ÀÖ½À´Ï´Ù. ÇÁ·ÎÁ§Æ®ÀÇ ±Ô¸ð³ª Ư¼º¿¡ µû¶ó ÀûÇÕÇÑ ÇØ°áÃ¥ ¿ª½Ã õÂ÷¸¸º°ÀÎ °Ô Çö½ÇÀÔ´Ï´Ù.
ÀÌ Ã¥Àº CSSÀÇ ´Ù¾çÇÑ ¼³°è ¹æ¹ýÀ» ¼Ò°³ÇÏ¸é¼ Á¦¹Ý »ç°í¹æ½ÄÀº ¹°·Ð, ½ÇÀü Æ÷ÀÎÆ®±îÁö ¤¾î ÁÝ´Ï´Ù. À̸¦ ±â¹ÝÀ¸·Î ¹öÆ°, ¶óº§, Ä«µå, Å×ÀÌºí µî ´ëÇ¥ÀûÀÎ À¥ ¸ðµâÀ» Àü¹ÝÀûÀ¸·Î ´Ù·ç°í, ÀÌ ±¸Á¶µéÀ» Á¶ÇÕÇÏ´Â ½ÇÀüÀûÀÎ Äڵ嵵 ¼Ò°³ÇÕ´Ï´Ù.
´ëÇ¥Àû CSS ¼³°è ¹æ¹ýÀÎ ¡®BEM¡¯, ±×¸®°í ÀúÀÚ°¡ °³¹ßÇÑ ¼³°è ¹æ¹ýÀÎ ¡®PRECSS¡¯¸¦ ºñ±³ÇÏ¸é¼ ¼³°è¿Í °ü·ÃµÈ »ç°í °úÁ¤À» Ä£ÀýÇÏ°Ô ¼Ò°³ÇÏ¸é¼ ÃÖÀûÀÇ ÇØ°áÃ¥À» ã¾Æ°¡µµ·Ï µ½½À´Ï´Ù.
À¥ °³¹ß¿¡ ¶Ù¾îµç °³¹ßÀÚ, ÇÁ·±Æ®¿£µå ¿£Áö´Ï¾î ºÐµéÀ̶ó¸é ¹Ýµå½Ã ÀÐ¾î ºÁ¾ß ÇÒ Ã¥ÀÔ´Ï´Ù.
ÀÌ Ã¥ÀÇ ´ë»ó µ¶ÀÚ
- CSS ¼³°è¿¡ °üÇÑ Áö½ÄÀ» ½ÀµæÇØ ÇÑ ´Ü°è ¼ºÀåÇÏ°íÀÚ ÇÏ´Â ÁִϾî ÇÁ·±Æ®¿£µå ¿£Áö´Ï¾î
- CSS ¼³°è¿¡ °üÇÑ ±íÀº ÀÌÇظ¦ ÅëÇØ ½Ç·ÂÀ» Çâ»óÇÏ°íÀÚ ÇÏ´Â ½Ã´Ï¾î ÇÁ·±Æ®¿£µå ¿£Áö´Ï¾î
- Á¶Á÷ ¼öÁØ¿¡¼ÀÇ CSS ±ÔÄ¢À» Á¦Á¤ÇÏ°íÀÚ Çϴ åÀÓÀÚ³ª ÆÀ ¸®´õ