๋ถ€ํŠธ์ŠคํŠธ๋žฉ(BOOTSTRAP)4๋ฅผ ํ™œ์šฉํ•œ ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ

๋””๋ฐ”์ด์Šค ์žฅ์น˜์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ์ด ๋ฐ”๋€Œ๋Š” ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊ฐ•์˜[๊ฐœ์ •ํŒ] ์ž…๋‹ˆ๋‹ค.

ํด๋ž˜์Šค ์†Œ๊ฐœ
๋‚œ์ด๋„
๋ณดํ†ต
์นดํ…Œ๊ณ ๋ฆฌ
์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ - ํ”„๋กœ๊ทธ๋ž˜๋ฐ
ํƒœ๊ทธ
๋ถ€ํŠธ์ŠคํŠธ๋žฉ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS, HTML, jQuery
์ˆ˜๋ฃŒ์ฆ
๋ฐœ๊ธ‰ ๊ฐ€๋Šฅ
์†Œ์š” ์‹œ๊ฐ„
19 ์‹œ๊ฐ„
์ถ”์ฒœ ํ•™์Šต๋Œ€์ƒ
- HTML/CSS๋ฅผ ํ™œ์šฉํ•œ ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€/์›น์•ฑ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์žˆ๋Š” ๋ถ„
- ๋ถ€ํŠธ์ŠคํŠธ๋žฉ(Bootstrap) ํ™œ์šฉ๋ฒ•์„ ํ•™์Šตํ•˜๊ณ  ์‹ถ์€ ๋ถ„
- ํ‚ด์Œค์˜ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ3 ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ๋ถ€ํŠธ์ŠคํŠธ๋žฉ4 ๊ฐ•์˜๋ฅผ ๊ธฐ๋‹ค๋ฆฌ์‹  ๋ถ„
- ์ตœ๊ทผ ์‹ค๋ฌด์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋ฒ„์ „์œผ๋กœ ๋ฐ˜์‘ํ˜• ์›น์ด๋‚˜ ์›น๋””์ž์ธ, ์›น์•ฑ์„ ์ œ์ž‘ํ•˜๋ ค๋Š” ๋ถ„
- ํ”„๋ก ํŠธ ์—”๋“œ ๋ถ„์•ผ๋กœ ์ทจ์—…์„ ํ•˜๊ธฐ์œ„ํ•ด ํ”„๋ก ํŠธ ์—”๋“œ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ์ œ์ž‘ํ•˜๋ ค๋Š” ์ทจ์—… ์ค€๋น„์ƒ

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ํผ๋ธ”๋ฆฌ์‹ฑ, Bootstrap] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

๋””๋ฐ”์ด์Šค ์žฅ์น˜์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ์ด ๋ฐ”๋€Œ๋Š” ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊ฐ•์˜

[2024๋…„ ๊ฐœ์ •ํŒ] ์ž…๋‹ˆ๋‹ค.



๐Ÿ“š ๊ฐ•์˜์†Œ๊ฐœ

