Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

์œค์žฌ์„ฑ์˜ Bootstrap 4 & 3 Framework Tutorial

๋ถ€ํŠธ์ŠคํŠธ๋žฉ4 ๋ฅผ ์œ„ํ•ด HTML5 ์›น ํ”„๋ ˆ์ž„์›Œํฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ,CSS ํด๋ž˜์Šค๋ฅผ ํ†ตํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ Front End ๊ฐœ๋ฐœ ํ• ์ˆ˜ ์žˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ, ์›น ๊ฐœ๋ฐœ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…

  • ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์„ ํ™œ์šฉํ•œ ๋ฐ˜์‘ํ˜• ์›น ๋ ˆ์ด์•„์›ƒ

  • ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๋‹ค์–‘ํ•œ UI ์š”์†Œ ์‚ฌ์šฉ๋ฒ•

  • ํผ๊ณผ ์ž…๋ ฅ ์š”์†Œ ์Šคํƒ€์ผ๋ง

  • ๋ชจ๋‹ฌ, ํˆดํŒ, ํŒ์˜ค๋ฒ„ ๋“ฑ ๊ณ ๊ธ‰ UI ์š”์†Œ ๊ตฌํ˜„

Bootstrap 4 & 3 Framework Tutorial

ํŠธ์œ„ํ„ฐ ์„œ๋น„์Šค๋ฅผ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ BootStrap์€ ์˜ค๋Š˜๋‚  ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” HTML5 ์›น ํ”„๋ ˆ์ž„์›Œํฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž…๋‹ˆ๋‹ค.์ƒ๋‹จ ๋ฉ”๋‰ด,๋ฒ„ํŠผ, ํšŒ์ „ ๋ชฉ๋งˆ ๋“ฑ ๋‹ค์–‘ํ•œ UI ์š”์†Œ๋“ค์„ ์†์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ ธ ์žˆ์œผ๋ฉฐ ๊ฐœ๋ฐœ์ž๋Š” ์ ์ ˆํ•˜๊ฒŒ ํƒœ๊ทธ๋ฅผ ๋ฐฐ์น˜ํ•˜๊ณ  ์ œ๊ณต๋˜๋Š” css ํด๋ž˜์Šค๋ฅผ์ ์šฉํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ Front End๋ฅผ ์†์‰ฝ๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ UI ์š”์†Œ๋“ค๋งŒ ์‚ฌ์šฉํ•ด๋„ ๋ฉ‹์ง„ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ 100% CSS์™€ jQuery๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด ์ˆ˜์ •์ด๋‚˜ ํ™•์žฅ์ด ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์ขŒ๋Š” ์ตœ์‹  ๋ฒ„์ „์ธ BootStrap 4๋ฅผ ์ค‘์‹ฌ์œผ๋กœ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์œผ๋‚˜ ํ˜„์žฌ๊นŒ์ง€๋„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” 3๋ฒ„์ „๋„ ๊ฐ™์ด ์„ค๋ช…์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.ํ˜„์žฌ ํ”„๋กœ์ ํŠธ์— ๋”ฐ๋ผ 3๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋„ ์žˆ์–ด ๋‘ ๊ฐ€์ง€ ๋ฒ„์ „์„ ๋ชจ๋‘ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•™์Šต ๋ชฉํ‘œ

  • ๋ณธ ๊ฐ•์ขŒ๋ฅผ ๋งˆ์น˜๋ฉด ๋ฐ”๋กœ Front End ๊ฐœ๋ฐœ์„ ์†์‰ฝ๊ฒŒ ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์•ฝ๊ฐ„์— ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋งŒ์œผ๋กœ ๋ฉ‹์ง„ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 ๋„์›€์ด ๋˜๋Š” ๋ถ„๋“ค

  • ๋Œ€ํ•™์ƒ, ์ผ๋ฐ˜์ธ, ๊ฐœ๋ฐœ์ž ๋“ฑ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ Front End ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ์ด ์žˆ๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ๋ˆ„๊ตฌ๋‚˜ ๋Œ€์ƒ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 ๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค

