์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

[ํ•˜๋ฃจ 10๋ถ„|Web Project] HTML/JS/CSS๋กœ ๋‚˜๋งŒ์˜ ์‹ฌ๋ฆฌํ…Œ์ŠคํŠธ ์‚ฌ์ดํŠธ ๋งŒ๋“ค๊ธฐ

HTML / JS / CSS ๋งŒ์„ ๊ฐ€์ง€๊ณ  ์ง์ ‘ ์‹ฌ๋ฆฌ ํ…Œ์ŠคํŠธ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ณ , ๋ฐฐํฌํ•ด๋ณด๋Š” Project ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

Thumbnail

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

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

  • HTML / JS / CSS ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ToyProject

  • ์‚ฌ์ดํŠธ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค๊ณ  ๋ฌด๋ฃŒ๋กœ ๋ฐฐํฌํ•˜๋Š” ๋ฒ•

ํ•˜๋ฃจ 10๋ถ„์œผ๋กœ ๋ฐฐ์šฐ๋Š”, ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ.

HTML / JS / CSS

๋งŒ์„ ๊ฐ€์ง€๊ณ  ๋‚˜๋งŒ์˜ MBTI ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์ž!

1. ๊ฐ•์ขŒ ์†Œ๊ฐœ 

HTML / JS / CSS๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ณธ์ธ๋งŒ์˜ MBTI ํ…Œ์ŠคํŠธ ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๊ณ , ๋ฐฐํฌํ•˜๋Š” ํ”„๋กœ์ ํŠธํ˜• ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

๊ฐ ์–ธ์–ด์— ๋Œ€ํ•œ ๊ธฐ์ดˆ์ ์ธ ์ง€์‹์ด ์žˆ์œผ์‹  ๊ฒƒ์„ ๊ฐ€์ •ํ•˜๊ณ  ๊ฐ•์˜๊ฐ€ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

 

! ์–ด๋А์ •๋„๋กœ HTML / JS / CSS๋ฅผ ์•Œ์•„์•ผ ํ•˜๋‚˜์š”?

  • HTML : ๊ธฐ์ดˆ ํƒœ๊ทธ ์‚ฌ์šฉ๋ฒ•
  • JS / CSS : ~ CSS์„ ํƒ์ž

 

์ •๋ง ๊ธฐ์ดˆ์ ์ธ ๋‚ด์šฉ๋งŒ์„ ์•„์…”๋„ ์ถฉ๋ถ„ํ•˜๋ฉฐ, ๊ธฐ์ดˆ๋ฅผ ๋ฒ—์–ด๋‚œ ๋ถ€๋ถ„์€ ์ด๋ก  ์„ค๋ช…์„ ์ฒจ๋ถ€ ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

2. ๊ฐ•์ขŒ ํŠน์ง• 

๋ถ€๋ถ„์ ์œผ๋กœ JavaScript es6 ๋ฌธ๋ฒ•์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค.

BootStrap์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

netlify๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ง์ ‘ ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฐํฌํ•ฉ๋‹ˆ๋‹ค.

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

  • HTML / JS / CSS ๋ฅผ ์‚ฌ์šฉํ•œ ToyProject
  • ๋ฐฐํฌ๊ฐ€๋Šฅํ•œ ๋‚˜๋งŒ์˜ MBTI ์›น์‚ฌ์ดํŠธ ๋งŒ๋“œ๋Š” ๋ฒ•

4. Special Thanks to

๊ฐ•์˜๋ฅผ ์ œ์ž‘ํ•˜๋ฉฐ ๋งŽ์€ ์ฐธ๊ณ ๋ฅผ ํ•œ ์‚ฌ์ดํŠธ๋ฅผ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

*. ๋‚ด ์‚ฌ์ดํŠธ์— ๋ฐฉ๋ฌธํ•œ ์‚ฌ์šฉ์ž์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅ, ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์–ด์š”!