๋””๋ฐ”์ด์Šค ์žฅ์น˜์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ์ด ๋ฐ”๋€Œ๋Š” ๋ฐ˜์‘ํ˜• ์›นํŽ˜์ด์ง€๋‚˜ ์›น์•ฑ, ์›น๋””์ž์ธ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ(Bootstrap)์„ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ด๋ก ๊ณผ ์‹ค์Šต์„ ์ ์ ˆํ•˜๊ฒŒ ๋ถ„๋ฐฐํ•˜์—ฌ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ตฌ์„ฑ์š”์†Œ๋“ค์„ ์ดํ•ดํ•˜๊ณ  ์‹ค์Šต์„ ํ†ตํ•˜์—ฌ ๋ฐ”๋กœ๋ฐ”๋กœ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.
์›นํŽ˜์ด์ง€, ์›น์•ฑ, ๋ฐ˜์‘ํ˜• ์›น์„ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ HTML/CSS/ js์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹์ด ์žˆ๋Š” ๋ถ„๋“ค์„ ๋Œ€์ƒ์œผ๋กœ ํ•˜์ง€๋งŒ, ๊ธฐ๋ณธ ์ง€์‹์ด ๋ถ€์กฑํ•˜๋”๋ผ๋„ ๊ฐ•์˜๋ฅผ ๋ฐ˜๋ณต์ ์œผ๋กœ ์‹œ์ฒญํ•˜๋ฉฐ ๋”ฐ๋ผํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ์ž‘ํ•˜์˜€์œผ๋ฉฐ ์‹ค๋ฌด์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋‹จ์ถ•ํ‚ค๋ฅผ ์ด์šฉํ•˜์—ฌ html ์ฝ”๋“œ๋ฅผ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์ธ emmet์˜ ์‚ฌ์šฉ๋ฒ•๋„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ฐ ์ฑ•ํ„ฐ๋งˆ๋‹ค selfEX ์ฝ”๋”ฉ๋ฌธ์ œ๋ฅผ ์ง์ ‘ ํ’€์–ด๋ณด๊ณ  ํ•ด์„ค๊ฐ•์˜๋ฅผ ํ†ตํ•˜์—ฌ ์ œ์ž‘๋ฐฉ๋ฒ•์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜์—ฌ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ํŠผํŠผํžˆ ๋‹ค์ง€๋ฉด์„œ ์ œ์ž‘์Šคํ‚ฌ์„ ๋†’์ผ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ’ก ์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

โœจ ๋ฐ˜์‘ํ˜• ์บ๋กœ์…€๊ณผ ํผ์–‘์‹ ๊ตฌํ˜„



๐ŸŒ  ํ—ค๋ผ ๋ฐ˜์‘ํ˜• ์›น ๋ฉ”์ธ ํŽ˜์ด์ง€ ์ผ๋ถ€ ๊ตฌํ˜„


๐Ÿ“Š ๋””๋ฐ”์ด์Šค์— ๋”ฐ๋ผ ๋ฐ”๋€Œ๋Š” ์ด๋ฏธ์ง€์™€ ๋Œ“๊ธ€ ๊ตฌํ˜„


๐ŸŽˆ ๋ฐ˜์‘ํ˜• ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”์™€ ์นด๋“œ ์ปจํ…์ธ  ๊ตฌํ˜„


๐ŸŽ“
์ˆ˜๊ฐ• ์ „
์ฐธ๊ณ ์‚ฌํ•ญ
์ˆ˜์—…์— ์‚ฌ์šฉ๋˜๋Š” pdf ๊ฐ•์˜์ž๋ฃŒ, ์ด๋ฏธ์ง€๋‚˜ ์™„์„ฑ๋œ ํŒŒ์ผ์„ ๋‹ค์šด๋ฐ›์•„ ์‹ค์Šต์— ํ™œ์šฉํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๐Ÿ“š
์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?
html, css, js ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹
์ฒดํ—˜ํ•˜๊ธฐ
๋ชจ๋‘ ํŽผ์น˜๊ธฐ
  • 01
    ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ฐ˜์‘ํ˜• ์›น ์ฝ”๋”ฉ ๋ง›๋ณด๊ธฐ
    2๊ฐœ (01:26:55)
  • step01-1 ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ฐœ๋…
    43:39
    step01-2 ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ํ•ต์‹ฌ์š”์†Œ 4๊ฐ€์ง€์™€ BS3์—์„œ BS4๋กœ ๋ฐ”๋€ ํฌ์ธํŠธ
    43:16