Jumbotron
์ง€์ •๋œ ์˜์—ญ์„ ์‚ฌ๊ฐ์˜ ์˜์—ญ์œผ๋กœ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.
Flex Bootstrap์—์„œ Flex ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ด div ํƒœ๊ทธ์— ๋Œ€ํ•œ ๋ฐฐ์น˜๋ฅผ ๋‹ค์–‘ํ•˜๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ฐธ๊ณ  ์‚ฌํ•ญ

  • ๋ณธ ๊ฐ•์ขŒ๋Š” Front End ์›น ํ”„๋ ˆ์ž„์›Œํฌ ๊ฐ•์ขŒ๋กœ์จ HTML5, CSS3, JavaScript, jQuery ๋ฅผ ํ•„์ˆ˜์ ์œผ๋กœ ํ•™์Šตํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • jQuery ์ฝ”๋“œ๊ฐ€ ๋งŽ์ด ๋‚˜์˜ค๋Š”๊ฑด ์•„๋‹ˆ์ง€๋งŒ ๊ฐ€๋” ์‚ฌ์šฉํ•˜๋Š” ๊ณณ์ด ์žˆ์–ด ๊ธฐ๋ณธ์ ์ธ selector ๋ฌธ๋ฒ• ์ •๋„๋Š” ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ง€์‹๊ณต์œ ์ž ์†Œ๊ฐœ

์œค์žฌ์„ฑ
๊ตญ๋‚ด IT ์ดˆ์ฐฝ๊ธฐ ๋ชจ๋ฐ”์ผ ์ฝ˜ํ…์ธ  ๊ฐœ๋ฐœ ๋ถ€ํ„ฐ ํ˜„์žฌ ์•ˆ๋“œ๋กœ์ด๋“œ,์•„์ดํฐ ์•ฑ๊ฐœ๋ฐœ ๋ฐ ๋‹ค์–‘ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•ด์„œ ๊ฐœ๋ฐœ ๋ฐ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.ํ˜„์žฌ๋Š” (์ฃผ)์†Œํ”„ํŠธ์บ ํผ์Šค ๊ฐœ๋ฐœ ์ด์‚ฌ์ด์‚ฌ๋กœ ์žฌ์งํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ ๊ฒฝ๋ ฅ
- SKT "์•„์ผ๋žœ๋“œ ์–ด๋“œ๋ฒค์ณ" ๋ชจ๋ฐ”์ผ ์ฝ˜ํ…์ธ  ๊ฐœ๋ฐœ ๋Ÿฐ์นญ
- KT " ํ€ด์ฆˆ์‚ฌ์ปค" ๋ชจ๋ฐ”์ผ ์ฝ˜ํ…์ธ  ๊ฐœ๋ฐœ ๋Ÿฐ์นญ
- SK "๋ชจ๋ฐ”์ผ ๊ณต์ธ์ค‘๊ฐœ์‚ฌ" ๋Ÿฐ์นญ
- ์•„์ดํฐ "ํ•œ์žํ†ต" ์•ฑ๊ฐœ๋ฐœ
- ์•„์ดํฐ "ํ—ฌ์Šค ํŠธ๋ ˆ์ด๋‹" ์•ฑ๊ฐœ๋ฐœ
- KT/SK ๋ฐ์ผ์ฆˆ ์˜ค๋ธŒ ์ฝ”๋ชฌ์ฆˆ ์ฝ˜ํ…์ธ  ๊ฐœ๋ฐœ
- KT ๋ฏธ๋‹ˆ ๊ฒŒ์ž„(์•ผ๊ธˆ์•ผ๊ธˆ ๋•…๋”ฐ๋จน๊ธฐ, ์•Œ๋ผ๋”˜์˜ ์š”์ˆ ๋žจํ”„,๋ฏธ์Šคํ„ฐ๋ฆฌ ๋ธ”๋กํƒ์ •๋‹จ,BUZZ and BUZZ)๊ฐœ๋ฐœ