๋ณธ ๊ฐ•์˜์—์„œ๋Š” ์„œ๋ฒ„์™€ DataBase๋ฅผ ๋‹ค๋ฃจ์ง€ ์•Š๊ธฐ์—,

ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๋„์ž…ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด ๊ฐ•์˜์—์„œ ํ•ด๋‹น๋˜๋Š” ๋‚ด์šฉ์„ ๋‹ค๋ฃจ์—ˆ์Šต๋‹ˆ๋‹ค :)

 

 

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

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

  • ToyProject๋ฅผ ์ ‘ํ•ด๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  • ๋ณธ์ธ๋งŒ์˜ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML ๊ธฐ์ดˆ

  • JavaScript ๊ธฐ์ดˆ

  • CSS ๊ธฐ์ดˆ

์•ˆ๋…•ํ•˜์„ธ์š”
ํŒ๋‹ค์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

21,460

๋ช…

์ˆ˜๊ฐ•์ƒ

512

๊ฐœ

์ˆ˜๊ฐ•ํ‰

268

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

6

๊ฐœ

๊ฐ•์˜

๋ฌธ์˜ : nani6765@gmail.com

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

์ „์ฒด

18๊ฐœ โˆ™ (2์‹œ๊ฐ„ 37๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

138๊ฐœ

4.8

138๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • indie2k

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 3

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ๊ผญ ํ•„์š”ํ•œ ์š”์†Œ๋“ค๋งŒ ์งง์€ ์‹œ๊ฐ„์— ์•Œ์ฐจ๊ฒŒ ๋ฐฐ์šด ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ž…๋ฌธ ๊ฐ•์˜๋กœ ๋“ค์—ˆ๋Š”๋ฐ ์•ž์œผ๋กœ ์—ฌ๊ธฐ์— ์‚ด์„ ๋ถ™์—ฌ๋‚˜๊ฐ€๋ฉด์„œ ๊ณต๋ถ€ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

  • bella8392

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 2

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์˜ค, ์ €๋Š” ๋„ˆ๋ฌด ๋งŒ์กฑ์Šค๋Ÿฌ์›Œ์š” ์ด๋Ÿฐ ๊ฐ•์˜๋ฅผ ๋ฌด๋ฃŒ๋กœ ๋“ค์„ ์ˆ˜ ์žˆ์–ด์„œ ์ •๋ง ์ข‹์Šต๋‹ˆ๋‹ค. ์œ ๋ฃŒ๊ฐ•์˜์ž„์—๋„ ์ด๋งŒํผ ์žฌ๋ฐŒ๊ฒŒ ๊ฐ€๋ฅด์ณ์ฃผ๊ณ  ๋””ํ…Œ์ผํ•˜๊ฒŒ ์„ค๋ช…ํ•ด์ฃผ๋Š” ๊ฐ•์˜๊ฐ€ ๋งŽ์ง€ ์•Š๊ฑฐ๋“ ์š”. ์ €๋Š” ์œ ๋ฃŒ๊ฐ•์˜์˜€์–ด๋„ ๋ˆ์„ ์ง€๋ถˆํ•˜๊ณ  ๋“ค์—ˆ์„ ๊ฒƒ ๊ฐ™์•„์š”. ๊ฐ„๋งŒ์— ์ฆ๊ฒ๊ฒŒ ๊ฐ•์˜ ๋“ค์œผ๋ฉด์„œ ๊ณต๋ถ€ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

  • thehrto12

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    67% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์•Œ์ฐฌ ๊ธฐ๋ณธ๊ธฐ ๊ฐ•์˜์˜€์Šต๋‹ˆ๋‹ค~

  • rainbowblade

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 11

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    83% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์—„์ฒญ ๊ณ ๊ธ‰ ์Šคํ‚ฌ์„ ์ดˆ๋ณด์ž๋„ ์•Œ์•„๋“ฃ๊ธฐ ์‰ฝ๊ฒŒ ์„ค๋ช… ๋„ˆ๋ฌด ์ž˜ํ•ด์ฃผ์‹ญ๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

  • ์šฐ๋™์™„

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 7

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์‚ฌ์ดํŠธ ์ œ์ž‘ํ•ด๋ณด๋Š”๋ฐ ๋งŽ์€ ๋„์›€์ด๋ ๊ฑฐ๊ฐ™์Šต๋‹ˆ๋‹ค.

ํŒ๋‹ค์ฝ”๋”ฉ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

๋น„์Šทํ•œ ๊ฐ•์˜

๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

๋ฌด๋ฃŒ