๊ต์œก ๊ณผ์ •
๋ชจ๋‘ ํŽผ์น˜๊ธฐ
  • 01
    ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ฐ˜์‘ํ˜• ์›น ์ฝ”๋”ฉ ๋ง›๋ณด๊ธฐ
    2๊ฐœ (01:26:55)
  • step01-1 ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ฐœ๋…
    43:39
    step01-2 ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ํ•ต์‹ฌ์š”์†Œ 4๊ฐ€์ง€์™€ BS3์—์„œ BS4๋กœ ๋ฐ”๋€ ํฌ์ธํŠธ
    43:16
  • 02
    ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‹œ์ž‘ํ•˜๊ธฐ
    2๊ฐœ (01:32:15)
  • step02-1 ๋ถ€ํŠธ์ŠคํŠธ๋žฉ4 ์‹œ์ž‘ํ•˜๊ธฐ
    50:15
    step02-2 ๋ฐ˜์‘ํ˜•์›น ์ „์ฒด ๋ ˆ์ด์•„์›ƒ ์งœ๊ธฐ ํ•ต์‹ฌ์ˆœ์„œ
    42:00
  • 03
    ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ๊ณผ ๋ ˆ์ด์•„์›ƒ ๊ด€๋ จ ํด๋ž˜์Šค์˜ ์‚ฌ์šฉ
    5๊ฐœ (03:01:20)
  • step03 ๋ถ€ํŠธ์ŠคํŠธ๋žฉ4์— ์ถ”๊ฐ€๋œ ๋ ˆ์ด์•„์›ƒ ํด๋ž˜์Šค
    47:24
    step04-1 ์ •๋ ฌ๊ด€๋ จ ํด๋ž˜์Šค
    37:10
    step04-2 ์ˆœ์„œ์™€ ์ด๋™ ๊ด€๋ จ ํด๋ž˜์Šค
    45:44
    step05-1 ํ…์ŠคํŠธ ์ด๋ฏธ์ง€ ๊ด€๋ จ ํด๋ž˜์Šค
    27:29
    step05-2 ํ…Œ์ด๋ธ” ๊ด€๋ จ ํด๋ž˜์Šค
    23:33
  • 04
    ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ
    17๊ฐœ (09:58:15)
  • step06 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ1_๊ฒฝ๊ณ ์ฐฝ๋ถ€ํ„ฐ ๋ฒ„ํŠผ๊ทธ๋ฃน๊นŒ์ง€(ํ…Œ์ŠคํŠธ)
    57:02
    step07-1 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ2_์นด๋“œ
    28:21
    step07-2 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ2_์นด๋“œ ๋ฉ”์ด์Šจ๋ฆฌ๊นŒ์ง€
    36:28
    step08-1 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ3_์บ๋กœ์…€
    42:33
    step08-2 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ3_์ฝœ๋žฉ์Šค
    21:08
    step08-3 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ3_๋“œ๋ž๋‹ค์šด
    28:57
    step08-4 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ3_ํผ ์–‘์‹
    50:36
    step08-5 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ3 ์บ๋กœ์…€๊ณผ form_selfEX๋ฌธ์ œ
    22:20
    step09-1 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ4_์ ๋ณดํŠธ๋ก ๋ถ€ํ„ฐ ๋ฏธ๋””์–ด ์˜ค๋ธŒ์ ํŠธ๊นŒ์ง€
    33:49
    step09-2 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ4_๋ชจ๋‹ฌ
    59:00
    step09-3 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ4_selfEX๋ฌธ์ œํ’€์ด
    22:15
    step10-1 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ5_๋„ค๋ธŒ ๋ฐ”
    29:22
    step10-2 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ5_๋„ค๋ธŒ ๋ฐ” selfEXํ’€์ด
    22:58
    step11 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ6_ํŽ˜์ด์ง€๋„ค์ด์…˜๋ถ€ํ„ฐ ํ”„๋กœ๊ทธ๋ ˆ์Šค๊นŒ์ง€
    38:06
    step12-1 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ7_์Šคํฌ๋กค์ŠคํŒŒ์ด๋ถ€ํ„ฐ ํˆดํŒ๊นŒ์ง€
    27:47
    step12-2 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ7_spinner๋ถ€ํ„ฐ tooltip๊นŒ์ง€
    40:23
    step12-3 ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ7_scrollspy_selfEXํ’€์ด
    37:10
  • 05
    ๊ทธ๋ฐ–์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋“ค
    5๊ฐœ (03:06:18)
  • step13 ๊ทธ๋ฐ–์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋“ค1_border์†์„ฑ๋ถ€ํ„ฐ colors์†์„ฑ๊นŒ์ง€
    15:02
    step14 ๊ทธ๋ฐ–์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋“ค2_๋ณด์ด๊ณ  ์ˆจ๊ธฐ๋Š” ํด๋ž˜์Šค & selfEXํ’€์ด
    52:40
    step15-1 ๊ทธ๋ฐ–์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋“ค3_embed๋ถ€ํ„ฐ flex๊ด€๋ จ ํด๋ž˜์Šค๊นŒ์ง€
    25:43
    step15-2 ๊ทธ๋ฐ–์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋“ค3_flex๊ด€๋ จ ํด๋ž˜์Šค ๊ฒฐ๊ณผ ํ™•์ธํ•˜๊ธฐ
    50:46
    step16 ๊ทธ๋ฐ–์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ๋“ค4_texthide๋ถ€ํ„ฐ visibility์†์„ฑ๊นŒ์ง€
    42:07
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ|2024๋…„ 03์›” 06์ผ
๊ฐ•์˜์ž ์†Œ๊ฐœ
๐Ÿ‘ฉ ์˜์ฝ”๋”” ํ‚ด์Œค [ ๋น„์ „๊ณต์ž๋„ ์‰ฝ๊ณ  ์žฌ๋ฏธ์žˆ๊ฒŒ ๋ฐฐ์šฐ๋Š” ์ฝ”๋”ฉ! ] ์„ ๋ชฉํ‘œ๋กœ 15๋…„ ๋„˜๊ฒŒ ํ’€์Šคํƒ(๋ฐฑ์—”๋“œ, ํ”„๋ก ํŠธ์—”๋“œ) ๋ฐ ์˜์ƒ, ์ฝ”๋”ฉ, ๋””์ž์ธ์„ ๊ฐ•์˜ํ•˜๋ฉฐ ๊ฐœ๋ฐœ์ž ์ธ๋ ฅ์–‘์„ฑ์— ์ง„์‹ฌ์ธ ํ˜„์ง ์ง์—…ํ›ˆ๋ จ๊ต์‚ฌ [์ปดํ“จํ„ฐ 1๋„ ๋ชจ๋ฅด๋Š” ์‚ฌ๋žŒ์ด ๋ถ€์—…์œผ๋กœ ์›”100๋งŒ์› ์ˆ˜์ž…๋‚ด๋ณด๊ธฐ ์ฒซ๊ฑธ์Œ] ์˜ ์ €์ž NCS ๊ตญ๊ฐ€์ง๋ฌด๋Šฅ๋ ฅ๊ฐ•์˜ ๊ณ ์šฉ๋…ธ๋™๋ถ€ ํ‰๊ฐ€ 2018, 2019 2๋…„์—ฐ์† A๋“ฑ๊ธ‰ ๊ฐ•์‚ฌ์„ ์ • ์ˆ˜์›๊ทธ๋ฆฐ์ปดํ“จํ„ฐ์•„์นด๋ฐ๋ฏธ ์šฐ์ˆ˜๊ฐ•์‚ฌ์„ ์ •(2017, 2018, 2019 3๋…„์—ฐ์† ์ตœ์šฐ์ˆ˜1๋“ฑ์ƒ ์ˆ˜์ƒ) ์ „) ์‚ผ์„ฑODD ๊ธฐํš ๊ฐœ๋ฐœ ๋งˆ์ผ€ํŒ… ๋‹ด๋‹น ์ „) SFํ•„๋ฆ„์Šค์ฟจ ๊ฐ•์˜ ๊ฐ€ํ†จ๋ฆญ๋Œ€ํ•™๊ต ์ปดํ“จํ„ฐ๊ณตํ•™๋ถ€ ํŠน๊ฐ• ์šฉ์ธ์†ก๋‹ด๋Œ€ํ•™ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ดํ•™๋ถ€ ํŠน๊ฐ•

๊ฐ•์ขŒ ํ›„๊ธฐ
๏ฟฆ
39,600

ํ‰๊ท ํ‰์ 
0.0
๋‚œ์ด๋„
๋ณดํ†ต
์ˆ˜๊ฐ•๊ธฐ๊ฐ„
๊ฒฐ์ œ ํ›„ 52์ฃผ 1์ผ๊ฐ„
์†Œ์š” ์‹œ๊ฐ„
19 ์‹œ๊ฐ„