๊ฐ•์˜ ๊ฒฝ๋ ฅ
์‚ผ์„ฑ๋ฉ€ํ‹ฐ์บ ํผ์Šค,๋ถ€์‚ฐ์ •๋ณด์‚ฐ์—…์ง„ํฅ์›,์ „์ฃผ์ •๋ณด๋ฌธํ™”์‚ฐ์—…์ง„ํฅ์›,์ธ์ฒœ์ •๋ณด์‚ฐ์—…์ง„ํฅ์›, ํ•œ๊ตญ์ „ํŒŒ์ง„ํฅ์›, SK C&C, T ์•„์นด๋ฐ๋ฏธ,ํ•œ๊ตญ๋กœ๋ด‡์‚ฐ์—…์ง„ํฅ์›,๋Œ€์ „ ETRI,์‚ผ์„ฑ์ „์ž,nica ๊ต์œก์„ผํ„ฐ,ํ•œ๊ตญ์ƒ์‚ฐ์„ฑ๋ณธ๋ถ€,ํ•œํ™” S&C๋“ฑ ๊ตญ๋‚ด ์œ ๋ช… ๊ธฐ์—… ํ˜„์ง ์žฌ์ž‘์ž ๋ฐ ๋ฏธ์ทจ์—…์ž๋ฅผ ๋Œ€์ƒ์œผ๋กœ ๊ฐ•์˜๋ฅผ 18๋…„์ฐจ ๊ฐœ๋ฐœ ๊ณผ ๊ฐ•์˜๋ฅผ ์ง„ํ–‰ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜ ์ฝ˜ํ…์ธ 
- Start Google Angular.js (์•ต๊ทค๋Ÿฌ) ๊ณผ์ •
- Bootstrap 4 & 3 Framework Tutorial
- ์ฒ˜์Œ์‹œ์ž‘ํ•˜๋Š” JavaScript Tutorials
- ์ฒ˜์Œ์‹œ์ž‘ํ•˜๋Š” jQuery Programming
- ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” CSS & CSS3
- ์ฒ˜์Œ์‹œ์ž‘ํ•˜๋Š” HTML & HTML5 Tutorials
- node.js server Tutorials(Node.js ์„œ๋ฒ„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณผ์ •)
- ์ฝ”ํ‹€๋ฆฐ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ธฐ๋ณธ 1๋‹จ๊ณ„(Kotlin for Android: Beginner one step)
- ์ฝ”ํ‹€๋ฆฐ ์•ˆ๋“œ๋กœ์ด๋“œ ์‹ฌํ™” 2๋‹จ๊ณ„ (Kotlin for Android: Deepening course)
- ์ฝ”ํ‹€๋ฆฐ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ณ ๊ธ‰ 3๋‹จ๊ณ„ (Kotlin for Android: 3 step final course)
- Oracle SQL Database 11g PL/SQL Developer(์˜ค๋ผํด ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค 11G)
- ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” MySQL DataBase
- ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” C Programming
- ์ฒ˜์Œ์‹œ์ž‘ํ•˜๋Š” Google ๊ณต์‹ ๊ฐœ๋ฐœ ์–ธ์–ด Kotlin(์ฝ”ํ‹€๋ฆฐ)
- ์ฒ˜์Œ์‹œ์ž‘ํ•˜๋Š” ํŒŒ์ด์ฌ(Python)

๊ฐ•์˜ ๋ถ„์•ผ ์ž๋ฐ”, ์•ˆ๋“œ๋กœ์ด๋“œ, ํ”Œ๋ ˆ์ž„ ์›Œํฌ, ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค,UML, ์•„์ดํฐ, ๋น…๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๋ฐ ๋ถ„์„,ํŒŒ์ด์ฌ, ์‚ฌ๋ฌผ์ธํ„ฐ๋„ท, R/ํŒŒ์ด์ฌ์„ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ๋ถ„์„,๋”ฅ๋Ÿฌ๋‹,๋จธ์‹ ๋Ÿฌ๋‹ AI, ์ŠคํŒŒํฌ ๋ถ„์•ผ ํ•œ๋ถ„์•ผ์— ๋Œ€ํ•ด ๊ฐ•์˜ ๋‹ค์–‘ํ•œ ๊ฒฝํ—˜์ด ๋…น์•„ ๋‚ด์–ด ์ตœ๋Œ€ํ•œ ์‰ฝ๊ฒŒ ๊ฐ•์˜ ํ•˜์—ฌ ์‹ค์Šต์— ์ ์šฉํ•˜๋„๋ก ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค๊ณ  ์„ค๋ช…์„ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜คํ”„๋ผ์ธ ์ˆ˜์—…์ด ์•„๋‹ˆ๋ฏ€๋กœ ๋ชจ๋ฅด๋Š” ๊ฒƒ์€ ์งˆ๋ฌธ&๋‹ต๋ณ€์„ ์ด์šฉํ•ด์ฃผ์„ธ์š”. ๊ผญ ํ•ด๊ฒฐํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ์›น ๊ฐœ๋ฐœ ์ดˆ๋ณด์ž

  • ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์— ๊ด€์‹ฌ ์žˆ๋Š” ์‚ฌ๋žŒ

  • ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ํ™œ์šฉํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ์›น ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๋””์ž์ธํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์•ˆ๋…•ํ•˜์„ธ์š”
์†Œํ”„ํŠธ์บ ํผ์Šค์ž…๋‹ˆ๋‹ค.

14,824

๋ช…

์ˆ˜๊ฐ•์ƒ

744

๊ฐœ

์ˆ˜๊ฐ•ํ‰

588

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

36

๊ฐœ

๊ฐ•์˜

๊ณต๋™ ์ง€์‹๊ณต์œ ์ž

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

35๊ฐœ โˆ™ (9์‹œ๊ฐ„ 46๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!