À¥ÆÛºí¸®¼Å [ÇöÀå½Ç½À]




HTML°ú CSS±¸ÇöÀÌ ÀÌ¹Ì °¡´ÉÇÑ °æ¿ì ÇØ´ç °Àǰ¡ ¾Ë¸Â½À´Ï´Ù.
À¥µðÀÚÀ̳ʶó°íµµ ÇÒ ¼ö ÀÖ´Â ÄÚµùµÈ ÆäÀÌÁö¸¦ À¥Ç¥ÁØ¿¡ ¾Ë¸Â°Ô ÀÛ¾÷ÇÏ´Â °úÁ¤À» ÁøÇàÇÕ´Ï´Ù.
À¥Á¢±Ù¼º, Å©·Î½ººê¶ó¿ì¡, ½Ã¸àƽ¸¶Å©¾÷ µîÀÇ ¿øÄ¢¿¡ ¸ÂÃß¾î ÄÚµùÇØ¾ß ÇÏ´Â Á÷¾÷±ºÀÔ´Ï´Ù.
¶Ç´Â ÀÌ¹Ì ÀÛ¾÷µÈ À¥ ÆäÀÌÁöµµ Å©·ÒÀÇ ¼Ó¼ºÅøÀ» ÀÌ¿ëÇÏ¿© À¥Ç¥ÁØ, À¥Á¢±Ù¼ºÀÌ °¡´ÉÇϵµ·Ï ÇÏ´Â ÀÛ¾÷À» Á¦ÀÛÇÏ¸é¼ ÁøÇàÇÕ´Ï´Ù.
¸ðµç ÀÛ¾÷ÁøÇàÀº Å©·ÒÀÇ °Ë»ç ±â´ÉÀ» Ȱ¿ëÇØ¼ Á¡°ËÇÏ°í ºñ±³ ¼³¸íÇÕ´Ï´Ù.
-
01.1½Ã°£ 5ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 1
font, line-height, text-indent, text-align, white-space, vertical-align
Ã¥°¥ÇÇ[00:40] font-family/[05:14] generic-family/[10:15] ½Ç½À cursive, fantasy, monospace/[16:07] oblique/[22:47] normal/[29:11] extra-expanded, ultra-expanded/[35:19] normal, length/[40:50] none, ¼öÄ¡/[45:33] ½Ç½À/[52:04] white-space/[56:36] ±æÀÌ/[01:02:45] super/[01:04:40] bottom -
02.1½Ã°£ 6ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 2
word-spacing, letter-spacing, text-decoration, text-transform, shadow, background
Ã¥°¥ÇÇ[00:06] word-spacing/[05:16] ±æÀÌ/[10:06] ½Ç½À/[15:29] ½Ç½À/[21:26] ½Ç½À/[28:44] unicode-bidi/[34:19] text shadow/[40:39] »ö»ó/[45:02] CSS2.1(RGB ¼ýÀÚÇü)/[53:09] ¸íµµÂ÷ °è»ê¹ý/[58:03] background repeat/[01:04:03] À̹ÌÁö ÁÂÇ¥ »ç¿ëÇϱâ -
03.55ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 3
link, background, display, visibility
Ã¥°¥ÇÇ[00:00] background position/[00:14] ¹éºÐÀ²/[04:06] ½Ç½À/[10:39] a:link, a:visited, a:active, a:hover, a:focus/[15:58] background attachment/[18:26] ½Ç½À/[23:59] ½Ç½À/[30:05] inline/[35:31] ½Ç½À/[41:07] inline-table/[45:10] ½Ç½À/[50:39] ½Ç½À -
04.1½Ã°£ 3ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 4
position, z-index, overflow, float
Ã¥°¥ÇÇ[00:28] position/[02:36] ¿¹Á¦½Ç½À/[07:48] ¿¹Á¦/[12:32] top, right, bottom, left/[16:26] number/[20:21] ÀÚ¿¬ ½ºÅüø¼/[26:40] clip ÁÖÀÇ»çÇ×/[34:44] visible/[40:09] visible ½Ç½À/[46:04] float/[51:42] ½Ç½À/[57:24] clear/[01:02:08] ¿¹Á¦ -
05.40ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 5
min, max
Ã¥°¥ÇÇ[00:21] width/[03:39] ¹éºÐÀ²/[07:52] auto, ¹éºÐÀ² ½Ç½À/[11:48] inherit/[15:45] ¹éºÐÀ²/[20:45] height /[25:12] ±æÀÌ ½Ç½À/[31:15] inherit/[36:35] none, inherit/[39:43] R&D ÆÀ¼Ò°³ -
06.1½Ã°£ 1ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 6
margin, Padding
Ã¥°¥ÇÇ[00:02] margin-top/[05:52] ±æÀÌ ½Ç½À/[10:09] auto/[15:33] ¹éºÐÀ² ¿¹Á¦/[20:51] margin-left/[24:53] margin/[30:17] ¹éºÐÀ², auto ¿¹Á¦/[37:00] ±æÀÌ/[43:04] ¹éºÐÀ²/[48:57] ±æÀÌ/[54:23] ±æÀÌ/[01:00:10] tip -
07.1½Ã°£ 44ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 7
Border
Ã¥°¥ÇÇ[00:08] Border-Top-Style/[05:02] dashed ½Ç½À/[10:11] inset/[15:01] solid ½Ç½À/[19:50] dotted, dashed ½Ç½À/[25:46] none, hidden, dotted, dashed, solid/[30:51] Border-Top-width/[35:21] thick/[40:03] thin/[45:44] ½Ç½À/[50:57] thin medium thick ±æÀÌ inherit/[55:04] Border-Top-color/[01:01:47] transparent/[01:05:43] ¿¹Á¦/[01:10:49] color ¿¹Á¦/[01:15:00] color/[01:19:48] ¿¹Á¦/[01:26:27] Border-color/[01:32:53] Border-Bottom/[01:36:37] Border-Right ¿¹Á¦/[01:42:21] À̹ÌÁö ¿¹Á¦ -
08.1½Ã°£ 34ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 8
List-Style-Type, Table-layout, Border-Collapse, Border-spacing, Empty-cells, Caption-side
Ã¥°¥ÇÇ[00:05] List-Style-Type/[06:12] none ½Ç½À/[11:02] decimal ½Ç½À/[15:11] armenian ½Ç½À/[20:52] lower-latin ½Ç½À/[25:07] List-Style-image/[31:45] url ¿¹Á¦/[37:58] inside ¿¹Á¦/[43:01] List-Style-image/[51:06] fixed/[01:00:26] Border-Collapse ½Ç½À/[01:09:00] Border-spacing/[01:17:31] show/[01:25:12] top/[01:29:11] ¿¹Á¦ -
09.45ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 9
Counter, Quotes
Ã¥°¥ÇÇ[00:06] Content/[07:26] counter/[13:55] counter ½Ç½À/[21:43] Counter-increment ½Ç½À/[25:53] Counter-Reset/[30:21]<ÃʱⰪ> /[35:34] Counter-Reset ¿¹Á¦2/[42:15] inherit/[44:10] Quotes ¿¹Á¦2 -
10.1½Ã°£ 7ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 10
Cursor, Outline
Ã¥°¥ÇÇ[00:02] Cursor/[06:15] default/[12:57] wait/[18:43] ne-resize/[23:02] crosshair, pointer, move ¿¹Á¦/[29:55] ½Ç½À/[35:44] Outline-style ¿¹Á¦/[44:13] invert ½Ç½À/[50:56] thick/[56:33] Outline-Width ¿¹Á¦2/[01:02:12] Outline ½Ç½À/[01:06:31] Outline ¿¹Á¦2 -
11.36ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 11
Page, Orphans, Widows
Ã¥°¥ÇÇ[00:10] Page-Break-Before/[06:15] avoid/[11:02] auto/[15:56] right/[20:04] avoid/[22:38] @page/[29:25] <Á¤¼ö>/[35:09] auto ¿¹Á¦ -
12.47ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 12
tab-size, line-break, word-break, hyphens, text
Ã¥°¥ÇÇ[00:58] text-space-collapse/[06:08] preserve/[12:16] tab-size ¿¹Á¦/[18:09] line-break ½Ç½À/[25:15] word-break ÇÑ±Û ¿¹Á¦/[30:46] text-align-last/[36:43] text-align-last ¿¹Á¦2/[41:38] inter-word/[46:24] distribute, kashida ¿¹Á¦ -
13.44ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 13
hanging, writing-mode, background
Ã¥°¥ÇÇ[00:01] hanging-punctuation/[05:43] hanging-punctuation ÆÁ/10:54] text-decoration-line ¿¹Á¦/[15:51] text-decoration-color ¿¹Á¦2/[23:14] text-underline-position ¿¹Á¦/[29:16] vertical-lr/[35:30] background-clip ¿¹Á¦/[42:54] background-origin ¿¹Á¦3 -
14.45ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 14
background, border
Ã¥°¥ÇÇ[00:02] background-size/[05:09] ¹éºÐÀ²-¿µ¿ª ºñ·Ê/[10:32] ¹éºÐÀ² ½Ç½À/[16:17] ¹éºÐÀ²-µÎ°³ÀÇ °ª ÀÔ·Â/[22:58] 4°³ÀÇ °ª ÁöÁ¤/[28:40] ´Ù¾çÇÑ ¿¹Á¦/[32:55] <À̹ÌÁö> ¿¹Á¦/[39:27] ¼±ÀÇ ÁÂÇ¥/[44:27] ¿¹Á¦ -
15.52ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 15
border, box, overflow
Ã¥°¥ÇÇ[00:06] border-image-width/[06:35] ±æÀÌ ¿¹Á¦/[12:40] number ¿¹Á¦/[18:46] border-image-repeat ¿¹Á¦/[24:35] slice/[30:38] y-¹æÇâ°ª/[36:36] box-shadow ¼º°Ý1/[42:43] overflow-x »ç¿ë ¿¹/[47:01] no-display, no-content ¿¹Á¦/[51:11] no-display, no-content ¿¹Á¦ -
16.1½Ã°£ 20ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 16
text, @font-face
Ã¥°¥ÇÇ[00:33] CSS Property/[06:07] ¼Ó¼ºÀ» ÁöÁ¤ÇØÁÙ¶§ Âü°íÇÒ Á¡/[12:19] d-circle Ŭ·¡½º ¼±¾ð/[17:44] ´ëü °¡´ÉÇÑ ¼Ó¼º ¼³¸í/[27:57] °á°úÈ®ÀÎ/[34:22] string ¼Ó¼ºÀû¿ëÈ®ÀÎ/[39:21] ¿¹Á¦/[47:46] blur, color°ª Àû¿ë/[53:56] ¿¹Á¦/[01:03:33] font-stretch/[01:09:07] ƯÁ¤ ÆùÆ®»ç¿ë -
17.57ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 17
animation, @keyframes
Ã¥°¥ÇÇ[00:00] animation keyframes ¼Ó¼º/[06:46] ±âº»¿¹Á¦ °á°ú È®ÀÎ/[11:52] ºê¶ó¿ìÀúº° ÄÚµå Àû¿ë/[19:02] keyframes ¼±¾ð/[24:52] ¾Ö´Ï¸ÞÀÌ¼Ç ÁøÇà°á°ú È®ÀÎ/[31:26] À̵¿À§Ä¡°ª º¯°æ/[38:07] play »óŰª È®ÀÎ/[46:22] ease-out È¿°ú Àû¿ë/[52:29] ¾Ö´Ï¸ÞÀÌ¼Ç ¹æÇâ¼Ó¼º/[57:04] ¾Ö´Ï¸ÞÀ̼ÇÀÇ Àû¿ë½Ã ¼Ó¼º °ª Àû¿ë -
18.60ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 18
shadow
Ã¥°¥ÇÇ[00:00] box-shadow ¼Ó¼º/[06:45] ±âº» Ŭ·¡½º ¼±¾ð/[15:48] ±×¸²ÀÚ À§Ä¡ ÁöÁ¤/[23:22] ºê¶ó¿ìÀúÀÇ ÆäÀÌÁö Àû¿ë/[32:00] box-decoration-break/[39:59] °á°ú °ª Àû¿ë È®ÀÎ/[49:43] ±âº» ¼Ó¼º°ª Àû¿ë/[55:58] °á°ú °ª Àû¿ë È®ÀÎ/[59:52] °á°ú È®ÀÎ ºñ±³ -
19.53ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 19
box, flexible
Ã¥°¥ÇÇ[00:00] box-direction/[06:30] ¹æÇâÈ®ÀÎ/[14:37] ¼Ó¼º ÁöÁ¤°ª º¯°æ/[21:56] ¿É¼Ç°ªÀû¿ë ºñ±³/[28:36] ±âº» ±¸¼º ÄÚµå È®ÀÎ/[35:45] ¿¹Á¦ °á°ú À̹ÌÁö È®ÀÎ/[41:00] °á°ú È®ÀÎ/[46:30] ±âº» ¼Ó¼º Àû¿ë ½ºÅ¸ÀÏ Ãß°¡/[49:30] ±×·ì °ª ¼³Á¤/[52:27] °á°úÈ®ÀÎ -
20.59ºÐ ÄÚµù½Ç¹«±îÁö ¿Ïº® ¸¶½ºÅÍ 20
multi-column, transform
Ã¥°¥ÇÇ[00:00] multi-column properties/[07:45] ´Ù´ÜÀû¿ë ¼Ó¼ºÀÇ ¿É¼Ç°ªµé/[11:46] °°Àº ¿µ¿ª¾È¿¡¼ÀÇ ´Ù´Ü È¿°ú/[18:18] ÁÂÇ¥°ª¿¡¼ÀÇ À§Ä¡Àû¿ëº¯È/[25:52] ºê¶ó¿ìÀúÀû¿ë ¼Ó¼º È®ÀÎ/[29:36] scale/[36:20] ±âº» ¿É¼Ç ¼³Á¤ °ª È®ÀÎ/[46:07] ¿©·¯°³ °ª ÁöÁ¤½Ã ¼Ó¼º Àû¿ë ¹æ¹ý/[50:07] ¼Ó¼º °á°ú°ª È®ÀÎ/[57:37] transiton ¼Ó¼º - Çö¾÷ ÆÛºí¸®½Ì
-
21.29ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 1
ÆäÀÌÁö¸¦ ±¸¼ºÇÏ´Â ÇÁ·¹ÀÓµéÀ» ÄÚµùÇÏ¸ç ±¸¼º¿ä¼ÒµéÀ» ½Ç½ÀÇÕ´Ï´Ù.
Ã¥°¥ÇÇ[00:00] °¢ ±â±âÀÇ ÆäÀÌÁö ±¸¼º/[05:48] *ÀÇ ÀǹÌ/[10:45] css¿¬µ¿½Ã À¯ÀÇÁ¡/[15:04] messageâ ½ºÅ¸ÀÏ/[21:05] TOP¸Þ´º ½ºÅ¸ÀÏ/[25:35] °Ë»ç¼Ó¼º -
22.33ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 2
W3CÀÇ HTML5 CSS3ÀÇ Ç¥ÁØ ÀÎÁõÅ×½ºÆ®, °Ë»ö¿¡ ³ëÃâµÇ´Â TIP, »ó¼Ó°ü°è ³À̵µ
Ã¥°¥ÇÇ[00:41] CSS ¿¬µ¿ÆäÀÌÁö È®ÀÎÇϱâ/[04:40] W3C °Ë»çÆäÀÌÁö (ÀÎÁõÅ×½ºÆ®)/[09:24] °Ë»ö¿¡ ³ëÃâµÇ´Â TIP/[15:17] inline ¼³Á¤°ú Block¼³Á¤/[19:19] m2line(±¸ºÐ¼±)/[23:52] munue ºÎºÐ/[27:19] fourth ºÎºÐ -
23.26ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 3
¹ÝÀÀÇüÀÌ ¾Æ´Ï¾îµµ ¾î¶² ÇØ»óµµ¿¡¼µµ Àϱ׷¯Áü¾øÀÌ À¯Áö, ÇÑ±ÛÆùÆ® css ±úÁü±îÁö ÇØ°áÇÏ´Â Á¦ÀÛ½ºÅ³
Ã¥°¥ÇÇ[00:00] ÀÎÆ®·Î/[06:20] ¹Ý¿µµÈºÎºÐ ÁÖ¼®Ã³¸® ÀǹÌ/[09:47] ÇÑ±ÛÆùÆ® ±úÁü ÇØ°á/[14:40] amain Ç׸ñ/[20:24] bottom box Ç׸ñ/[23:20] footer Ç׸ñ -
24.42ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 4
¶Ç´Ù¸¥ 2°³ÀÇ ÆäÀÌÁö¸¦ ½Ç½ÀÇÏ¸é¼ »ó¼Ó°ü°è¿Í °èÃþ, ·¹À̾ƿôÀÌ Á¡·ÉÇÒ ¿µ¿ªÀÇ ±âÁØ¿¡ ´ëÇØ¼ ±¸Ã¼ÀûÀ¸·Î ½Ç½ÀÇÕ´Ï´Ù.
-
25.42ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 5
ÁøÁ¤ÇÑ ÆÛºí¸®¼ÅÀÇ ¹æ½ÄÀ¸·Î °¡·Î 3´Ü ÆäÀÌÁö ½Ç½À°ú Æû °ü·Ã ¿ä¼Òµé°ú °¡»óŬ·¡½ºÀÇ ÄÁÅÙÃ÷ Á¦ÀÛ½ºÅ³À» ¾Ë·Áµå¸³´Ï´Ù.
-
26.33ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 6
¸Þ´º½Ç½À 2°¡Áö CSS¸¸À¸·Îµµ ¸¶¿ì½º ¿À¹ö¿Í Æ÷Ä¿½º¿¡ ÇϺθ޴º Ãâ·Â, ¸¶¿ì½º Á¾·ùº° Æ®·£Áö¼Ç È¿°ú, ÅøÆÁ
-
27.38ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 7
Á¾·ùº° ½½¶óÀ̵ù ¸Þ´º ÀÎDz°ú ÀÏ¹Ý ¸Þ´º¸¦ ·Îµù°ú µ¿½Ã¿¡ ¾Ö´Ï¸Þ´Ï¼Ç È¿°ú, À̹ÌÁö »ö»ó ¹× ¾ËÆÄ°ªÀ¸·Î ³ª¿À°Ô ÇÕ´Ï´Ù.
-
28.28ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 8
¸¶¿ì½º¿À¹ö ½Ã°è¹æÇâ ¹× ·Îµù ÈÄ È¸Àü°ú ¼Óµµ, ÀÏ¹Ý ¼ºê ÆäÀÌÁö Á¦ÀÛ 1, 2
-
29.37ºÐ ÆäÀÌÁö ÄÚµù ½Ç½À Part 9 (¿Ï°á!)
¿©·¯ ÆäÀÌÁö ½Ç½À°ú Á¾·ùº° ¾Ö´Ï¸ÞÀÌ¼Ç ¸Þ´º¿Í ÀÔü¹öư Á¦ÀÛÀ¸·Î Àü¹®ÀûÀÎ ÄÚµùÀ» ÇÒ ¼ö ÀÖ°Ô ÇÕ´Ï´Ù.
- [½Ç¹«ÀÚ Ãʺù °ÀÇ] ½Ç¹«¿ª·® °È¸¦ À§ÇÑ À¥Ç¥ÁØ ½ÇÀüÆí
-
30.1½Ã°£ 25ºÐ Àß ¸¸µé¾îÁø À¥»çÀÌÆ® Á¦ÀÛ NO1
½Ç¹«¿¡ Ȱ¿ëµµ°¡ ³ôÀº ¸Þ´º&ȨÆäÀÌÁö Á¦ÀÛÇÏ¸é¼ ·¹À̾ƿô ±¸¼º°ú µðÀÚÀÎ ÀÍÈ÷±â
Ã¥°¥ÇÇ[00:00] ¿Ï¼º ȨÆäÀÌÁö »ìÆìº¸±â/[01:08] ÀüüÀûÀÎ ·¹À̾ƿô/[05:13] header a/[10:44] nav Á¤ÀÇ/[15:47] nav ul li a:hover/[24:22] article Á¤ÀÇ/[29:14] #welcome .col-2/[36:32] #welcome ul li a:hover/[44:22] section h1/[50:22] section a.btn span/[01:01:02] section2/[01:09:22] #recent-articles .article-1/[01:13:48] #recent-articles .article-2 a.btn/[01:19:45] #personal-overview .overview-1/[01:23:30] #personal-overview .overview-2 ul -
31.1½Ã°£ 25ºÐ Àß ¸¸µé¾îÁø À¥»çÀÌÆ® Á¦ÀÛ NO2
½Ç¹«¿¡ Ȱ¿ëµµ°¡ ³ôÀº ¸Þ´º&ȨÆäÀÌÁö Á¦ÀÛÇÏ¸é¼ ·¹À̾ƿô ±¸¼º°ú µðÀÚÀÎ ÀÍÈ÷±â
Ã¥°¥ÇÇ[00:00] ¿Ï¼º ȨÆäÀÌÁö »ìÆìº¸±â/[02:13] ÀüüÀûÀÎ ·¹À̾ƿô/[06:51] ÇöÀç Àû¿ë»óȲ/[11:26] #globalheader #globalnav/[17:28] ¸Þ´º À̹ÌÁö ºÒ·¯¿À±â/[25:57] #g-search/[32:15] µ¿¿µ»ó À̹ÌÁö »ðÀÔ/[40:16] #main/[47:49] border solid/[54:11] #billboard .videos-thumb:hover i .play/[01:00:45] ·¹À̾ƿô Á¤¸®/[01:05:01] aside Á¤ÀÇ/[01:11:10] .promos ul li.last-child/[01:18:06] .promos ul li a - CSSÄÚµå ºÐ¼®
-
32.56ºÐ CSSÄÚµå ºÐ¼® Ȱ¿ë ¹æ¹ý
´Ù¸¥ À¥»çÀÌÆ®¿¡ Àû¿ëµÈ CSSÄÚµùÀ» ³» À¥ÆäÀÌÁö¿¡ ±×´ë·Î Àû¿ëÇÒ ¼ö ÀÖ°Ô ÇÏ´Â ¹æ¹ý ¹× ¾î¶² À¥ÆäÀÌÁöµµ ºÐ¼®Çس¾¼ö ÀÖ´Â CSSÄÚµùÀÇ ÁöÁ¸ÀÌ µÉ ¼ö ÀÖ´Â °í±Þ±â¼úÀ» ¾Ë·Áµå¸³´Ï´Ù.
Ã¥°¥ÇÇ[00:04] À¥Ç¥ÁØ »çÀÌÆ® Á¦ÀÛÀÇ ±âº» ´Ü°è/[01:15] À¥Ç¥ÁØ »çÀÌÆ®ÀÇ ±¸¼º¿ä¼Ò/[04:10] À¥Ç¥ÁØÀÇ ÁÖ¿äÁ¡/[10:37] Ç÷¯±×ÀÎ ÀÛµ¿ ¹æ½Ä/[17:56] computed style º¸±â/[23:37] À̹ÌÁö ¿ÀÆÛ½ÃƼ ÇØÁ¦/[28:03] main Ŭ·¡½º º¸±â/[34:07] ¹®¼±¸Á¶»óÀ¸·Î º¸±â/[38:52] head Àû¿ëµÈ ¼Ó¼º°ª º¸±â/[43:36] ÆùÆ®ÆäÀ̽º Àû¿ë/[50:22] ¸¶Áø, ÆÐµù°ª ÀÔ·Â/[53:58] ¾ÆÀÌÄÜ ¿¹·Î style Àû¿ë - ¸ðµç ºê¶ó¿ìÀú
-
33.1½Ã°£ 2ºÐ Á¦ÀÛÇÑ ±×´ë·Î ¹®Á¦¾øÀÌ ¸ðµç ºê¶ó¿ìÀú¿¡¼ µ¿ÀÏÇÏ°Ô Ãâ·Â
(css) Å©·Ò, »çÆÄ¸®, ÆÄÀÌ¾îÆø½º, IE ¹× windows ¹öÀüº° µ¿ÀÏ, (image) À̹ÌÁö ÇÑÀåÀ¸·Î ¸ðµç À̹ÌÁö ÇØ°á
Ã¥°¥ÇÇ[00:05] ¸ðµç ºê¶ó¿ìÀú/[01:03] À̹ÌÁö ÇÑÀåÀ¸·Î Ç¥Çö/[06:19] º»¹® »ìÆìº¸±â/[12:11] °Ë»ö ¹öư/[18:39] overflow: hidden/[22:37] list-style: none/[29:08] width, height/[32:02] Ä«Å×°í¸®/[36:25] background: url/[42:54] À¥±âȹ À̹ÌÁö/[50:16] :first-child/[57:34] À̹ÌÁö ½ºÅ²/[59:44] ¼ö°½Åû, »ùÇà ¹öư/[01:00:31] margin-left -
34.1½Ã°£ 10ºÐ ¸ðµç ºê¶ó¿ìÀú ½Ç¹«ÄÚµù
Á÷Á¢ cssÄÚµù ³ëÇÏ¿ì Àü´Þ
Ã¥°¥ÇÇ[00:00] ±âº» ¹®¼ »ìÆìº¸±â/[00:35] ¸ð¹ÙÀÏ È¨ÆäÀÌÁö¿¡¼ »ç¿ëÇÏ´Â ¼Ò½º ÄÚµå/[06:46] .allpage/[10:07] float: left/[15:41] Æ÷Åä¼¥À¸·Î À̹ÌÁö »çÀÌÁî Á¤Çϱâ/[22:25] .menu .azmen6/[29:29] .shadowbox/[37:48] .leftnavigation li .front/[44:11] .lefthot li/[49:27] #main .subone p {line-height:180%;}/[54:51] color/[59:22] display: inline-block, width, height//[01:03:02] display:inline-block, width/[01:08:26] display: inline-block, background: url - SASS(SCSS)
-
35.2½Ã°£ 3ºÐ chapter 1
ruby sass ¼³Ä¡, gem update, watch app, sass:public, SCSS ÄÄÆÄÀÏ, º¯¼ö, cmd ¿±â, Mapping, ÁÖ¼®Ã³¸® - ÁÙ¸ÂÃã, Àç½ÇÇà, º¯¼öÁ¤ÀÇ, ID»ý¼º, $magin-top-1, WARNING on line of Error ¼³¸í, border-radius($radius3) - @extend, ¹éºÐÀ² °è»ê, (UTF-8), Ãâ·Â½ºÅ¸ÀÏ Á¤ÀÇ, compressed nested compact expanded - ÇѱÛÃâ·Â ó¸®, $value * 1px, cursor: n + -resize, scssÀÇ Â÷ÀÌ º¯È¯, map-values, @each, map-get, sourceMappingURL - @if map-has-key, map-merge, Error ¹ß»ý, @each, nth, $:hover, @extend.sra, @media, @impor
Ã¥°¥ÇÇ[00:01] css ¸ðµâ/[00:10] ruby ¼³Ä¡/[01:28] sass ¼³Ä¡/[01:55] gem i sass/[05:40] alview.css ¿Í alviewÀÇ Â÷ÀÌÁ¡/[12:53] Error ¹ß»ý/[19:23] sass¿¡ ´ëÇÑ º¯¼ö ó¸®/[24:35] value°ª°ú º¯¼ö¸í µ¿ÀÏÈ/[32:36] WARNING on line 23 of all.sass/[42:47] .sra, .aas/[50:22] Ãâ·Â½ºÅ¸ÀÏ Á¤ÀÇ/[57:43] .abvfr/[01:01:59] color°ª¿¡ ´ëÇÑ º¯¼öÁ¤ÀÇ/[01:07:28] start, end ÇÊÅͰª/[01:12:23] $class: accr/[01:20:27] $font:/[01:30:10] Áßø±â´É/[01:38:36] ÁÖ¼®Ã³¸®/[01:46:49] Ŭ·¡½º »ý¼º(.div)/[01:48:51] Ŭ·¡½º¸í(.alzio) È®Àå/[01:53:54] @media (min-width: 300px)/[01:58:13] padding/[02:03:39] @import 'abcde/al2im' -
36.2½Ã°£ 0ºÐ chapter 2
sass-mq --save, _mq.scss, @import, @include mq, $from, media Äõ¸®, min-width, max-width, min-device-pixel-ratio, min-resolution, @extend, @mixin, webkit moz ms o, @each , @if, column-gap, @content, @warn, @for, @while, @function, @return, @media print, @at-root, gem install compass, compass create alziosass, config.rb, syntax ¿É¼Ç, compass compile, sass-cache, bower_components, gem install bourbon
Ã¥°¥ÇÇ/[01:35:13] ÁÖ¼®¹®±¸ Ãß°¡/[01:43:53] lib Æú´õ(compass,animation)/[01:46:54] alzioyess --syntax scss/[01:52:10] ANSI ¡æ UTF-8/[01:53:56] ½ºÅ¸ÀÏ½ÃÆ® ¼Ó¼º/[01:56:10] font size, font-family Á¤ÀÇ/[02:00:16] import -
37.1½Ã°£ 37ºÐ chapter 3
±Û²Ã ¼¼ÆÃ(Á¤ÀÇ), font-face, Padding Box, Border Box, content-box, text-shadow, border-radius, box-shadow, box-sizing, display: inline-block, vertical-align, user-interface, placeholde, global-reset, reset-box-model, overflow scroll, reset-list-style, reset-image-anchor-border, reset-html5, @charset, reset-html5, nested-reset, layout, #root,#root_footer,#footer
Ã¥°¥ÇÇ[00:11] ÇÑ±Û ±Û²Ã/[01:25] ±Û²Ã ¼¼ÆÃ(Á¤ÀÇ)/[06:15] compass Æú´õ È®ÀÎ/[19:51] images_dir = "img"/[25:13] @include prefixed-properties/[37:32] box-sizing(content-box)/[44:45] opacity Ãâ·Â/[46:16] compass Å×½ºÆ®/[56:21] * also accepts "all" or "none"/[01:03:22] input, textarea/[01:10:26] ¼öÁ¤´ë»ó=¿øº»ÆÄÀÏ/[01:19:25] @include body-a;/[01:27:49] nested-reset/[01:36:52] compass compile
-
À¥Ç¥ÁØ [ÀÔ¹® + °í±Þ]À¥Ç¥ÁØ Àΰ Æò»ý±³À°¿ø ±³À° ¾È³» À¥°³¹ßÀ» ½ÃÀÛÇÏ´Â ºÐµéÀÌ ¹Ýµå½Ã ÀÌ¿ëÇØ¾ß Çϸç Àü¹®°¡Àû ÇüÅ·Π°ÀDZ¸¼ºÀÌ ÁøÇàµÇ°í ÀÖ¾î ´Ü°è¿¡ µû¶ó ü°èÀûÀ¸·Î ÇнÀÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÔ¹®ÀÚ»Ó¸¸ ¾Æ´Ï¶ó Àü¹®°¡¿¡°Ôµµ µµ¿òÀÌ µÇ´Â ³»¿ëÀÔ´Ï´Ù.ÇнÀ±â°£ : 2°³¿ù/°ÀǼö : 22°/ÁøÇà½Ã°£ : 13½Ã°£ 19ºÐ/¼ö°·á :
270,000¿ø165,000¿ø